Cube Menu

HTML

<script src="https://threejs.org/build/three.js" ></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js" ></script>
<script src="js/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);

window.addEventListener("mousedown", function(event) {
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(box);
  if (intersects.length === 0) return;

  // set previously selected faces to white
  setFaceColor(faceIdx1, baseColor);
  setFaceColor(faceIdx2, baseColor);

  // find the new indices of faces
  faceIdx1 = intersects[0].faceIndex;
  faceIdx2 = faceIdx1 % 2 === 0 ? faceIdx1 + 1 : faceIdx1 - 1;

  // set newly selected faces to red
  setFaceColor(faceIdx1, selectionColor);
  setFaceColor(faceIdx2, selectionColor);
}, false)

function setFaceColor(idx,...