JSFiddle - React, Tailwind, and code Playground

by jmchen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>

CSS

body {
	overflow: hidden
}

JavaScript

var renderer, scene, camera;
var controls, cube;
var angle = 0;  // initialization IMPORTANT!

init();
animate();

function init () {
	
	renderer = new THREE.WebGLRenderer();
	document.body.appendChild (renderer.domElement);
	var width = window.innerWidth;
	var height = window.innerHeight;
	renderer.setSize (width, height);
	
	renderer.setClearColor (0x888888);
	
	scene = new THREE.Scene();
	var grid = new THREE.GridHelper(10,1, 0xaaaa00, 0x333333);
	scene.add (grid);
	var axes = new THREE.AxisHelper (5);
	scene.add (axes);
	
	camera = new THREE.PerspectiveCamera (35, width/height, 1, 100);
	camera.position.y = 16;
	camera.position.z = 40;
	camera.lookAt (new THREE.Vector3(0,0,0));
	
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	
	window.addEventListener('resize', onWindowResize, false);
	///////////////////////////////////////////////////////////////
	var cubeGeometry = new THREE.BoxGeometry (3,1,2);
	var cubeMaterial = new THREE.MeshNormalMaterial();
	cube = new THREE.Mesh (cubeGeometry, cubeMaterial);
	scene.add (cube);
		
}

function onWindowResize() {
  
	var width = window.innerWidth;
  var height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
	
}

function animate() {
	
	angle += 0.01;
	cube.position.set (8*Math.cos(angle), 0, 8*Math.sin(angle));
	controls.update();
	requestAnimationFrame(animate);
	render();
	
}

function render() {
	
	renderer.render(scene, camera);
	
}