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>
51 lines
1.3 KiB
JSON
51 lines
1.3 KiB
JSON
{
|
|
"name": "doormile-next",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"build:css": "bash scripts/build-css.sh",
|
|
"start": "next start",
|
|
"lint": "eslint",
|
|
"test": "jest",
|
|
"test:watch": "jest --watch",
|
|
"test:coverage": "jest --coverage"
|
|
},
|
|
"dependencies": {
|
|
"@emailjs/browser": "^4.4.1",
|
|
"@react-three/drei": "^10.7.7",
|
|
"@react-three/fiber": "^9.6.1",
|
|
"@react-three/postprocessing": "^3.0.4",
|
|
"framer-motion": "^12.40.0",
|
|
"gsap": "^3.15.0",
|
|
"leaflet": "^1.9.4",
|
|
"lenis": "^1.3.23",
|
|
"maath": "^0.10.8",
|
|
"next": "16.2.6",
|
|
"react": "19.2.4",
|
|
"react-dom": "19.2.4",
|
|
"react-leaflet": "^5.0.0",
|
|
"three": "^0.184.0",
|
|
"zustand": "^5.0.14"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/postcss": "^4",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.2",
|
|
"@types/jest": "^30.0.0",
|
|
"@types/leaflet": "^1.9.21",
|
|
"@types/node": "^20",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"@types/three": "^0.184.0",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "16.2.6",
|
|
"jest": "^30.4.2",
|
|
"jest-environment-jsdom": "^30.4.1",
|
|
"tailwindcss": "^4",
|
|
"ts-node": "^10.9.2",
|
|
"typescript": "^5"
|
|
}
|
|
}
|