JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera, scene, renderer, controls;
var geometry, material;
var cube, object;

init();
animate();

function init() {
    camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 1000);
	camera.position.set(200, 200, 200);
    controls = new THREE.OrbitControls(camera);

    scene = new THREE.Scene();

    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });
	object = new THREE.Object3D();
    cube = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20), material);
    cube.position.x = 300;
	
	object.add(cube);
	
	scene.add(object);
	
	//controls.target.copy(cube.position);
	controls.target = new THREE.Vector3(300, 0, 0);
	
	controls.autoRotate = true;
	
	controls.minPolarAngle = Math.PI / 3;
	controls.maxPolarAngle = Math.PI / 3;

    //The X axis is red. The Y axis is green. The Z axis is blue.
    var axesHelper = new THREE.AxesHelper( 1000 );
    scene.add( axesHelper );

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);
}

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

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
	
	object.rotation.y += 0.01;
	cube.rotation.y += 0.01;
	
	camera.lookAt(cube.position);
	camera.updateProjectionMatrix();
	controls.update();
}