From de8ff2efe8211909b2c0957318b5a0655858aa96 Mon Sep 17 00:00:00 2001 From: seb Date: Sun, 24 Aug 2025 19:48:10 +0200 Subject: [PATCH] u --- index.html | 127 +++++++++++++++++++---------------------------------- 1 file changed, 46 insertions(+), 81 deletions(-) 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; - } } });