Aravind R
3d53f82e7b
Migrate the standalone Vite + React Three Fiber experience into the existing Next.js site as the body of the How It Works page, replacing the Miles3 / WhyChooseDoormile / TheDoormileWay content sections while preserving the Elementor hero, global Header/Footer, layout, routing and SEO. - New self-contained module: src/modules/how-it-works-3d/ (R3F scene, hooks, zustand store, animations, curves, constants, utils, scoped CSS). App.jsx → Experience3D.jsx; 3d_scene.jsx → models/Scene3D.jsx. - 32MB GLB moved to public/models/3d_scene_final.glb; useGLTF paths updated. - Client-only entry via dynamic ssr:false loader (Experience3DLoader). - Self-managed fixed pin (tall section + absolute stage toggled absolute(top)→fixed→absolute(bottom) from ScrollTrigger pin state), mirroring the site's StrategySection, since the fixed header + ancestor overflow:hidden break CSS sticky / GSAP pin. - experience.css fully scoped under .dm-hiw-3d to avoid colliding with the site's Elementor CSS. - Global Lenis disabled on /how-it-works; module runs its own tuned Lenis; jump-to-section scroll math made spacer-relative. - Added zustand + maath; ESLint-ignored the ported module. Rendering fixes (root causes found by driving headless Chrome): - Bump three 0.171 → 0.184 to match @react-three/fiber@9.6 / drei@10.7 / postprocessing@6.39 (0.171 silently failed to render this GLB and caused the EffectComposer getContextAttributes().alpha crash). Other 3D routes verified. - EffectComposer: Bloom + Vignette only. SSAO needs a NormalPass (v3 dropped the old `disableNormalPass`), and that extra full-scene pass exhausted the WebGL context on this heavy scene. - Cap Canvas dpr to [1,1.5] to bound framebuffer memory on retina displays. - Defer Canvas mount via IntersectionObserver (mountScene), matching StrategySection, to ease StrictMode/first-render GPU pressure. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
import * as THREE from 'three'
|
|
|
|
// Premium Apple-inspired cinematic keyframes looking directly at the front of each building
|
|
export const cameraPositions = [
|
|
{
|
|
// Stage 01: First Mile Warehouse (Front-on view of loading bays, lowered target to center truck)
|
|
progress: 0.0,
|
|
position: new THREE.Vector3(19.727, 7.5, -14.0),
|
|
target: new THREE.Vector3(19.727, 2.0, -31.02),
|
|
},
|
|
{
|
|
// Transition 01: Highway Cruise (Looking down at the highway joining road)
|
|
progress: 0.25,
|
|
position: new THREE.Vector3(0.0, 12.0, -12.0),
|
|
target: new THREE.Vector3(6.447, 2.0, -19.06),
|
|
},
|
|
{
|
|
// Stage 02: Mid Mile Hub (Front-on view of loading bays, lowered target to center truck)
|
|
progress: 0.5,
|
|
position: new THREE.Vector3(-19.146, 6.5, 10.0),
|
|
target: new THREE.Vector3(-19.146, 1.5, -6.00),
|
|
},
|
|
{
|
|
// Stage 03: Last Mile Delivery Center (Front-on view of local hub, lowered target to center truck)
|
|
progress: 0.75,
|
|
position: new THREE.Vector3(19.263, 5.5, 27.0),
|
|
target: new THREE.Vector3(19.263, 1.2, 4.0),
|
|
},
|
|
{
|
|
// Stage 04: Centralized Dashboard (Front-on view of the analytics monitor screen)
|
|
progress: 1.0,
|
|
position: new THREE.Vector3(-13.5, 5.0, 31.0),
|
|
target: new THREE.Vector3(-7.7, 3.8, 25.4),
|
|
},
|
|
]
|