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() { 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'); const canvas = document.createElement('canvas');
canvas.width = 512; canvas.width = 256;
canvas.height = 512; canvas.height = 256;
const ctx = canvas.getContext('2d'); 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 ctx.fillStyle = gradient;
const backgroundGradient = ctx.createRadialGradient(256, 256, 0, 256, 256, 300); ctx.fillRect(0, 0, 256, 256);
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 = backgroundGradient; // Convert to texture
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
const texture = new THREE.CanvasTexture(canvas); const texture = new THREE.CanvasTexture(canvas);
texture.mapping = THREE.EquirectangularReflectionMapping; texture.mapping = THREE.EquirectangularReflectionMapping;
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.generateMipmaps = true;
texture.flipY = false;
// Store for glass materials // Store for glass materials
window.environmentMap = texture; 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() { function loadCubeModel() {
@@ -251,23 +232,35 @@
const material = materials.materials[key]; const material = materials.materials[key];
material.side = THREE.DoubleSide; material.side = THREE.DoubleSide;
// Handle glass materials specially // Handle glass materials specially
if (key.toLowerCase().includes('glass')) { if (key.toLowerCase().includes('glass')) {
material.transparent = true; 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.shininess = 100;
material.reflectivity = 0.8; 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 // Apply environment map for reflections
if (window.environmentMap) { if (window.environmentMap) {
material.envMap = 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 { } else {
// Non-glass materials // Non-glass materials
material.transparent = false; material.transparent = false;
@@ -279,14 +272,7 @@
} }
} }
// Force material to update and recompile
material.needsUpdate = true; 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 // Set materials to OBJ loader
@@ -309,49 +295,34 @@
// Glass-specific settings // Glass-specific settings
child.material.side = THREE.DoubleSide; child.material.side = THREE.DoubleSide;
child.material.transparent = true; child.material.transparent = true;
// Preserve original opacity from MTL file - don't override child.material.opacity = 0.7;
child.material.alphaTest = 0.1; child.material.alphaTest = 0.1;
// Enhanced reflective properties for maximum visibility // Enhanced reflective properties
child.material.envMapIntensity = 2.0; // Maximum reflection intensity child.material.envMapIntensity = 0.9;
child.material.reflectivity = 1.0; // Maximum reflectivity
child.material.shininess = 200; // Very high shininess
// Apply environment map for reflections // Apply environment map for reflections
if (window.environmentMap) { if (window.environmentMap) {
child.material.envMap = 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) // Disable shadow casting for glass (more realistic)
child.castShadow = false; child.castShadow = false;
child.receiveShadow = true; child.receiveShadow = true;
console.log(`=== Applied Glass Settings to Mesh ===`); console.log('Applied glass-specific 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('=====================================');
// Add prominent wireframe to glass edges for better visibility // Add subtle wireframe to glass edges for better visibility
if (child.geometry) { if (child.geometry) {
const wireframe = new THREE.EdgesGeometry(child.geometry); const wireframe = new THREE.EdgesGeometry(child.geometry);
const wireframeMaterial = new THREE.LineBasicMaterial({ const wireframeMaterial = new THREE.LineBasicMaterial({
color: 0x66bbff, // Brighter blue color: 0x88aaff,
transparent: true, transparent: true,
opacity: 0.8, // More visible opacity: 0.3,
linewidth: 3 // Thicker lines linewidth: 2
}); });
const wireframeLines = new THREE.LineSegments(wireframe, wireframeMaterial); const wireframeLines = new THREE.LineSegments(wireframe, wireframeMaterial);
child.add(wireframeLines); child.add(wireframeLines);
console.log('Added prominent wireframe edges to glass surface');
} }
} else { } else {
// Non-glass materials // Non-glass materials
@@ -365,13 +336,7 @@
} }
} }
// Force complete material update
child.material.needsUpdate = true; child.material.needsUpdate = true;
// Force immediate shader recompilation
if (child.material.envMap) {
child.material.envMap.needsUpdate = true;
}
} }
}); });