Skip to content

Commit 09151e4

Browse files
rish906rish906
committed
Fix: focus error
1 parent d54edc9 commit 09151e4

7 files changed

Lines changed: 144 additions & 98 deletions

File tree

‎package-lock.json‎

Lines changed: 21 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 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

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,40 +41,46 @@ export function setupParallax( canvas ) {
4141

4242
export function setupFocus( canvas, camera, planets, basePosition ) {
4343

44-
const state = {
44+
const focus = {
4545
raycaster: new THREE.Raycaster(),
4646
pointer: new THREE.Vector2(),
4747
paused: false,
4848
focusedPlanet: null,
4949
cameraTarget: null,
5050
lookAtTarget: null,
5151
tweening: false,
52+
popupFired: false,
5253
};
5354

5455
canvas.addEventListener('click', e => {
5556
const rect = canvas.getBoundingClientRect();
56-
state.pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
57-
state.pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
58-
state.raycaster.setFromCamera(state.pointer, camera);
57+
focus.pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
58+
focus.pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
59+
focus.raycaster.setFromCamera(focus.pointer, camera);
5960

6061
const meshes = planets.map(p => p.mesh);
61-
const hits = state.raycaster.intersectObjects(meshes);
62+
const hits = focus.raycaster.intersectObjects(meshes);
6263

6364
if (hits.length > 0) {
64-
state.focusedPlanet = planets.find(p => p.mesh === hits[0].object);
65-
state.paused = true;
66-
state.tweening = true;
65+
focus.focusedPlanet = planets.find(p => p.mesh === hits[0].object);
66+
focus.paused = true;
67+
focus.tweening = true;
68+
focus.popupFired = false;
6769
}
6870
else {
69-
state.focusedPlanet = null;
70-
state.paused = false;
71-
state.tweening = true;
72-
state.cameraTarget = basePosition.clone();
73-
state.lookAtTarget = new THREE.Vector3(0, 0, 0);
71+
zoomOut();
7472
}
7573
});
7674

77-
return state;
75+
function zoomOut() {
76+
focus.focusedPlanet = null;
77+
focus.paused = false;
78+
focus.tweening = true;
79+
focus.cameraTarget = basePosition.clone();
80+
focus.lookAtTarget = new THREE.Vector3(0, 0, 0);
81+
}
82+
83+
return { focus, zoomOut };
7884

7985
}
8086

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { createScene } from "./scene.js";
66
const ZOOM_DIST = 5;
77
const TWEEN_SPEED = 0.07;
88

9-
export function main( canvas ) {
9+
export function main( canvas, onPlanetFocus ) {
1010

1111
// --- Initialisation ---
1212

@@ -18,12 +18,11 @@ export function main( canvas ) {
1818

1919
const { targetOffset, currentOffset } = setupParallax( canvas );
2020

21-
const focus = setupFocus( canvas, camera, planets, basePosition );
21+
const { focus, zoomOut } = setupFocus( canvas, camera, planets, basePosition );
2222

2323
const currentLookAt = new THREE.Vector3(0, 0, 0);
2424
const origin = new THREE.Vector3(0, 0, 0);
2525

26-
2726

2827
// --- Render loop ---
2928

@@ -51,7 +50,9 @@ export function main( canvas ) {
5150
advancePlanetOrbits()
5251

5352
function rotateSun() {
54-
if (!focus.paused) sun.rotation.y += 0.003;
53+
if (!focus.paused) {
54+
sun.rotation.y += 0.003;
55+
}
5556
}
5657

5758
function advancePlanetOrbits() {
@@ -102,6 +103,12 @@ export function main( canvas ) {
102103

103104
if (camera.position.distanceTo(focus.cameraTarget) < 0.05) {
104105
focus.tweening = false;
106+
if (focus.focusedPlanet && !focus.popupFired) {
107+
focus.popupFired = true;
108+
if (typeof onPlanetFocus === 'function') {
109+
onPlanetFocus();
110+
}
111+
}
105112
};
106113

107114
}
@@ -148,5 +155,7 @@ export function main( canvas ) {
148155
}
149156

150157
}
158+
159+
return { zoomOut };
151160

152161
}

‎src/pages/home/js/camera.js‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,40 +41,46 @@ export function setupParallax( canvas ) {
4141

4242
export function setupFocus( canvas, camera, planets, basePosition ) {
4343

44-
const state = {
44+
const focus = {
4545
raycaster: new THREE.Raycaster(),
4646
pointer: new THREE.Vector2(),
4747
paused: false,
4848
focusedPlanet: null,
4949
cameraTarget: null,
5050
lookAtTarget: null,
5151
tweening: false,
52+
popupFired: false,
5253
};
5354

5455
canvas.addEventListener('click', e => {
5556
const rect = canvas.getBoundingClientRect();
56-
state.pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
57-
state.pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
58-
state.raycaster.setFromCamera(state.pointer, camera);
57+
focus.pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
58+
focus.pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
59+
focus.raycaster.setFromCamera(focus.pointer, camera);
5960

6061
const meshes = planets.map(p => p.mesh);
61-
const hits = state.raycaster.intersectObjects(meshes);
62+
const hits = focus.raycaster.intersectObjects(meshes);
6263

6364
if (hits.length > 0) {
64-
state.focusedPlanet = planets.find(p => p.mesh === hits[0].object);
65-
state.paused = true;
66-
state.tweening = true;
65+
focus.focusedPlanet = planets.find(p => p.mesh === hits[0].object);
66+
focus.paused = true;
67+
focus.tweening = true;
68+
focus.popupFired = false;
6769
}
6870
else {
69-
state.focusedPlanet = null;
70-
state.paused = false;
71-
state.tweening = true;
72-
state.cameraTarget = basePosition.clone();
73-
state.lookAtTarget = new THREE.Vector3(0, 0, 0);
71+
zoomOut();
7472
}
7573
});
7674

77-
return state;
75+
function zoomOut() {
76+
focus.focusedPlanet = null;
77+
focus.paused = false;
78+
focus.tweening = true;
79+
focus.cameraTarget = basePosition.clone();
80+
focus.lookAtTarget = new THREE.Vector3(0, 0, 0);
81+
}
82+
83+
return { focus, zoomOut };
7884

7985
}
8086

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { createScene } from "./scene.js";
66
const ZOOM_DIST = 5;
77
const TWEEN_SPEED = 0.07;
88

9-
export function main( canvas ) {
9+
export function main( canvas, onPlanetFocus ) {
1010

1111
// --- Initialisation ---
1212

@@ -18,12 +18,11 @@ export function main( canvas ) {
1818

1919
const { targetOffset, currentOffset } = setupParallax( canvas );
2020

21-
const focus = setupFocus( canvas, camera, planets, basePosition );
21+
const { focus, zoomOut } = setupFocus( canvas, camera, planets, basePosition );
2222

2323
const currentLookAt = new THREE.Vector3(0, 0, 0);
2424
const origin = new THREE.Vector3(0, 0, 0);
2525

26-
2726

2827
// --- Render loop ---
2928

@@ -51,7 +50,9 @@ export function main( canvas ) {
5150
advancePlanetOrbits()
5251

5352
function rotateSun() {
54-
if (!focus.paused) sun.rotation.y += 0.003;
53+
if (!focus.paused) {
54+
sun.rotation.y += 0.003;
55+
}
5556
}
5657

5758
function advancePlanetOrbits() {
@@ -102,6 +103,12 @@ export function main( canvas ) {
102103

103104
if (camera.position.distanceTo(focus.cameraTarget) < 0.05) {
104105
focus.tweening = false;
106+
if (focus.focusedPlanet && !focus.popupFired) {
107+
focus.popupFired = true;
108+
if (typeof onPlanetFocus === 'function') {
109+
onPlanetFocus();
110+
}
111+
}
105112
};
106113

107114
}
@@ -148,5 +155,7 @@ export function main( canvas ) {
148155
}
149156

150157
}
158+
159+
return { zoomOut };
151160

152161
}

0 commit comments

Comments
 (0)