-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from Solvro/things-regarding-animation-start-an…
…d-stop Things regarding animation start and stop
- Loading branch information
Showing
9 changed files
with
450 additions
and
242 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import * as THREE from "three"; | ||
| import { createSecondaryScene } from "./SecondarySceneCreation"; | ||
|
|
||
| export const initializeCoordScene = (coordRefs) => { | ||
| const { | ||
| mountRef, | ||
| coordSceneRef, | ||
| coordCamRef, | ||
| coordRendererRef, | ||
| coordCubeRef, | ||
| mainCamera, | ||
| stopRenderRef, | ||
| } = coordRefs; | ||
| if (!mountRef.current) return; | ||
|
|
||
| cleanupCoordScene(coordRefs); | ||
|
|
||
| stopRenderRef.current = false; | ||
|
|
||
| const coordRenderer = new THREE.WebGLRenderer({ | ||
| antialias: true, | ||
| alpha: true, | ||
| }); | ||
|
|
||
| const { secondaryScene, secondaryCamera, coordCube } = createSecondaryScene(); | ||
| coordSceneRef.current = secondaryScene; | ||
| coordCamRef.current = secondaryCamera; | ||
| coordCubeRef.current = coordCube; | ||
| coordRendererRef.current = coordRenderer; | ||
|
|
||
| coordRendererRef.current.setSize( | ||
| mountRef.current.clientHeight, | ||
| mountRef.current.clientHeight | ||
| ); | ||
| coordRendererRef.current.setClearColor(0x191b20, 0.8); | ||
|
|
||
| // Attach secondary renderer to the main component | ||
| const secondaryCubeDiv = document.createElement("div"); | ||
| secondaryCubeDiv.style.position = "absolute"; | ||
| secondaryCubeDiv.style.top = "0px"; | ||
| secondaryCubeDiv.style.left = "0px"; | ||
| secondaryCubeDiv.style.pointerEvents = "none"; // ignore pointer events for this overlay | ||
| mountRef.current.appendChild(secondaryCubeDiv); | ||
| secondaryCubeDiv.appendChild(coordRendererRef.current.domElement); | ||
|
|
||
| coordRefs.secondaryCubeDiv = secondaryCubeDiv; | ||
|
|
||
| // coord-button functionality | ||
| let button = document.getElementById("coord-button"); | ||
|
|
||
| button.addEventListener("click", () => { | ||
| if (secondaryCubeDiv.style.display === "none") { | ||
| secondaryCubeDiv.style.display = "block"; | ||
| button.innerHTML = "Hide Coordinates"; | ||
| button.classList.remove("coord-button-closed"); | ||
| } else { | ||
| secondaryCubeDiv.style.display = "none"; | ||
| button.innerHTML = "Show Coordinates"; | ||
| button.className = "coord-button-closed"; | ||
| } | ||
| }); | ||
|
|
||
| const renderLoop = () => { | ||
| if (!stopRenderRef.current) { | ||
| const fixedDistance = 1.9; | ||
|
|
||
| const direction = new THREE.Vector3(); | ||
| direction | ||
| .subVectors(coordCamRef.current.position, coordCubeRef.current.position) | ||
| .normalize(); | ||
|
|
||
| const mainCameraDirection = new THREE.Vector3(); | ||
| mainCamera.current.getWorldDirection(mainCameraDirection); | ||
|
|
||
| const newPosition = new THREE.Vector3(); | ||
| newPosition | ||
| .copy(coordCubeRef.current.position) | ||
| .add(mainCameraDirection.multiplyScalar(-fixedDistance)); | ||
| coordCamRef.current.position.copy(newPosition); | ||
| coordCamRef.current.lookAt(coordCubeRef.current.position); | ||
|
|
||
| coordRendererRef.current.render( | ||
| coordSceneRef.current, | ||
| coordCamRef.current | ||
| ); | ||
|
|
||
| requestAnimationFrame(renderLoop); | ||
| } | ||
| }; | ||
|
|
||
| renderLoop(); | ||
|
|
||
| const handleResize = () => { | ||
| if (!mountRef.current) return; | ||
| coordCamRef.current.aspect = | ||
| mountRef.current.clientHeight / mountRef.current.clientHeight; | ||
| coordCamRef.current.updateProjectionMatrix(); | ||
| coordRendererRef.current.setSize( | ||
| mountRef.current.clientHeight, | ||
| mountRef.current.clientHeight | ||
| ); | ||
| }; | ||
|
|
||
| window.addEventListener("resize", handleResize); | ||
|
|
||
| // cleanup listener on unmount | ||
| return () => { | ||
| window.removeEventListener("resize", handleResize); | ||
| }; | ||
| }; | ||
|
|
||
| export const cleanupCoordScene = (coordRefs) => { | ||
| const { coordSceneRef, coordRendererRef, secondaryCubeDiv } = coordRefs; | ||
|
|
||
| if (coordRendererRef.current) { | ||
| if (secondaryCubeDiv && secondaryCubeDiv.parentNode) { | ||
| secondaryCubeDiv.parentNode.removeChild(secondaryCubeDiv); | ||
| } | ||
| coordRendererRef.current.dispose(); | ||
| } | ||
|
|
||
| if (coordSceneRef.current) { | ||
| coordSceneRef.current.traverse((object) => { | ||
| if (object.geometry) object.geometry.dispose(); | ||
| if (object.material) { | ||
| if (Array.isArray(object.material)) { | ||
| object.material.forEach((mat) => mat.dispose()); | ||
| } else { | ||
| object.material.dispose(); | ||
| } | ||
| } | ||
| }); | ||
| coordSceneRef.current.clear(); // explicitly remove objects | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import * as THREE from "three"; | ||
| export const createCubes = (numCubes) => { | ||
| const color1 = new THREE.Color(0xff0000); // Red | ||
| const color2 = new THREE.Color(0x00ff00); // Green | ||
| const color3 = new THREE.Color(0x0000ff); // Blue | ||
|
|
||
| const cubesInRow = numCubes; | ||
| const smallCubeSize = 0.01; | ||
| const cubes = []; | ||
|
|
||
| // calculate the total size of the grid | ||
| const gridSize = cubesInRow * 0.1; // 0.1 is the spacing between each cube | ||
| const gridOffset = gridSize / 2 - 0.1 / 2; // center offset | ||
|
|
||
| for (let x = 0; x < cubesInRow; x++) { | ||
| cubes[x] = []; | ||
|
|
||
| for (let y = 0; y < cubesInRow; y++) { | ||
| cubes[x][y] = []; | ||
|
|
||
| for (let z = 0; z < cubesInRow; z++) { | ||
| const geometry = new THREE.BoxGeometry( | ||
| smallCubeSize, | ||
| smallCubeSize, | ||
| smallCubeSize | ||
| ); | ||
|
|
||
| const normalizedX = x / (cubesInRow - 1); | ||
| const normalizedY = y / (cubesInRow - 1); | ||
| const normalizedZ = z / (cubesInRow - 1); | ||
|
|
||
| const averageRatio = (normalizedX + normalizedY + normalizedZ) / 3; | ||
|
|
||
| let color; | ||
| if (averageRatio < 0.5) { | ||
| const ratio = averageRatio * 2; // Scale to [0, 1] | ||
| color = color1.clone().lerp(color2, ratio); | ||
| } else { | ||
| const ratio = (averageRatio - 0.5) * 2; // Scale to [0, 1] | ||
| color = color2.clone().lerp(color3, ratio); | ||
| } | ||
|
|
||
| const material = new THREE.MeshPhongMaterial({ | ||
| color: color, | ||
| emissive: color, | ||
| emissiveIntensity: 2, | ||
| }); | ||
|
|
||
| const mesh = new THREE.Mesh(geometry, material); | ||
|
|
||
| // set the position with offset to ensure the grid is centered | ||
| mesh.position.set( | ||
| x * 0.1 - gridOffset, | ||
| y * 0.1 - gridOffset, | ||
| z * 0.1 - gridOffset | ||
| ); | ||
|
|
||
| cubes[x][y][z] = mesh; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return cubes; | ||
| }; |
Oops, something went wrong.