JSFiddle - React, Tailwind, and code Playground

by Hesam Yavari

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(-5, 5, 5);
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 light = new THREE.DirectionalLight(0xffffff);
light.position.setScalar(10);
scene.add(light);

scene.add(new THREE.AmbientLight(0x404040));

var building = new THREE.Mesh(new THREE.BoxGeometry(5, 2, 3), new THREE.MeshLambertMaterial({
  color: "teal"
}));

building.geometry.verticesNeedUpdate = true;

scene.add(building);

var _window = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.25), new THREE.MeshLambertMaterial({
  color: "brown"
}));
_window.geometry.translate(0, 0, 0.125);
_window.position.set(3, 0, 1.5);
scene.add(_window);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects;
var normalMatrix = new THREE.Matrix3();
var worldNormal = new THREE.Vector3();
var lookAtVector = new THREE.Vector3();
var dragging = false;

window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

function onMouseDown(event){
	if (intersects.length > 0) {
  	controls.enableRotate = false;
    dragging = true;
  }
}

function onMouseUp (event){
  controls.enableRotate = true;
  dragging = false;
}

function onMouseMove(event) {
  mouse.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObjects([building]);
  
  if (intersects.length == 0 || !dragging) return;
  
  normalMatrix.getNormalMatrix(intersects[0].object.matrixWorld);
  worldNormal.copy(intersects[0].face.normal).applyMatrix3(normalMatrix).normalize();
 ...