diff --git a/index.html b/index.html
index 47f71d6..56cd863 100644
--- a/index.html
+++ b/index.html
@@ -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;
- }
}
});