Update: modularised the three.js code

Author: rish906

src/pages/home/.ipynb_checkpoints/Home-checkpoint.tsx

@@ -1,29 +1,48 @@
-import { useEffect, useRef } from "react";
-import { main } from "./solarsystem.js";
 import styles from "./Home.module.css";
+import {useState, useEffect, useRef} from "react";
+import LevelComponent from "../../components/LevelComponent";
+// import { main } from "./solarsystem.js";
+import { main } from "./js/main.js";
 
-function Home() {
-    
+export default function Home() {
+    const lvlNum = 4;
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
     useEffect(() => {
 
         if (!canvasRef.current) return;
 
         main(canvasRef.current);
+        }, []);
 
-    }, []);
+    const [isVisible, setIsVisible] = useState(false);
+    const [mountKey, setMountKey] = useState(0);
+
+    const handleOpen = () => {
+        setMountKey(k => k + 1);
+        setIsVisible(true);
+    };
 
     return (
-        <>
+        <div>
+            <button className="ml-100 mt-80 absolute border-4 rounded-3xl p-5" onClick={handleOpen} disabled={isVisible}>
+                Glorp
+            </button>
+            {isVisible && (
+                <LevelComponent
+                key={mountKey}
+                onClose={() => setIsVisible(false)}
+                lvl={lvlNum}
+                />
+            )}
+
             <header>
                 <div className={styles["header-brand"]}>
-                    <h1>Glorpython</h1>
+                    <h1>glorpython</h1>
                 </div>
             </header>
+
             <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
-        </>
+        </div>
     );
-}
-
-export default Home;
+}

src/pages/home/.ipynb_checkpoints/solarsystem-checkpoint.js

