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