Initial HTML + JS.

index.html

@@ -0,0 +1,23 @@
+<!-- Boilerplate from https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene live example https://jsfiddle.net/0c1oqf38/ -->
+
+<script type="importmap">
+	{
+		"imports": {
+			"three": "https://unpkg.com/three/build/three.module.js",
+            "visualizer": "./visualizer.js"
+		}
+	}
+</script>
+
+<script type="module">
+    import { render } from 'visualizer';
+
+    render(document.getElementById("viz-holder"));
+</script>
+
+This will eventually be a demonstration of a molecule visualizer.<br />
+For now, enjoy the cube!<br /><br />
+
+<div id="viz-holder" style="height: 50%; width: 50%;">
+
+</div>

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);
+}