Init

frontend/src/example.js

@@ -0,0 +1,83 @@
+'use strict';
+
+/* global THREE */
+
+function main() {
+    const canvas = document.querySelector('#c');
+    const renderer = new THREE.WebGLRenderer({ canvas });
+
+    const fov = 75;
+    const aspect = 2; // the canvas default
+    const near = 0.1;
+    const far = 5;
+    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+    camera.position.z = 2;
+
+    const scene = new THREE.Scene();
+
+    {
+        const color = 0xFFFFFF;
+        const intensity = 1;
+        const light = new THREE.DirectionalLight(color, intensity);
+        light.position.set(-1, 2, 4);
+        scene.add(light);
+    }
+
+    const boxWidth = 1;
+    const boxHeight = 1;
+    const boxDepth = 1;
+    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
+
+    function makeInstance(geometry, color, x) {
+        const material = new THREE.MeshPhongMaterial({ color });
+
+        const cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+
+        cube.position.x = x;
+
+        return cube;
+    }
+
+    const cubes = [
+        makeInstance(geometry, 0x44aa88, 0),
+        makeInstance(geometry, 0x8844aa, -2),
+        makeInstance(geometry, 0xaa8844, 2),
+    ];
+
+    function resizeRendererToDisplaySize(renderer) {
+        const canvas = renderer.domElement;
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        const needResize = canvas.width !== width || canvas.height !== height;
+        if (needResize) {
+            renderer.setSize(width, height, false);
+        }
+        return needResize;
+    }
+
+    function render(time) {
+        time *= 0.001;
+
+        if (resizeRendererToDisplaySize(renderer)) {
+            const canvas = renderer.domElement;
+            camera.aspect = canvas.clientWidth / canvas.clientHeight;
+            camera.updateProjectionMatrix();
+        }
+
+        cubes.forEach((cube, ndx) => {
+            const speed = 1 + ndx * .1;
+            const rot = time * speed;
+            cube.rotation.x = rot;
+            cube.rotation.y = rot;
+        });
+
+        renderer.render(scene, camera);
+
+        requestAnimationFrame(render);
+    }
+
+    requestAnimationFrame(render);
+}
+
+main();

frontend/src/index.css

@@ -0,0 +1,39 @@
+@import 'normalize.css';
+@import 'sakura-hacked.css';
+
+body {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.preview, .timeline {
+    width: 50vw;
+    height: 100vh;
+}
+
+.preview {
+    /*
+      creates a new containing block
+      such that the position:fixed fps stats
+      will be positioned relative to this
+    */
+    transform: rotate(0deg);
+    
+    /* dunno */
+    overflow-y: hidden;
+}
+
+.timeline {
+    overflow-y: scroll;
+}
+
+@media (max-aspect-ratio: 1/1) {
+    body {
+        flex-direction: column;
+    }
+    
+    .preview, .timeline {
+        width: 100vw;
+        height: 50vh;
+    }
+}

frontend/src/index.ts

@@ -0,0 +1,74 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+
+import * as Stats from 'stats.js';
+
+const canvas = document.getElementById('threejs-preview')! as HTMLCanvasElement;
+
+const renderer = new THREE.WebGLRenderer({ canvas });
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x161618);
+scene.fog = new THREE.FogExp2(0x161618, 0.002);
+
+const camera = new THREE.PerspectiveCamera(75);
+camera.position.set(400, 200, 0);
+
+// controls
+
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.05;
+controls.screenSpacePanning = false;
+// controls.maxPolarAngle = Math.PI / 2;
+
+// dbg
+const cylinder = new THREE.CylinderGeometry(0, 10, 30, 4, 1);
+const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true });
+
+const mesh = new THREE.Mesh(cylinder, material);
+mesh.position.x = 0;
+mesh.position.y = 0;
+mesh.position.z = 0;
+mesh.updateMatrix();
+mesh.matrixAutoUpdate = false;
+scene.add(mesh);
+
+const ambientLight = new THREE.AmbientLight(0x222222);
+scene.add(ambientLight);
+
+const directionalLight = new THREE.DirectionalLight(0xffffff);
+directionalLight.position.set(1, 1, 1);
+scene.add(directionalLight);
+
+// stats
+
+const stats = new Stats();
+canvas.parentElement!.appendChild(stats.dom);
+
+const animate = (/* time: number */) => {
+    requestAnimationFrame(animate);
+
+    stats.begin();
+
+    controls.update();
+
+    // STRESS
+    // resize canvas
+    const parent = canvas.parentElement!;
+
+    const width = parent.clientWidth;
+    const height = parent.clientHeight;
+
+    if (canvas.width !== width || canvas.height !== height) {
+        renderer.setSize(width, height);
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+    }
+
+    renderer.render(scene, camera);
+
+    stats.end();
+};
+
+requestAnimationFrame(animate);

