JSFiddle - React, Tailwind, and code Playground

by Dino Solazzo

HTML

<div id="room"></div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/FirstPersonControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script>
  var room = document.getElementById('room');

  var camera, scene, renderer;

  var controls, clock = new THREE.Clock();
  var intersects;

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  const targets = [];
  const raycaster = new THREE.Raycaster();
  const raycasterHover = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  const target = new THREE.Vector2();

  function init() {

    camera = new THREE.PerspectiveCamera( 45, windowWidth / windowHeight, 1, 10000 );
    camera.position.z = 2000;

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

    var geometry = new THREE.PlaneBufferGeometry( (windowWidth / 3), (windowHeight / 3) );
    var material = new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe: false } );

  for (let i = 0; i < 5; i++) {

    const panel = new THREE.Mesh( geometry, material );

    panel.position.x = windowHeight * ( i - Math.random() );
    panel.position.y = windowWidth * ( i - Math.random() );
    panel.position.z = 0;

    scene.add( panel );
    targets.push( panel );

  }

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( windowWidth, windowHeight );
    room.appendChild( renderer.domElement );

    controls = new THREE.FirstPersonControls( camera, renderer.domElement );
    controls.movementSpeed = 1000;
    controls.rollSpeed = Math.PI / 10 ;

    renderer.domElement.addEventListener( 'mousedown', mousedown, false );

  }

  function animate() {
    requestAnimationFrame( animate );
    render();
  }

  function render() {

    controls.update( clock.getDelta() );
    for ( var i = 1, l =...

CSS

* {
	  margin: 0;
}
#room {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

JavaScript

function mousedown( event ) {
	
  mouse.x = ( event.clientX / windowWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / windowHeight ) * 2 + 1;
  raycaster.setFromCamera( mouse, camera );
  intersects = raycaster.intersectObjects( targets );

  if ( intersects.length > 0 ) {

    // stop controls
    controls.enabled = false;

    var targetOrientation = intersects[0].object.quaternion.normalize();
    gsap.to({}, 1, { 
      onUpdate: function() {
      	controls.update();
        //camera.lookAt( intersects[0].object.position );
        camera.quaternion.slerp( targetOrientation , this.progress() );
      },
      onComplete: function() {
        controls.update();
        //camera.lookAt(new THREE.Vector3( 0, 0, 0 ) );

        // restart controls
        controls.enabled = true;
      }
    });
	}
}

init();
animate();