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

Adjust lighting and emissive properties for improved scene illumination: reduced intensities for ambient, directional, point, spotlight, and hemisphere lights in lighting.js; modified emissive brightness in model-loader.js for better interior visibility; increased tone mapping exposure in scene-setup.js for a brighter appearance.

Browse Source
This commit is contained in:
sebseb7
2025-08-26 09:34:00 +02:00
parent bdcbdbf3c8
commit 327627f194
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lighting.js
View File

@@ -1,12 +1,12 @@
import * as THREE from 'three'; import * as THREE from 'three';
export function setupLighting(scene, camera) { export function setupLighting(scene, camera) {
// Ambient light for overall illumination - increased intensity // Ambient light for overall illumination - reduced intensity
const ambientLight = new THREE.AmbientLight(0x404040, 1.2); const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
scene.add(ambientLight); scene.add(ambientLight);
// Directional light (like sunlight) - increased intensity // Directional light (like sunlight) - reduced intensity
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(10, 10, 5); directionalLight.position.set(10, 10, 5);
directionalLight.castShadow = true; directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.width = 2048;
@@ -19,19 +19,19 @@ export function setupLighting(scene, camera) {
scene.add(pointLight); scene.add(pointLight);
// Enhanced camera point light - follows the camera to illuminate from viewing angle // Enhanced camera point light - follows the camera to illuminate from viewing angle
window.cameraLight = new THREE.PointLight(0xffffff, 2.0, 300); window.cameraLight = new THREE.PointLight(0xffffff, 0.8, 300);
window.cameraLight.position.copy(camera.position); window.cameraLight.position.copy(camera.position);
scene.add(window.cameraLight); scene.add(window.cameraLight);
// Camera spotlight for focused illumination (like a headlamp) // Camera spotlight for focused illumination (like a headlamp)
window.cameraSpotlight = new THREE.SpotLight(0xffffff, 1.5, 150, Math.PI / 6, 0.2); window.cameraSpotlight = new THREE.SpotLight(0xffffff, 0.5, 150, Math.PI / 6, 0.2);
window.cameraSpotlight.position.copy(camera.position); window.cameraSpotlight.position.copy(camera.position);
window.cameraSpotlight.target.position.set(0, 0, 0); // Point at origin initially window.cameraSpotlight.target.position.set(0, 0, 0); // Point at origin initially
scene.add(window.cameraSpotlight); scene.add(window.cameraSpotlight);
scene.add(window.cameraSpotlight.target); scene.add(window.cameraSpotlight.target);
// Additional camera directional light (like a flashlight) // Additional camera directional light (like a flashlight)
window.cameraDirectionalLight = new THREE.DirectionalLight(0xffffff, 1.0); window.cameraDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
window.cameraDirectionalLight.position.copy(camera.position); window.cameraDirectionalLight.position.copy(camera.position);
window.cameraDirectionalLight.target.position.set(0, 0, -1); window.cameraDirectionalLight.target.position.set(0, 0, -1);
scene.add(window.cameraDirectionalLight); scene.add(window.cameraDirectionalLight);
@@ -47,8 +47,8 @@ export function setupLighting(scene, camera) {
window.interiorLight2.position.set(5, 5, -5); // Will be adjusted relative to model window.interiorLight2.position.set(5, 5, -5); // Will be adjusted relative to model
scene.add(window.interiorLight2); scene.add(window.interiorLight2);
// Hemisphere light for natural lighting - increased intensity // Hemisphere light for natural lighting - reduced intensity
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.8); const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.4);
scene.add(hemiLight); scene.add(hemiLight);
console.log('✨ Enhanced camera lights added - headlamp-style illumination will follow your view'); console.log('✨ Enhanced camera lights added - headlamp-style illumination will follow your view');

6
src/model-loader.js
View File

@@ -55,11 +55,11 @@ export function loadCubeModel(scene, camera, controls, onLoadComplete) {
material.transparent = false; material.transparent = false;
material.opacity = 1.0; material.opacity = 1.0;
// Add emissive for interior visibility on solid materials // Add subtle emissive for interior visibility on solid materials
if (material.emissive) { if (material.emissive) {
material.emissive.setHex(0x222222); // Increased emissive brightness material.emissive.setHex(0x111111); // Reduced emissive brightness
} else { } else {
material.emissive = new THREE.Color(0x222222); material.emissive = new THREE.Color(0x111111);
} }
} }

2
src/scene-setup.js
View File

@@ -32,7 +32,7 @@ export function createScene(cameraConfig) {
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.5; renderer.toneMappingExposure = 1.8; // Higher exposure for brighter gamma-corrected appearance
// Enable proper transparency rendering // Enable proper transparency rendering
renderer.sortObjects = true; renderer.sortObjects = true;