Implement basic 3d rendering.

src/index.js

@@ -1,9 +1,9 @@
 import {startClosedAnimation} from "./closed";
-import "./open"
+import {startOpenAnimation} from "./open";
 
 window.addEventListener('load', function () {
     if (document.body.classList.contains('open')) {
-        // TODO: leave it in HTML/CSS for now.
+        startOpenAnimation();
     } else {
         startClosedAnimation();
     }

src/open.js

@@ -1 +1,38 @@
+import * as THREE from "three";
+
 import './open.scss';
+
+let scene, camera, renderer;
+let cube;
+
+function startOpenAnimation() {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.z = 5;
+
+    renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+
+    // Initialize sample cube.
+    let geometry = new THREE.BoxGeometry(1, 1, 1);
+    console.log(geometry);
+    let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
+    cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    requestAnimationFrame(animate)
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+
+    renderer.render(scene, camera);
+}
+
+
+export {startOpenAnimation};

src/open.scss

@@ -13,20 +13,12 @@
 }
 
 body.open {
-  height: 100%;
   background-color: #a3d165;
-  text-align: center;
+  margin: 0;
+  overflow: hidden;
 }
 
-#wrapper {
-  margin: auto;
-  width: 999px;
-  height: 999px;
-  padding-top: 400px;
-  margin-top: -200px;
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  animation: starrotation 10s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+canvas {
+  width: 100%;
+  height: 100%;
 }