From dee8c8e74de68fee42418270e77d67297efcf157 Mon Sep 17 00:00:00 2001 From: jason Date: Thu, 23 Apr 2026 13:24:40 -0500 Subject: [PATCH] new model viewer fix 4 --- src/client/viewer/main.ts | 77 +++++++++++++++++---------------------- views/viewer.ejs | 8 ++++ 2 files changed, 41 insertions(+), 44 deletions(-) diff --git a/src/client/viewer/main.ts b/src/client/viewer/main.ts index 520250a..0e5d3df 100644 --- a/src/client/viewer/main.ts +++ b/src/client/viewer/main.ts @@ -16,11 +16,11 @@ declare const __STEPVIEW__: { // ---- Scene state --------------------------------------------------------- -let renderer: THREE.WebGLRenderer -let scene: THREE.Scene -let camera: THREE.PerspectiveCamera -let controls: OrbitControls -let keyLight: THREE.DirectionalLight +let renderer: THREE.WebGLRenderer +let scene: THREE.Scene +let camera: THREE.PerspectiveCamera +let controls: OrbitControls +let viewingDist: number = 200 // updated by fitCamera; used by fog toggle // ---- UI helpers ---------------------------------------------------------- @@ -71,29 +71,28 @@ function buildScene(canvas: HTMLCanvasElement) { scene = new THREE.Scene() - // Subtle environment fog - scene.fog = new THREE.FogExp2(0x0a0a0f, 0.0008) - camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, 10000) camera.position.set(5, 3, 8) - // Lighting - const ambient = new THREE.AmbientLight(0xffffff, 0.5) + // Lighting — no fog: FogExp2 with a fixed density darkens large models + // whose camera distance exceeds ~200 units, making them appear black. + const ambient = new THREE.AmbientLight(0xffffff, 0.9) scene.add(ambient) - keyLight = new THREE.DirectionalLight(0xffffff, 2.0) - keyLight.position.set(10, 20, 10) - keyLight.castShadow = true - keyLight.shadow.mapSize.set(2048, 2048) - scene.add(keyLight) - scene.add(keyLight.target) + const key = new THREE.DirectionalLight(0xffffff, 1.8) + key.position.set(1, 2, 1.5) + key.castShadow = true + key.shadow.mapSize.set(2048, 2048) + key.shadow.camera.near = 0.1 + key.shadow.camera.far = 500 + scene.add(key) const fill = new THREE.DirectionalLight(0x8899cc, 0.4) - fill.position.set(-10, 5, -10) + fill.position.set(-2, 0.5, -1) scene.add(fill) - const rim = new THREE.DirectionalLight(0xffffff, 0.2) - rim.position.set(0, -5, -10) + const rim = new THREE.DirectionalLight(0xffffff, 0.25) + rim.position.set(0, -1, -2) scene.add(rim) controls = new OrbitControls(camera, renderer.domElement) @@ -138,6 +137,8 @@ function fitCamera(object: THREE.Object3D) { const fovRad = camera.fov * (Math.PI / 180) const dist = (maxDim / (2 * Math.tan(fovRad / 2))) * 1.6 + viewingDist = dist + camera.near = maxDim * 0.0005 camera.far = maxDim * 200 camera.updateProjectionMatrix() @@ -150,31 +151,6 @@ function fitCamera(object: THREE.Object3D) { camera.lookAt(center) controls.target.copy(center) controls.update() - - // Scale fog so it stays subtle at any model size. - // density = 0.19/dist keeps fog-factor ≈ 0.95 at the viewing distance. - if (scene.fog instanceof THREE.FogExp2) { - scene.fog.density = 0.19 / dist - } - - // Aim key light at the model center and fit its shadow frustum around - // the model so shadows are correct regardless of scale. - const lightDist = maxDim * 2 - keyLight.position.set( - center.x + lightDist * 0.5, - center.y + lightDist, - center.z + lightDist * 0.5, - ) - keyLight.target.position.copy(center) - keyLight.target.updateMatrixWorld() - - const sc = keyLight.shadow.camera - const ext = maxDim * 1.5 - sc.left = -ext; sc.right = ext - sc.top = ext; sc.bottom = -ext - sc.near = lightDist * 0.1 - sc.far = lightDist * 4 - sc.updateProjectionMatrix() } // ---- Ground grid --------------------------------------------------------- @@ -379,6 +355,19 @@ function wireToolbar() { }) } + // Fog toggle — off by default; density scaled to the loaded model's viewing distance + let fogOn = false + const fogBtn = document.getElementById('fog-btn') + if (fogBtn) { + fogBtn.addEventListener('click', () => { + fogOn = !fogOn + scene.fog = fogOn + ? new THREE.FogExp2(0x0a0a0f, 0.19 / viewingDist) + : null + fogBtn.classList.toggle('text-accent', fogOn) + }) + } + // Wireframe toggle let wireframe = false const wireBtn = document.getElementById('wireframe-btn') diff --git a/views/viewer.ejs b/views/viewer.ejs index 859e4bf..803a8f3 100644 --- a/views/viewer.ejs +++ b/views/viewer.ejs @@ -32,6 +32,14 @@
+ + +