Add: sun texture

Author: rayishihara

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

@@ -1,29 +1,62 @@
-import { useEffect, useRef } from "react";
-import { main } from "./solarsystem.js";
 import styles from "./Home.module.css";
-
-function Home() {
-    
+import { useState, useEffect, useRef } from "react";
+import LevelComponent from "../../components/LevelComponent";
+import { main } from "./js/main.js";
+// import { main } from "./solarsystem.js";
+import { useMouseMoving } from "../../hooks/useMouseMoving.js";
+export default function Home() {
+    const lvlNum = 4;
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
+    const zoomOutRef = useRef<(() => void) | null>(null);
+
+    const [isVisible, setIsVisible] = useState(false);
+    const [mountKey, setMountKey] = useState(0);
+    const isMouseMoving = useMouseMoving(2500);
+    const hideUI = isMouseMoving || isVisible;
+
+    const handleOpen = () => {
+        setMountKey(k => k + 1);
+        setIsVisible(true);
+    };
+
+    const handleClose = () => {
+        setIsVisible(false);
+        zoomOutRef.current?.();
+    };
 
     useEffect(() => {
-        
         if (!canvasRef.current) return;
-        
-        main(canvasRef.current);
-
+        const { zoomOut } = main(canvasRef.current, handleOpen);
+        zoomOutRef.current = zoomOut;
     }, []);
 
     return (
-        <>
-            <header>
+        <div>
+            <header style={{
+                transition: "opacity 0.4s ease",
+                opacity: hideUI ? 0 : 1,
+                pointerEvents: hideUI ? "none" : "auto",
+            }}
+            >
                 <div className={styles["header-brand"]}>
-                    <h1>Glorpython</h1>
+                    <h1>glorpython</h1>
                 </div>
             </header>
-            <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
-        </>
+            <section className="relative w-full h-screen">
+                {isVisible && (
+
+                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-50">
+                        <LevelComponent
+                        // key={mountKey}
+                          selectedLevel={1}
+                          onClose={() => handleClose()}
+                          
+                        />
+                    </div>
+
+                )}
+                <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
+            </section>
+        </div>
     );
 }
-
-export default Home;

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

@@ -3,13 +3,21 @@ import * as THREE from "three";
 const ZOOM_DIST    = 5;       // how close the camera gets (in planet radii + offset)
 const TWEEN_SPEED  = 0.07;    // lerp factor for camera movement
 
-export function main(canvas) {
-
+export function main(canvas, onPlanetFocus) {
+    const loader = new THREE.TextureLoader();
     const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.toneMapping = THREE.ACESFilmicToneMapping;
     renderer.toneMappingExposure = 2.0;
 
+    const createRepeatingTexture = (path, repeatX = 2, repeatY = 1) => {
+        const tex = loader.load(path);
+        tex.wrapS = THREE.RepeatWrapping;
+        tex.wrapT = THREE.RepeatWrapping;
+        tex.repeat.set(repeatX, repeatY);
+        return tex;
+    };
+
     const fov = 45;
     const aspect = canvas.clientWidth / canvas.clientHeight;
     const near = 0.1;
@@ -37,20 +45,19 @@ export function main(canvas) {
     // Sun
     const sunGeo = new THREE.SphereGeometry(4.5, 64, 64);
     const sunMat = new THREE.MeshStandardMaterial({
-        color: 0xe8ffff,
-        emissive: 0x88ffee,
-        emissiveIntensity: 3.2,
-        roughness: 0.0,
-        metalness: 0.0
+        map: createRepeatingTexture('/textures/glorptest.png', 3, 3),
+        emissiveMap: loader.load('/textures/suntexture.webp'), // same tex drives the glow
+        emissive: 0x91ffaf,
+        emissiveIntensity: 0.1,
     });
     const sun = new THREE.Mesh(sunGeo, sunMat);
     scene.add(sun);
 
     // Planets
     const planetData = [
-        { radius: 1.1, orbitR: 14, speed: 0.8,  tilt: 0.2,  color: 0xff6644, emissive: 0x441100 },
-        { radius: 1.5, orbitR: 24, speed: 0.45, tilt: 0.35, color: 0x44aaff, emissive: 0x001133 },
-        { radius: 1.2, orbitR: 36, speed: 0.25, tilt: 0.15, color: 0x88dd55, emissive: 0x112200 },
+        { radius: 1.1, orbitR: 14, speed: 0.8,  tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
+        { radius: 1.5, orbitR: 24, speed: 0.45, tilt: 0.35, color: 0x44aaff, emissive: 0x001133, texture: '/textures/texture2.webp' },
+        { radius: 1.2, orbitR: 36, speed: 0.25, tilt: 0.15, color: 0x88dd55, emissive: 0x112200, texture: '/textures/texture3.webp'},
     ];
 
     const planets = planetData.flatMap(d => {
@@ -72,9 +79,7 @@ export function main(canvas) {
         return [0, 1, 2].map(i => {
             const geo = new THREE.SphereGeometry(d.radius, 36, 36);
             const mat = new THREE.MeshStandardMaterial({
-                color: d.color,
-                emissive: d.emissive,
-                emissiveIntensity: 1.0,
+                map: loader.load(d.texture),
                 roughness: 0.65,
                 metalness: 0.05
             });
@@ -122,11 +127,23 @@ export function main(canvas) {
     const raycaster = new THREE.Raycaster();
     const pointer   = new THREE.Vector2();
 
-    let paused         = false;   // are planets frozen?
-    let focusedPlanet  = null;    // the planet object we zoomed into
-    let cameraTarget   = null;    // THREE.Vector3 we're tweening toward
-    let lookAtTarget   = null;    // THREE.Vector3 we're looking at
+    let paused         = false;
+    let focusedPlanet  = null;
+    let cameraTarget   = null;
+    let lookAtTarget   = null;
     let tweening       = false;
+    let popupFired     = false;
+
+    // Zoom out — resets focus and starts the camera tween back to the initial position.
+    // Called both by canvas clicks on empty space and externally (e.g. the ✕ button).
+    function zoomOut() {
+        console.log("Hi");
+        focusedPlanet = null;
+        paused        = false;
+        tweening      = true;
+        cameraTarget  = initPos.clone();
+        lookAtTarget  = new THREE.Vector3(0, 0, 0);
+    }
 
     canvas.addEventListener('click', e => {
         const rect = canvas.getBoundingClientRect();
@@ -138,20 +155,16 @@ export function main(canvas) {
         const hits   = raycaster.intersectObjects(meshes);
 
         if (hits.length > 0) {
-            // Clicked a planet — focus it
             const hit = hits[0];
             focusedPlanet = planets.find(p => p.mesh === hit.object);
-            paused  = true;
-            tweening = true;
+            paused     = true;
+            tweening   = true;
+            popupFired = false;
         } else {
-            // Clicked empty space — release
-            focusedPlanet = null;
-            paused   = false;
-            tweening  = true;
-            cameraTarget = initPos.clone();
-            lookAtTarget = new THREE.Vector3(0, 0, 0);
+            zoomOut();
         }
     });
+
     // ─────────────────────────────────────────────────────────────────────
 
     function resizeRendererToDisplaySize(renderer) {
@@ -166,7 +179,6 @@ export function main(canvas) {
 
     function render() {
 
-        // Advance planet orbits (only when not paused)
         planets.forEach(p => {
             if (!paused) {
                 p.angle += p.speed * 0.008;
@@ -181,47 +193,30 @@ export function main(canvas) {
 
         sun.rotation.y += 0.003;
 
-
-
-
-
-        
-
-        // Update the camera target each frame while focused
-        // (so the camera tracks the planet even mid-tween if it still moves slightly)
         if (focusedPlanet) {
             const pPos = focusedPlanet.mesh.position;
-            // Position the camera slightly behind & above the planet relative to the origin
             const dir = pPos.clone().normalize();
             cameraTarget = pPos.clone().add(dir.multiplyScalar(focusedPlanet.radius + ZOOM_DIST));
             cameraTarget.y += focusedPlanet.radius * 0.8;
             lookAtTarget = pPos.clone();
         }
 
-        // Tween camera
         if (tweening && cameraTarget && lookAtTarget) {
             camera.position.lerp(cameraTarget, TWEEN_SPEED);
             currentLookAt.lerp(lookAtTarget, TWEEN_SPEED);
             camera.lookAt(currentLookAt);
 
-            // Stop tweening once close enough
             if (camera.position.distanceTo(cameraTarget) < 0.05) {
                 tweening = false;
 
-
-
-
-                
-                // POP UP HERE
-
-
-
-
-
-                
+                if (focusedPlanet && !popupFired) {
+                    popupFired = true;
+                    if (typeof onPlanetFocus === 'function') {
+                        onPlanetFocus();
+                    }
+                }
             }
         } else if (!paused) {
-            // Normal parallax behaviour
             currentOffset.x += (targetOffset.x - currentOffset.x) * 0.13;
             currentOffset.y += (targetOffset.y - currentOffset.y) * 0.13;
 
@@ -234,11 +229,6 @@ export function main(canvas) {
             camera.lookAt(currentLookAt);
         }
 
-
-
-
-
-        
         if (resizeRendererToDisplaySize(renderer)) {
             camera.aspect = canvas.clientWidth / canvas.clientHeight;
             camera.updateProjectionMatrix();
@@ -249,4 +239,6 @@ export function main(canvas) {
     }
 
     requestAnimationFrame(render);
+
+    return { zoomOut };
 }

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 "./js/main.js";
+// import { main } from "./solarsystem.js";
 import { useMouseMoving } from "../../hooks/useMouseMoving.js";
 export default function Home() {
     const lvlNum = 4;

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

@@ -0,0 +1,88 @@
+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 focus = {
+        raycaster:    new THREE.Raycaster(),
+        pointer:      new THREE.Vector2(),
+        paused:       false,
+        focusedPlanet: null,
+        cameraTarget:  null,
+        lookAtTarget:  null,
+        tweening:      false,
+        popupFired: false,
+    };
+
+    canvas.addEventListener('click', e => {
+        const rect = canvas.getBoundingClientRect();
+        focus.pointer.x =  ((e.clientX - rect.left) / rect.width)  * 2 - 1;
+        focus.pointer.y = -((e.clientY - rect.top)  / rect.height) * 2 + 1;
+        focus.raycaster.setFromCamera(focus.pointer, camera);
+
+        const meshes = planets.map(p => p.mesh);
+        const hits   = focus.raycaster.intersectObjects(meshes);
+
+        if (hits.length > 0) {
+            focus.focusedPlanet = planets.find(p => p.mesh === hits[0].object);
+            focus.paused   = true;
+            focus.tweening  = true;
+            focus.popupFired = false;
+        } 
+        else {
+            zoomOut();
+        }
+    });
+
+    function zoomOut() {
+        focus.focusedPlanet = null;
+        focus.paused        = false;
+        focus.tweening      = true;
+        focus.cameraTarget  = basePosition.clone();
+        focus.lookAtTarget  = new THREE.Vector3(0, 0, 0);
+    }
+
+    return { focus, zoomOut };
+    
+}
+
+
+