JSFiddle - React, Tailwind, and code Playground

by gigablox

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<div id="content">
  <div id="box"></div>
</div>

CSS

html,body{
  height:100%;
  width:100%;
  padding:0px;
  margin:0px;
  overflow:hidden;
}
#content{
  width:100%;
  height:100%;
  position:relative;
}
#box{
  position:absolute;
  background:orange;
  height:100px;
  width:100px;
  bottom:20px;
  right:20px;
}

JavaScript

function Terrain(){
  this.container = document.getElementById('content');
  this.camera;
  this.scene; 
  this.renderer;
  this.light;
  this.timeout;
	this.previousUnprojection = new THREE.Vector3(-1,-1,-1);
  this.init();
}

Terrain.prototype.computeZ = function(meshHandle, cameraHandle, faceHeight, targetHeight){
  	
    var face = meshHandle.geometry.vertices[2]
    var vFOV = cameraHandle.fov * Math.PI / 180;  
    var vHeightPartial = 2 * Math.tan( vFOV / 2 );
    var p1 = faceHeight * window.innerHeight;
    var p2 = face.z * vHeightPartial;
    var p3 = targetHeight * vHeightPartial;
    var p4 = targetHeight * p2;
    var p5 = p1 + p4;
    var z = p5/p3;

    //unproject camera
    vector = this.getUnprojectedVector(cameraHandle);
    this.previousUnprojection = vector;
    this.previousCamera = cameraHandle.clone();
    var distanceZ = cameraHandle.position.z - vector.z ;
    var offsetX = -vector.x * (z-10) / distanceZ;
    var offsetY = vector.y * (z-10) / distanceZ;
    var cameraPosition = new THREE.Vector3(offsetX,offsetY,z);
    return cameraPosition;
  }
  
Terrain.prototype.getUnprojectedVector = function(cameraHandle){
  	var screenPositionX = 0;
    var screenPositionY = 0;
    var div = document.getElementById('box');
    var divDim = div.getBoundingClientRect();
    screenPositionX = (divDim.left + divDim.right) / 2;
    screenPositionY = (divDim.bottom + divDim.top) / 2;
    var vector = new THREE.Vector3((screenPositionX / window.innerWidth) * 2 -1, (screenPositionY / window.innerHeight) * 2 -1, 0.5);
    var v = vector.unproject(cameraHandle);
    return v;
  }
  
Terrain.prototype.init = function () {

	this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
	this.previousCamera = this.camera.clone();
  this.scene = new THREE.Scene();

	this.geometry = new THREE.BoxGeometry(20, 20, 20);
	this.material = new THREE.MeshPhongMaterial();
	this.mesh = new THREE.Mesh( this.geometry, this.material...