🔮 Adds THREEjs MPU visualization

data/script.js

@@ -47,6 +47,65 @@ const init = () => {
 
     document.getElementById("stream").src = `//leika.local/stream`
 }
+
+function parentWidth(elem) {
+  return elem.parentElement.clientWidth;
+}
+
+function parentHeight(elem) {
+  return elem.parentElement.clientHeight;
+}
+
+function init3D(){
+  scene = new THREE.Scene();
+  //scene.background = new THREE.Color(0xffffff00);
+
+  camera = new THREE.PerspectiveCamera(75, parentWidth(document.getElementById("3Dcube")) / parentHeight(document.getElementById("3Dcube")), 0.1, 1000);
+
+  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setClearColor( 0x000000, 0 ); 
+  renderer.setSize(parentWidth(document.getElementById("3Dcube")), parentHeight(document.getElementById("3Dcube")));
+
+  document.getElementById('3Dcube').appendChild(renderer.domElement);
+
+  // Create a geometry
+  const geometry = new THREE.BoxGeometry(2, 1, 6);
+
+  // Materials of each face
+  var cubeMaterials = [
+    new THREE.MeshBasicMaterial({color:0x03045e}),
+    new THREE.MeshBasicMaterial({color:0x023e8a}),
+    new THREE.MeshBasicMaterial({color:0x0077b6}),
+    new THREE.MeshBasicMaterial({color:0x03045e}),
+    new THREE.MeshBasicMaterial({color:0x023e8a}),
+    new THREE.MeshBasicMaterial({color:0x0077b6}),
+  ];
+
+  const material = new THREE.MeshFaceMaterial(cubeMaterials);
+
+  cube = new THREE.Mesh(geometry, material);
+  scene.add(cube);
+  camera.position.z = 5;
+  renderer.render(scene, camera);
+}
+
+// Resize the 3D object when the browser window changes size
+function onWindowResize(){
+  camera.aspect = parentWidth(document.getElementById("3Dcube")) / parentHeight(document.getElementById("3Dcube"));
+  //camera.aspect = window.innerWidth /  window.innerHeight;
+  camera.updateProjectionMatrix();
+  //renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setSize(parentWidth(document.getElementById("3Dcube")), parentHeight(document.getElementById("3Dcube")));
+
+}
+
+window.addEventListener('resize', onWindowResize, false);
+
+// Create the 3D representation
+init3D();
+init();
+
+
 function humanFileSize(bytes, si=false, dp=1) {
     const thresh = si ? 1000 : 1024;