diff --git a/data/script.js b/data/script.js index b90e88a..1da8fad 100644 --- a/data/script.js +++ b/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;