seb/threedee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2025-08-24 19:48:10 +02:00
parent 214678d9f0
commit de8ff2efe8
1 changed files with 46 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
index.html
View File

@@ -185,56 +185,37 @@
}
function setupEnvironmentMap() {
// Create a high-contrast environment map for more visible reflections
// Create a simple cube texture for reflections (makes glass more visible)
const cubeTextureLoader = new THREE.CubeTextureLoader();
// Create a procedural cube map for reflections
const envMapRenderTarget = new THREE.WebGLCubeRenderTarget(256, {
format: THREE.RGBFormat,
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter
});
// Simple gradient environment for reflections
const canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext('2d');
// Create a more dramatic pattern for better visibility
// Create gradient for reflections
const gradient = ctx.createLinearGradient(0, 0, 0, 256);
gradient.addColorStop(0, '#87CEEB'); // Sky blue
gradient.addColorStop(0.5, '#F0F8FF'); // Alice blue
gradient.addColorStop(1, '#4682B4'); // Steel blue
// Background gradient
const backgroundGradient = ctx.createRadialGradient(256, 256, 0, 256, 256, 300);
backgroundGradient.addColorStop(0, '#ffffff'); // White center
backgroundGradient.addColorStop(0.3, '#87CEEB'); // Sky blue
backgroundGradient.addColorStop(0.6, '#4682B4'); // Steel blue
backgroundGradient.addColorStop(1, '#191970'); // Midnight blue
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 256, 256);
ctx.fillStyle = backgroundGradient;
ctx.fillRect(0, 0, 512, 512);
// Add high-contrast elements for visible reflections
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 512, 100); // White stripe top
ctx.fillRect(0, 412, 512, 100); // White stripe bottom
ctx.fillRect(0, 0, 100, 512); // White stripe left
ctx.fillRect(412, 0, 100, 512); // White stripe right
// Add some geometric patterns
ctx.fillStyle = '#ffff00'; // Yellow accents
ctx.fillRect(200, 200, 112, 112); // Yellow square
ctx.fillStyle = '#ff4444'; // Red accents
ctx.beginPath();
ctx.arc(356, 156, 50, 0, 2 * Math.PI);
ctx.fill();
// Convert to texture with enhanced settings
// Convert to texture
const texture = new THREE.CanvasTexture(canvas);
texture.mapping = THREE.EquirectangularReflectionMapping;
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.generateMipmaps = true;
texture.flipY = false;
// Store for glass materials
window.environmentMap = texture;
console.log('High-contrast environment map created for glass reflections');
// Debug: Show environment map in console
console.log('Environment map texture:', texture);
console.log('Environment map size:', texture.image.width, 'x', texture.image.height);
}
function loadCubeModel() {
@@ -251,23 +232,35 @@
const material = materials.materials[key];
material.side = THREE.DoubleSide;
// Handle glass materials specially
// Handle glass materials specially
if (key.toLowerCase().includes('glass')) {
material.transparent = true;
// Preserve original opacity from MTL file (d value) - don't override
// Make glass more visible - realistic glass opacity
material.opacity = 0.7; // More visible than original MTL setting
// Simple glass properties for visibility
// Enhanced glass properties for better visibility
material.shininess = 100;
material.reflectivity = 0.8;
// Glass-like color with slight tint for visibility
material.color = new THREE.Color(0.9, 0.95, 1.0);
// Add specular highlights to make glass more apparent
material.specular = new THREE.Color(0.8, 0.9, 1.0);
// Slight emissive to make glass edges more visible
if (material.emissive) {
material.emissive.setHex(0x001122); // Very subtle blue glow
}
// Apply environment map for reflections
if (window.environmentMap) {
material.envMap = window.environmentMap;
material.envMapIntensity = 1.5; // Moderate reflection intensity
material.envMapIntensity = 0.9;
}
console.log(`Glass material '${key}' - MTL opacity: ${material.opacity}`);
console.log(`Glass material '${key}' configured with opacity: ${material.opacity}`);
} else {
// Non-glass materials
material.transparent = false;
@@ -279,14 +272,7 @@
}
}
// Force material to update and recompile
material.needsUpdate = true;
// Double-check environment map application
if (!material.envMap && window.environmentMap) {
material.envMap = window.environmentMap;
console.log(`Fallback: Applied environment map to ${key}`);
}
});
// Set materials to OBJ loader
@@ -309,49 +295,34 @@
// Glass-specific settings
child.material.side = THREE.DoubleSide;
child.material.transparent = true;
// Preserve original opacity from MTL file - don't override
child.material.opacity = 0.7;
child.material.alphaTest = 0.1;
// Enhanced reflective properties for maximum visibility
child.material.envMapIntensity = 2.0; // Maximum reflection intensity
child.material.reflectivity = 1.0; // Maximum reflectivity
child.material.shininess = 200; // Very high shininess
// Enhanced reflective properties
child.material.envMapIntensity = 0.9;
// Apply environment map for reflections
if (window.environmentMap) {
child.material.envMap = window.environmentMap;
child.material.combine = THREE.MixOperation;
child.material.refractionRatio = 0.98;
}
// Enhance specular for better visibility
child.material.specular = new THREE.Color(1.0, 1.0, 1.0);
child.material.color = new THREE.Color(1.0, 1.0, 1.0);
// Disable shadow casting for glass (more realistic)
child.castShadow = false;
child.receiveShadow = true;
console.log(`=== Applied Glass Settings to Mesh ===`);
console.log(` Final Opacity: ${child.material.opacity}`);
console.log(` Environment Map Intensity: ${child.material.envMapIntensity}`);
console.log(` Material Type: ${child.material.type}`);
console.log(` Has Environment Map: ${child.material.envMap ? 'YES' : 'NO'}`);
console.log('=====================================');
console.log('Applied glass-specific settings to mesh');
// Add prominent wireframe to glass edges for better visibility
// Add subtle wireframe to glass edges for better visibility
if (child.geometry) {
const wireframe = new THREE.EdgesGeometry(child.geometry);
const wireframeMaterial = new THREE.LineBasicMaterial({
color: 0x66bbff, // Brighter blue
color: 0x88aaff,
transparent: true,
opacity: 0.8, // More visible
linewidth: 3 // Thicker lines
opacity: 0.3,
linewidth: 2
});
const wireframeLines = new THREE.LineSegments(wireframe, wireframeMaterial);
child.add(wireframeLines);
console.log('Added prominent wireframe edges to glass surface');
}
} else {
// Non-glass materials
@@ -365,13 +336,7 @@
}
}
// Force complete material update
child.material.needsUpdate = true;
// Force immediate shader recompilation
if (child.material.envMap) {
child.material.envMap.needsUpdate = true;
}
}
});