Sheldan/canvas
1
0
Fork 0
mirror of https://github.com/Sheldan/canvas.git synced 2026-03-27 14:33:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding functionality to restart trails

Browse Source 
properly handling window size resize
This commit is contained in:
Sheldan
2024-03-21 00:58:26 +01:00
parent f8aed95945
commit 5bfff2b8a8
2 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
orbits/src/index.html
View File

@@ -33,7 +33,8 @@
<span class="help"> <span class="help">
R -> reset to 2024-03-17 <br> R -> reset to 2024-03-17 <br>
F -> reset camera <br> F -> reset camera <br>
P -> toggle pause P -> toggle pause <br>
T -> restart trail
</span> </span>
</div> </div>
</body> </body>

54
orbits/src/js/main.js
View File

@@ -52,13 +52,25 @@ function animate() {
render(); render();
} }
function resetTrail(sphereConfig) {
const textMesh = sphereConfig.text;
sphereConfig.line.material.dispose();
sphereConfig.line.geometry.dispose();
sphereConfig.group.remove(sphereConfig.line)
scene.remove(sphereConfig.line)
const labelLine = [];
labelLine.push(new THREE.Vector3(textMesh.position.x, textMesh.position.y, textMesh.position.z));
labelLine.push(new THREE.Vector3(0, 0, 0));
const lineMaterial = new THREE.LineBasicMaterial({color: sphereConfig.sphereColor});
const lineGeometry = new THREE.BufferGeometry().setFromPoints(labelLine);
sphereConfig.line = new THREE.Line(lineGeometry, lineMaterial);
;
sphereConfig.group.add(sphereConfig.line);
}
function reset() { function reset() {
config.currentTime = 1710633600; config.currentTime = 1710633600;
spheres.spheres.forEach(sphereConfig => { spheres.spheres.forEach(sphereConfig => {
sphereConfig.line.material.dispose();
sphereConfig.line.geometry.dispose();
sphereConfig.group.remove(sphereConfig.line)
scene.remove(sphereConfig.line)
const oldSphere = initialSpheres.spheres.find((sphere => sphere.name === sphereConfig.name)) const oldSphere = initialSpheres.spheres.find((sphere => sphere.name === sphereConfig.name))
sphereConfig.x = oldSphere.x; sphereConfig.x = oldSphere.x;
sphereConfig.y = oldSphere.y; sphereConfig.y = oldSphere.y;
@@ -69,16 +81,9 @@ function reset() {
sphereConfig.group.position.x = sphereConfig.x; sphereConfig.group.position.x = sphereConfig.x;
sphereConfig.group.position.y = sphereConfig.y; sphereConfig.group.position.y = sphereConfig.y;
sphereConfig.group.position.z = sphereConfig.z; sphereConfig.group.position.z = sphereConfig.z;
const textMesh = sphereConfig.text; resetTrail(sphereConfig);
const labelLine = [];
labelLine.push(new THREE.Vector3(textMesh.position.x, textMesh.position.y, textMesh.position.z));
labelLine.push(new THREE.Vector3(0, 0, 0 ));
const lineMaterial = new THREE.LineBasicMaterial({color: sphereConfig.sphereColor});
const lineGeometry = new THREE.BufferGeometry().setFromPoints(labelLine);
sphereConfig.line = new THREE.Line( lineGeometry, lineMaterial);;
sphereConfig.group.add(sphereConfig.line);
lines = {}
}) })
lines = {}
} }
@@ -213,17 +218,34 @@ function initScene(font) {
scene.add(axesHelper) scene.add(axesHelper)
} }
function setTrailToNow() {
spheres.spheres.forEach(sphereConfig => {
resetTrail(sphereConfig);
})
lines = {}
}
function keyPress(event) { function keyPress(event) {
let keyCode = event.which; let keyCode = event.which;
if(keyCode === 82) { if(keyCode === 82) { // R
reset() reset()
} else if(keyCode === 70) { } else if(keyCode === 70) { // F
resetControls() resetControls()
} else if(keyCode === 80) { } else if(keyCode === 80) { // P
config.pause = !config.pause; config.pause = !config.pause;
} else if(keyCode === 84) { // T
setTrailToNow()
} }
} }
document.addEventListener("keydown", keyPress, false); document.addEventListener("keydown", keyPress, false);
window.addEventListener("resize", onWindowResize, false);
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}