Cube Menu

by DH_UK

HTML

<script src="https://threejs.org/build/three.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js" >
</script>
<script src="js/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js" ></script>

CSS

body {
    margin: 0;
    height: 100vh;
}

canvas {
    display: block;
}

JavaScript

var scene = new THREE.Scene();
                  var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
                  camera.position.set(0, 0, 2);
                  var renderer = new THREE.WebGLRenderer({
                  antialias: true
                  });
                  renderer.setClearColor("#e5e5e5");
                  renderer.setSize(window.innerWidth, window.innerHeight);
                  document.body.appendChild(renderer.domElement);

                  var controls = new THREE.OrbitControls(camera, renderer.domElement);

                  //Automatically resize scene if window size changes
                  window.addEventListener('resize', () => {
                      renderer.setSize(window.innerWidth,window.innerHeight);
                      camera.aspect = window.innerWidth / window.innerHeight;
                      camera.updateProjectionMatrix();
                  })

                  var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1, 1, 1, 1), new THREE.MeshBasicMaterial({
                  vertexColors: THREE.VertexColors
                  }));
                  scene.add(box);

                  var wireBox = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1, 1, 1, 1), new THREE.MeshBasicMaterial({
                  color: "black",
                  wireframe: true
                  }));
                  box.add(wireBox);

                  var raycaster = new THREE.Raycaster();
                  var mouse = new THREE.Vector2();
                  var intersects = [];
                  var faceIdx1 = -1, faceIdx2 = -1;
                  var baseColor = new THREE.Color("white");
                  var selectionColor = new THREE.Color("red");

                  window.addEventListener("mousemove", function(event) {
                  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                  }, false);

 ...