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;
}
#content{
  width:100%;
  height:100%;
  position:relative;
}
#box{
  position:absolute;
  background:orange;
  height:100px;
  width:100px;
  bottom:100px;
  right:100px;
}

JavaScript

function Terrain(){

  this.container = document.getElementById('content');
  this.camera;
  this.scene; 
  this.renderer;
  this.light;

  this.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;
		return z;
	}
  
	this.computeX = function(meshHandle, cameraHandle, faceHeight, targetHeight){
  	var div = document.getElementById('box');
		var divDim = div.getBoundingClientRect();
		var y =  ((divDim.left + (targetWidth/2)) / window.innerHeight ) * 2 + 1;
		return y;
  }
  
  this.computeY = function(meshHandle, cameraHandle, faceHeight, targetHeight){
		var div = document.getElementById('box');
		var divDim = div.getBoundingClientRect();
		var y =  ((divDim.top + (targetHeight/2)) / window.innerHeight ) * 2 + 1;
		return y;
  }
  this.init();
}

Terrain.prototype.init = function () {

	this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
	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 );
	this.scene.add( this.mesh );
	
	var ambient = new THREE.AmbientLight( 0x00ff00, 0.5 );
	this.scene.add( ambient );

	this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
	this.renderer.setPixelRatio( window.devicePixelRatio );
	this.renderer.setSize( window.innerWidth, window.innerHeight );
	this.container.appendChild(this.renderer.domElement );
  
	window.animations['terrain'] = this.animate.bind(this);
	window.addEventListener( 'resize', this.onWindowResize.bind(this), false );
}

Terrain.prototype.onWindowResize =...