From 896f5f0d597be3a0c7b49cb6aef808852bc5f12c Mon Sep 17 00:00:00 2001 From: Russ <72242656+Russ741@users.noreply.github.com> Date: Wed, 27 Dec 2023 21:17:53 -0500 Subject: [PATCH] Initial HTML + JS. --- index.html | 23 +++++++++++++++++++++++ visualizer.js | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 index.html create mode 100644 visualizer.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..734f8d6 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + +This will eventually be a demonstration of a molecule visualizer.
+For now, enjoy the cube!

+ +
+ +
\ No newline at end of file diff --git a/visualizer.js b/visualizer.js new file mode 100644 index 0000000..e9646b4 --- /dev/null +++ b/visualizer.js @@ -0,0 +1,37 @@ +import * as THREE from 'three'; + +const scene = new THREE.Scene(); +const camera = new THREE.PerspectiveCamera(50, 1.0, 0.01, 15); +let container = null; + +const renderer = new THREE.WebGLRenderer({ + antialias: true +}); + +function animation(time) { + // Logic to handle the enclosing container being resized. + const width = container.offsetWidth, height = container.offsetHeight; + camera.aspect = width / height; + camera.updateProjectionMatrix(); + renderer.setSize(width, height); + + // Rotate the objects in the scene. + scene.rotation.x = Math.PI / 2; + scene.rotation.z = time / 3000; + + renderer.render(scene, camera); +} + +export function render(parent) { + container = parent; + camera.position.z = 3; + camera.position.y = 2; + camera.lookAt(0, 0, 0); + + const cube = new THREE.Mesh(new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshNormalMaterial()); + scene.add(cube); + + renderer.setAnimationLoop(animation); + + parent.appendChild(renderer.domElement); +} \ No newline at end of file