JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

HTML

<script src="https://threejs.org/build/three.js"></script>


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

	<script src="https://threejs.org/examples/js/WebGL.js"></script>
	<script src="https://threejs.org/examples/js/utils/SkeletonUtils.js"></script>

JavaScript

let container
let camera, scene, renderer;
let speed = 1
const staticObjects = [];
let cube
var prevTime = performance.now();

let AR = window.innerWidth/window.innerHeight;
let view = 10;

let direction = new THREE.Vector3( 0, -1, 0 );

init();


function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

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

// camera


camera = new THREE.OrthographicCamera( -view *AR, view *AR , view , -view,
  0.1, 1000 );
camera.position.set( -5 , 10 , 15 );
camera.lookAt( new THREE.Vector3( 0 , 0 , 0 ) );


clock = new THREE.Clock();

// lights

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.4 );
		hemiLight.position.set( 0, 100, 0 );
		scene.add( hemiLight );

		const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
		dirLight.position.set( - 700, 1000, - 750 );
		scene.add( dirLight );



var floor = new THREE.Mesh( new THREE.PlaneBufferGeometry( 40, 40 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ));
floor.rotation.x = -90 * Math.PI/180;
floor.matrixAutoUpdate  = false;
floor.updateMatrix();
scene.add( floor );
staticObjects.push( floor );
var grid = new THREE.GridHelper( 40 , 40 );
scene.add( grid );

cube = new THREE.Mesh(
  new THREE.BoxBufferGeometry( 1 , 1 , 1 ),
  new THREE.MeshLambertMaterial({ color: 0x3040f0 })
);
cube.position.y = 10
scene.add( cube );
cube.vertices = []  
   const position = cube.geometry.attributes.position;
   const vector = new THREE.Vector3();

   for ( let i = 0, l = position.count; i < l; i ++ ){

      vector.fromBufferAttribute( position, i );
      vector.applyMatrix4( cube.matrixWorld );
  
      cube.vertices.push(vector)
   }

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(...