Skip to content

Commit 5d12657

Browse files
rayishihararayishihara
committed
Add: level sync
2 parents 4ca31b8 + 17e7c9b commit 5d12657

7 files changed

Lines changed: 114 additions & 73 deletions

File tree

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ import styles from "./Home.module.css";
22
import { useState, useEffect, useRef } from "react";
33
import LevelComponent from "../../components/LevelComponent";
44
import { main } from "./js/main.js";
5-
// import { main } from "./solarsystem.js";
65
import { useMouseMoving } from "../../hooks/useMouseMoving.js";
6+
77
export default function Home() {
8-
const lvlNum = 4;
98
const canvasRef = useRef<HTMLCanvasElement | null>(null);
109
const zoomOutRef = useRef<(() => void) | null>(null);
11-
10+
const getLevelRef = useRef<(() => number) | null>(null);
1211
const [isVisible, setIsVisible] = useState(false);
1312
const [mountKey, setMountKey] = useState(0);
1413
const isMouseMoving = useMouseMoving(2500);
@@ -26,8 +25,9 @@ export default function Home() {
2625

2726
useEffect(() => {
2827
if (!canvasRef.current) return;
29-
const { zoomOut } = main(canvasRef.current, handleOpen);
28+
const { zoomOut, getLevel } = main(canvasRef.current, handleOpen);
3029
zoomOutRef.current = zoomOut;
30+
getLevelRef.current = getLevel;
3131
}, []);
3232

3333
return (
@@ -47,10 +47,9 @@ export default function Home() {
4747

4848
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-50">
4949
<LevelComponent
50-
// key={mountKey}
51-
selectedLevel={1}
52-
onClose={() => handleClose()}
53-
50+
key={mountKey}
51+
onClose={() => handleClose()}
52+
lvl={getLevelRef.current ? getLevelRef.current() : 0}
5453
/>
5554
</div>
5655

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as THREE from "three";
1+
timport * as THREE from "three";
22

33
const ZOOM_DIST = 5; // how close the camera gets (in planet radii + offset)
44
const TWEEN_SPEED = 0.07; // lerp factor for camera movement
@@ -61,6 +61,8 @@ export function main(canvas, onPlanetFocus) {
6161
];
6262

6363
const planets = planetData.flatMap(d => {
64+
65+
6466
const pts = [];
6567
for (let i = 0; i <= 128; i++) {
6668
const a = (i / 128) * Math.PI * 2;
@@ -106,6 +108,10 @@ export function main(canvas, onPlanetFocus) {
106108
scene.add(new THREE.Points(starGeo, starMat));
107109
}
108110

111+
112+
113+
114+
109115
// Mouse parallax
110116
let targetOffset = { x: 0, y: 0 };
111117
let currentOffset = { x: 0, y: 0 };

‎src/pages/home/Home.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ import styles from "./Home.module.css";
22
import { useState, useEffect, useRef } from "react";
33
import LevelComponent from "../../components/LevelComponent";
44
import { main } from "./js/main.js";
5-
// import { main } from "./solarsystem.js";
65
import { useMouseMoving } from "../../hooks/useMouseMoving.js";
6+
77
export default function Home() {
8-
const lvlNum = 4;
98
const canvasRef = useRef<HTMLCanvasElement | null>(null);
109
const zoomOutRef = useRef<(() => void) | null>(null);
11-
10+
const getLevelRef = useRef<(() => number) | null>(null);
1211
const [isVisible, setIsVisible] = useState(false);
1312
const [mountKey, setMountKey] = useState(0);
1413
const isMouseMoving = useMouseMoving(2500);
@@ -26,8 +25,9 @@ export default function Home() {
2625

2726
useEffect(() => {
2827
if (!canvasRef.current) return;
29-
const { zoomOut } = main(canvasRef.current, handleOpen);
28+
const { zoomOut, getLevel } = main(canvasRef.current, handleOpen);
3029
zoomOutRef.current = zoomOut;
30+
getLevelRef.current = getLevel;
3131
}, []);
3232

3333
return (
@@ -47,10 +47,9 @@ export default function Home() {
4747

4848
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-50">
4949
<LevelComponent
50-
// key={mountKey}
51-
selectedLevel={1}
52-
onClose={() => handleClose()}
53-
50+
key={mountKey}
51+
onClose={() => handleClose()}
52+
lvl={getLevelRef.current ? getLevelRef.current() : 0}
5453
/>
5554
</div>
5655

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export function main( canvas, onPlanetFocus ) {
2323
const currentLookAt = new THREE.Vector3(0, 0, 0);
2424
const origin = new THREE.Vector3(0, 0, 0);
2525

26+
function getLevel() {
27+
if (!focus.focusedPlanet) return 0;
28+
return focus.focusedPlanet.level;
29+
}
2630

2731
// --- Render loop ---
2832

@@ -37,7 +41,7 @@ export function main( canvas, onPlanetFocus ) {
3741
renderer.render(scene, camera);
3842
requestAnimationFrame(render);
3943

40-
44+
4145

4246
// --- Done! (the rest is defining these functions) ---
4347

@@ -85,14 +89,14 @@ export function main( canvas, onPlanetFocus ) {
8589
function updateFocusTarget() {
8690

8791
if (!focus.focusedPlanet) return;
88-
92+
8993
const planetPosition = focus.focusedPlanet.mesh.position;
9094
const planetDirection = planetPosition.clone().normalize();
9195

9296
focus.cameraTarget = planetPosition.clone().add(planetDirection.multiplyScalar(focus.focusedPlanet.radius + ZOOM_DIST));
9397
focus.cameraTarget.y += focus.focusedPlanet.radius * 0.8;
9498
focus.lookAtTarget = planetPosition.clone();
95-
99+
96100
}
97101

98102
function updateCameraTween () {
@@ -156,6 +160,6 @@ export function main( canvas, onPlanetFocus ) {
156160

157161
}
158162

159-
return { zoomOut };
163+
return { zoomOut, getLevel };
160164

161165
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as THREE from "three";
2+
3+
export function createRenderer( canvas ) {
4+
5+
const renderer = new THREE.WebGLRenderer({
6+
antialias: true,
7+
canvas
8+
});
9+
renderer.setPixelRatio(window.devicePixelRatio);
10+
renderer.toneMapping = THREE.ACESFilmicToneMapping;
11+
renderer.toneMappingExposure = 2.0;
12+
13+
return renderer
14+
15+
}

‎src/pages/home/js/main.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export function main( canvas, onPlanetFocus ) {
2323
const currentLookAt = new THREE.Vector3(0, 0, 0);
2424
const origin = new THREE.Vector3(0, 0, 0);
2525

26+
function getLevel() {
27+
if (!focus.focusedPlanet) return 0;
28+
return focus.focusedPlanet.level;
29+
}
2630

2731
// --- Render loop ---
2832

@@ -37,7 +41,7 @@ export function main( canvas, onPlanetFocus ) {
3741
renderer.render(scene, camera);
3842
requestAnimationFrame(render);
3943

40-
44+
4145

4246
// --- Done! (the rest is defining these functions) ---
4347

@@ -85,14 +89,14 @@ export function main( canvas, onPlanetFocus ) {
8589
function updateFocusTarget() {
8690

8791
if (!focus.focusedPlanet) return;
88-
92+
8993
const planetPosition = focus.focusedPlanet.mesh.position;
9094
const planetDirection = planetPosition.clone().normalize();
9195

9296
focus.cameraTarget = planetPosition.clone().add(planetDirection.multiplyScalar(focus.focusedPlanet.radius + ZOOM_DIST));
9397
focus.cameraTarget.y += focus.focusedPlanet.radius * 0.8;
9498
focus.lookAtTarget = planetPosition.clone();
95-
99+
96100
}
97101

98102
function updateCameraTween () {
@@ -156,6 +160,6 @@ export function main( canvas, onPlanetFocus ) {
156160

157161
}
158162

159-
return { zoomOut };
163+
return { zoomOut, getLevel };
160164

161165
}

0 commit comments

Comments
 (0)