JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

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

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

var box = new THREE.Mesh(new THREE.BoxBufferGeometry(7, 7, 7), new THREE.MeshNormalMaterial());
scene.add(box);
box.userData.sides = {
	0: false,
  1: false,
  2: false,
  3: false,
  4: false,
  5: false
}

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];

renderer.domElement.addEventListener("click", (event)=>{
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(box);
  if (intersects.length > 0) {
  
  	let item = intersects[0];
  	let side = Math.floor(item.faceIndex / 2);
    if (item.object.userData.sides[side] != true){
    
    	addSquare(item.object, item.face.normal);
      item.object.userData.sides[side] = true;
      
    }
    else{
    
    	alert("Occupied!");
      
    }
    
  }
});

function addSquare(base, normal){
	var square = new THREE.Mesh(new THREE.PlaneBufferGeometry(5, 5), new THREE.MeshBasicMaterial({color: Math.random() * 0x888888 + 0x888888}));
  square.position.copy(normal).multiplyScalar(3.6);
  square.lookAt(normal.clone().multiplyScalar(3.7));
  base.add(square);
}

renderer.setAnimationLoop(()=>{renderer.render(scene, camera)});