Folding [Vue, Three]

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://toekantickets.nl/js/physi.js"></script>
<div id="app">
</div>

https://toekantickets.nl/js/physijs_worker.js

CSS

body {
    background: #20262E;
    font-family: Helvetica;
    *,
    :before,
    :after {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
}

#app {
    background: #fff;
}

JavaScript

var scene, camera, renderer, controls;
var geometry, material, mesh;


const vue = new Vue({
   el: '#app',
   mounted: function(){

    init();
    animate();

    function init() {

        scene = new THREE.Scene();
		scene.background = new THREE.Color( 0x20262E );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xeeeeee, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize( window.innerWidth, window.innerHeight );

		controls = new THREE.OrbitControls(camera, renderer.domElement);
        $('#app').append( renderer.domElement );

    }

    function animate() {

        requestAnimationFrame( animate );

        //mesh.rotation.x += 0.01;
        //mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

      }
  }
  
})