JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

//three.js - Isometric Projection using an Orthographic Camera

var mesh, renderer, scene, camera, controls;

init();
render();

function init() {

	// info
	info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = 'three.js - Isometric Projection<br/>drag mouse to rotate camera';
	document.body.appendChild( info );

	// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

	// camera
	var aspect = window.innerWidth / window.innerHeight;
	var d = 20;
	camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );

	// /////////////////////////////////////////////////////////////////////////

	// method 1 - use lookAt
		//camera.position.set( 20, 20, 20 );
		//camera.lookAt( scene.position );

	// method 2 - set the x-component of rotation
		camera.position.set( 20, 20, 20 );
		camera.rotation.order = 'YXZ';
		camera.rotation.y = - Math.PI / 4;
		camera.rotation.x = Math.atan( - 1 / Math.sqrt( 2 ) );
    
    alert(camera.rotation.x+" "+camera.rotation.y+" "+camera.rotation.z);

	// /////////////////////////////////////////////////////////////////////////

	// controls
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.addEventListener( 'change', render );
	controls.noZoom = true;
	controls.noPan = true;
    controls.autoRotate = true;
	controls.minPolarAngle = controls.maxPolarAngle = 1;
	//controls.zoomSpeed = 0.1;
    
    console.debug(controls);

	// ambient
	scene.add( new THREE.AmbientLight( 0x444444 ) );

	// light
	var light = new THREE.PointLight( 0xffffff, 0.8...