Sheldan/canvas
1
0
Fork 0
mirror of https://github.com/Sheldan/canvas.git synced 2026-08-30 10:49:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding more moons and updating position to today

Browse Source 
adding controls for pause/reset/reset camera
adding help for controls
adding client to download from JPL horizon
This commit is contained in:
Sheldan
2024-03-17 23:51:43 +01:00
parent e34d86a2fa
commit e13d2a4712
4 changed files with 1405 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.html
View File

@@ -11,12 +11,30 @@
.container {
height: 100%;
}
.timeContainer {
position: absolute;
color: yellow;
top: 50px
}
.help {
position: absolute;
color: yellow;
top: 65px
}
</style>
</head>
<body>
<script type="module" src="js/main.js"></script>
<div class="container" id="container">
<div class="timeContainer">
Current time
<span id="currentTime"></span>
</div>
<span class="help">
R -> reset to 2024-03-17 <br>
F -> reset camera <br>
P -> toggle pause
</span>
</div>
</body>
</html>

100
src/js/main.js
View File

@@ -13,26 +13,30 @@ const config = {
gravitationalConstant: 6.67430e-11,
timeStep: 1 * 3600,
AU: 149_597_870_700,
lines: true
pause: false,
lines: true,
currentTime: 1710633600 // Sun Mar 17 2024 00:00:00 GMT+0000
}
const maxPoints = 100_000;
const scene = new THREE.Scene();
const container = document.getElementById( 'container' );
const currentTimeSpan = document.getElementById( 'currentTime' );
const renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);
const stats = new Stats();
container.appendChild( stats.dom );
const camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, config.AU / 25, 150 * config.AU);
const camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 150 * config.AU);
const controls = new OrbitControls(camera, renderer.domElement);
const texts = [];
const lines = {}
let lines = {}
let axesHelper;
const spheres = createSpheres()
const spheres = createSpheres();
const initialSpheres = JSON.parse(JSON.stringify(spheres));
loader.load(
// resource URL
"https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", function(font) {
@@ -48,13 +52,61 @@ function animate() {
render();
}
function reset() {
config.currentTime = 1710633600;
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))
sphereConfig.x = oldSphere.x;
sphereConfig.y = oldSphere.y;
sphereConfig.z = oldSphere.z;
sphereConfig.vx = oldSphere.vx;
sphereConfig.vy = oldSphere.vy;
sphereConfig.vz = oldSphere.vz;
sphereConfig.group.position.x = sphereConfig.x;
sphereConfig.group.position.y = sphereConfig.y;
sphereConfig.group.position.z = sphereConfig.z;
const textMesh = sphereConfig.text;
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 = {}
})
}
function render() {
act()
renderer.render(scene, camera);
}
function formatDateTime(input) {
var epoch = new Date(0);
epoch.setSeconds(parseInt(input));
var date = epoch.toISOString();
date = date.replace('T', ' ');
return date.split('.')[0].split(' ')[0];
}
function act() {
axesHelper.position.copy(controls.target);
texts.forEach(text => {
text.lookAt(camera.position)
})
if(config.pause) {
return;
}
spheresAct(spheres.spheres, config.timeStep)
config.currentTime += config.timeStep;
currentTimeSpan.innerText = formatDateTime(config.currentTime)
if(config.lines) {
spheres.spheres.forEach(sphere => {
if(!(sphere.name in lines)) {
@@ -86,17 +138,21 @@ function act() {
sphere.group.position.y = sphere.y;
sphere.group.position.z = sphere.z;
})
texts.forEach(text => {
text.lookAt(camera.position)
})
axesHelper.position.copy(controls.target);
}
function getSphereColor(sphereConfig) {
return new THREE.Color(sphereConfig.color.r / 255, sphereConfig.color.g / 255, sphereConfig.color.b / 255);
}
function resetControls() {
const sun = spheres.sphereObj.sun;
camera.position.set(sun.x, sun.y, sun.z + config.AU)
camera.lookAt(sun.x, sun.y, sun.z)
controls.target.set(sun.x, sun.y, sun.z)
controls.update();
axesHelper.position.copy(controls.target);
}
function initScene(font) {
const geometry = new THREE.SphereGeometry(0.5, 24, 12);
let scale = config.AU / 10;
@@ -126,11 +182,13 @@ function initScene(font) {
}
const textMesh = new THREE.Mesh(label, material);
textMesh.scale.set( scale, scale, scale );
textMesh.position.x = textDistance * objectRadius * (Math.random() * textDistance - textDistance);
textMesh.position.y = textDistance * objectRadius * (Math.random() * textDistance - textDistance);
textMesh.position.x = textDistance * objectRadius * (Math.random() * textDistance - textDistance) + Math.random() * config.AU / 10;
textMesh.position.y = textDistance * objectRadius * (Math.random() * textDistance - textDistance) + Math.random() * config.AU / 10;
texts.push(textMesh)
group.add(textMesh);
sphereConfig.text = textMesh;
sphereConfig.group = group;
sphereConfig.sphereColor = sphereColor;
const labelLine = [];
labelLine.push(new THREE.Vector3(textMesh.position.x, textMesh.position.y, textMesh.position.z));
@@ -138,6 +196,7 @@ function initScene(font) {
const lineMaterial = new THREE.LineBasicMaterial({color: sphereColor});
const lineGeometry = new THREE.BufferGeometry().setFromPoints(labelLine);
const line = new THREE.Line( lineGeometry, lineMaterial);
sphereConfig.line = line;
group.add(line);
scene.add(group);
})
@@ -149,11 +208,22 @@ function initScene(font) {
light.position.set(sun.x, sun.y, sun.z);
scene.add(light);
scene.position.set(sun.x, sun.y, sun.z)
camera.position.set(sun.x, sun.y, sun.z + config.AU)
camera.lookAt(sun.x, sun.y, sun.z)
controls.update();
axesHelper = new THREE.AxesHelper(config.AU / 5);
axesHelper.position.copy(controls.target);
resetControls();
scene.add(axesHelper)
}
function keyPress(event) {
let keyCode = event.which;
if(keyCode === 82) {
reset()
} else if(keyCode === 70) {
resetControls()
} else if(keyCode === 80) {
config.pause = !config.pause;
}
}
document.addEventListener("keydown", keyPress, false);

1620
src/js/setup.js
View File

File diff suppressed because it is too large Load Diff