frontend/src/sakura-hacked.css

@@ -0,0 +1,189 @@
+/* $color-text: #dedce5; */
+/* Sakura.css v1.3.1
+ * ================
+ * Minimal css theme.
+ * Project: https://github.com/oxalorg/sakura/
+ */
+/* Body */
+html {
+    font-size: 62.5%;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
+  
+  body {
+    color: #c9c9c9;
+    background-color: #222222;
+  }
+
+  main {
+    font-size: 1.8rem;
+    line-height: 1.618;
+    max-width: 38em;
+    margin: auto;
+    padding: 13px; }
+  
+  @media (max-width: 684px) {
+    body {
+      font-size: 1.53rem; } }
+  
+  @media (max-width: 382px) {
+    body {
+      font-size: 1.35rem; } }
+  
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1.1;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    font-weight: 700;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word; }
+  
+  h1 {
+    font-size: 2.35em; }
+  
+  h2 {
+    font-size: 2.00em; }
+  
+  h3 {
+    font-size: 1.75em; }
+  
+  h4 {
+    font-size: 1.5em; }
+  
+  h5 {
+    font-size: 1.25em; }
+  
+  h6 {
+    font-size: 1em; }
+  
+  p {
+    margin-top: 0px;
+    margin-bottom: 2.5rem; }
+  
+  small, sub, sup {
+    font-size: 75%; }
+  
+  hr {
+    border-color: #ffffff; }
+  
+  a {
+    text-decoration: none;
+    color: #ffffff; }
+    a:hover {
+      color: #c9c9c9;
+      border-bottom: 2px solid #c9c9c9; }
+    a:visited {
+      color: #e6e6e6; }
+  
+  ul {
+    padding-left: 1.4em;
+    margin-top: 0px;
+    margin-bottom: 2.5rem; }
+  
+  li {
+    margin-bottom: 0.4em; }
+  
+  blockquote {
+    margin-left: 0px;
+    margin-right: 0px;
+    padding-left: 1em;
+    padding-top: 0.8em;
+    padding-bottom: 0.8em;
+    padding-right: 0.8em;
+    border-left: 5px solid #ffffff;
+    margin-bottom: 2.5rem;
+    background-color: #4a4a4a; }
+  
+  blockquote p {
+    margin-bottom: 0; }
+  
+  img, video {
+    height: auto;
+    max-width: 100%;
+    margin-top: 0px;
+    margin-bottom: 2.5rem; }
+  
+  /* Pre and Code */
+  pre {
+    background-color: #4a4a4a;
+    display: block;
+    padding: 1em;
+    overflow-x: auto;
+    margin-top: 0px;
+    margin-bottom: 2.5rem; }
+  
+  code {
+    font-size: 0.9em;
+    padding: 0 0.5em;
+    background-color: #4a4a4a;
+    white-space: pre-wrap; }
+  
+  pre > code {
+    padding: 0;
+    background-color: transparent;
+    white-space: pre; }
+  
+  /* Tables */
+  table {
+    text-align: justify;
+    width: 100%;
+    border-collapse: collapse; }
+  
+  td, th {
+    padding: 0.5em;
+    border-bottom: 1px solid #4a4a4a; }
+  
+  /* Buttons, forms and input */
+  input, textarea {
+    border: 1px solid #c9c9c9; }
+    input:focus, textarea:focus {
+      border: 1px solid #ffffff; }
+  
+  textarea {
+    width: 100%; }
+  
+  .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+    display: inline-block;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: #ffffff;
+    color: #222222;
+    border-radius: 1px;
+    border: 1px solid #ffffff;
+    cursor: pointer;
+    box-sizing: border-box; }
+    .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
+      cursor: default;
+      opacity: .5; }
+    .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
+      background-color: #c9c9c9;
+      border-color: #c9c9c9;
+      color: #222222;
+      outline: 0; }
+  
+  textarea, select, input {
+    color: #c9c9c9;
+    padding: 6px 10px;
+    /* The 6px vertically centers text on FF, ignored by Webkit */
+    margin-bottom: 10px;
+    background-color: #4a4a4a;
+    border: 1px solid #4a4a4a;
+    border-radius: 4px;
+    box-shadow: none;
+    box-sizing: border-box; }
+    textarea:focus, select:focus, input:focus {
+      border: 1px solid #ffffff;
+      outline: 0; }
+  
+  input[type="checkbox"]:focus {
+    outline: 1px dotted #ffffff; }
+  
+  label, legend, fieldset {
+    display: block;
+    margin-bottom: .5rem;
+    font-weight: 600; }
+