@@ -54,6 +54,8 @@ export function main(canvas) {
     ];
 
     const planets = planetData.flatMap(d => {
+    
+        
         const pts = [];
         for (let i = 0; i <= 128; i++) {
             const a = (i / 128) * Math.PI * 2;
@@ -101,6 +103,10 @@ export function main(canvas) {
         scene.add(new THREE.Points(starGeo, starMat));
     }
 
+
+
+    
+
     // Mouse parallax
     let targetOffset = { x: 0, y: 0 };
     let currentOffset = { x: 0, y: 0 };

src/pages/home/Home.tsx

@@ -1,7 +1,8 @@
 import styles from "./Home.module.css";
 import {useState, useEffect, useRef} from "react";
 import LevelComponent from "../../components/LevelComponent";
-import { main } from "./solarsystem.js";
+// import { main } from "./solarsystem.js";
+import { main } from "./js/main.js";
 
 export default function Home() {
     const lvlNum = 4;

src/pages/home/js/.ipynb_checkpoints/camera-checkpoint.js

@@ -0,0 +1,82 @@
+import * as THREE from "three";
+
+export function createCamera( canvas ) {
+    
+    const fov = 45;
+    const aspect = canvas.clientWidth / canvas.clientHeight;
+    const near = 0.1;
+    const far = 500;
+    const basePosition = new THREE.Vector3(0, 40, 70);
+    
+    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+    
+    camera.position.copy(basePosition);
+
+    return { camera, basePosition };
+    
+}
+
+export function setupParallax( canvas ) {
+    
+    // Mouse parallax
+    const targetOffset = { x: 0, y: 0 };
+    const currentOffset = { x: 0, y: 0 };
+
+    window.addEventListener('mousemove', e => {
+        const rect = canvas.getBoundingClientRect();
+        const nx = (e.clientX - rect.left) / rect.width  - 0.5;
+        const ny = (e.clientY - rect.top)  / rect.height - 0.5;
+        targetOffset.x =  nx * 20;
+        targetOffset.y = -ny * 20;
+    });
+
+    window.addEventListener('mouseleave', () => {
+        targetOffset.x = 0;
+        targetOffset.y = 0;
+    });
+
+    return { targetOffset, currentOffset };
+    
+}
+
+export function setupFocus( canvas, camera, planets, basePosition ) {
+    
+    const state = {
+        raycaster:    new THREE.Raycaster(),
+        pointer:      new THREE.Vector2(),
+        paused:       false,
+        focusedPlanet: null,
+        cameraTarget:  null,
+        lookAtTarget:  null,
+        tweening:      false,
+    };
+
+    canvas.addEventListener('click', e => {
+        const rect = canvas.getBoundingClientRect();
+        state.pointer.x =  ((e.clientX - rect.left) / rect.width)  * 2 - 1;
+        state.pointer.y = -((e.clientY - rect.top)  / rect.height) * 2 + 1;
+        state.raycaster.setFromCamera(state.pointer, camera);
+
+        const meshes = planets.map(p => p.mesh);
+        const hits   = state.raycaster.intersectObjects(meshes);
+
+        if (hits.length > 0) {
+            state.focusedPlanet = planets.find(p => p.mesh === hits[0].object);
+            state.paused   = true;
+            state.tweening  = true;
+        } 
+        else {
+            state.focusedPlanet = null;
+            state.paused   = false;
+            state.tweening  = true;
+            state.cameraTarget  = basePosition.clone();
+            state.lookAtTarget  = new THREE.Vector3(0, 0, 0);
+        }
+    });
+
+    return state;
+    
+}
+
+
+

src/pages/home/js/.ipynb_checkpoints/main-checkpoint.js

@@ -0,0 +1,152 @@
+import * as THREE from "three";
+import { createRenderer } from "./renderer.js";
+import { createCamera, setupParallax, setupFocus } from "./camera.js";
+import { createScene } from "./scene.js";
+
+const ZOOM_DIST = 5;
+const TWEEN_SPEED = 0.07;
+
+export function main( canvas ) {
+
+    // --- Initialisation ---
+
+    const renderer = createRenderer( canvas );
+
+    const { camera, basePosition } = createCamera( canvas );
+
+    const { scene, sun, planets } = createScene();
+
+    const { targetOffset, currentOffset } = setupParallax( canvas );
+
+    const focus = setupFocus( canvas, camera, planets, basePosition );
+
+    const currentLookAt = new THREE.Vector3(0, 0, 0);
+    const origin = new THREE.Vector3(0, 0, 0);
+
+
+    
+    // --- Render loop ---
+    
+    requestAnimationFrame(render);
+
+    function render() {
+
+        updateScene();
+        updateCamera();
+        handleResize();
+
+        renderer.render(scene, camera);
+        requestAnimationFrame(render); 
+
+
+        
+        // --- Done! (the rest is defining these functions) ---
+
+
+        
+        // Update the sun and planet motions, if not paused 
+        function updateScene() {
+
+            rotateSun()
+            advancePlanetOrbits()
+        
+            function rotateSun() {
+                if (!focus.paused) sun.rotation.y += 0.003;
+            }
+            
+            function advancePlanetOrbits() {
+                planets.forEach(p => {
+                    if (!focus.paused) p.angle += p.speed * 0.008;
+            
+                    p.mesh.position.set(
+                        Math.cos(p.angle) * p.orbitR,
+                        Math.sin(p.angle) * p.tilt * p.orbitR * 0.18,
+                        Math.sin(p.angle) * p.orbitR
+                    );
+                    p.mesh.rotation.y += 0.01;
+                });
+            }
+        
+        }
+
+        // Update the camera by tweening if needed, otherwise (unless paused, which is part of tweeening) do the parallax thing 
+        function updateCamera() {
+            
+            updateFocusTarget();
+        
+            if (focus.tweening && focus.cameraTarget && focus.lookAtTarget) {
+                updateCameraTween();
+            } 
+            else if (!focus.paused) {
+                updateCameraParallax();
+            }
+        
+            function updateFocusTarget() {
+                
+                if (!focus.focusedPlanet) return;
+            
+                const planetPosition = focus.focusedPlanet.mesh.position;
+                const planetDirection = planetPosition.clone().normalize();
+            
+                focus.cameraTarget = planetPosition.clone().add(planetDirection.multiplyScalar(focus.focusedPlanet.radius + ZOOM_DIST));
+                focus.cameraTarget.y += focus.focusedPlanet.radius * 0.8;
+                focus.lookAtTarget = planetPosition.clone();
+                
+            }
+            
+            function updateCameraTween () {
+            
+                camera.position.lerp(focus.cameraTarget, TWEEN_SPEED);
+                currentLookAt.lerp(focus.lookAtTarget, TWEEN_SPEED);
+                camera.lookAt(currentLookAt);
+            
+                if (camera.position.distanceTo(focus.cameraTarget) < 0.05) {
+                    focus.tweening = false;
+                };
+            
+            }
+        
+            function updateCameraParallax() {
+                
+                currentOffset.x += (targetOffset.x - currentOffset.x) * 0.13;
+                currentOffset.y += (targetOffset.y - currentOffset.y) * 0.13;
+            
+                camera.position.set(
+                    basePosition.x + currentOffset.x,
+                    basePosition.y + currentOffset.y,
+                    basePosition.z
+                );
+            
+                currentLookAt.lerp(origin, 0.1);
+                camera.lookAt(currentLookAt);
+                
+            }
+        }
+
+        // Resize the canvas dimensions change, then update the camera so things don't get squashed
+        function handleResize() {
+    
+            if (resizeRendererToDisplaySize( canvas, renderer )) {
+                camera.aspect = canvas.clientWidth / canvas.clientHeight;
+                camera.updateProjectionMatrix();
+            }
+            
+            function resizeRendererToDisplaySize( canvas, renderer ) {
+                    
+                const width  = canvas.clientWidth;
+                const height = canvas.clientHeight;
+                const needResize = canvas.width !== width || canvas.height !== height;
+                
+                if (needResize) {
+                    renderer.setSize(width, height, false);
+                }
+                
+                return needResize;
+                
+            }
+            
+        }
+        
+    }
+    
+}

src/pages/home/js/.ipynb_checkpoints/renderer-checkpoint.js

@@ -0,0 +1,15 @@
+import * as THREE from "three";
+
+export function createRenderer( canvas ) {
+    
+    const renderer = new THREE.WebGLRenderer({ 
+        antialias: true, 
+        canvas 
+    });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 2.0;
+
+    return renderer
+    
+}