JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/ColladaLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/DDSLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="http://www.smartjava.org/tjscb/libs/dat.gui.min.j"></script>
<script src="http://www.smartjava.org/tjscb/libs/OrbitControls.js"></script>
<!DOCTYPE html>

	<body>
		<div id="scene3d"></div>
		<button onclick="zoomin()">Zoom In</button>
		<button onclick="zoomout()">Zoom Out</button>
		<button onclick="startRotate()">Start Rotate</button>
		<button onclick="stopRotate()">Stop Rotate</button>
		<button onclick="addCollada()">Add Collada</button>
		<button onclick="makeCenter()">Center</button>
		<button onclick="addObject()">Add Object</button>
	</body>

CSS

html {
    			
			}
			#scene3d{
				width: 600px;
				height: 600px;
				background: #4c4b4b;
			}

JavaScript

var scene3d = document.getElementById("scene3d");
			var scene,
			    camera,
			    renderer,
			    controls;

		    var CANVAS_WIDTH = 600;
			var CANVAS_HEIGHT = 600;
			var selectedObject;
			var offset = new THREE.Vector3();
    		var objects = [];
    		var plane;

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( 75, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
			var fov = camera.fov, zoom = 1.0, inc = 0.01;
			camera.position.set(0, 0, 150);
			// camera.position.z = 100;
			camera.lookAt( scene.position );

			renderer = new THREE.WebGLRenderer({
			  	alpha: true,
				antialias: true
			});
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );

			

			scene3d.appendChild( renderer.domElement );



			

			
			controls = new THREE.OrbitControls( camera, renderer.domElement );
			// controls = new THREE.TrackballControls( camera );
			// controls.rotateSpeed = 1.0;
			// controls.zoomSpeed = 3.2;
			// controls.panSpeed = 0.8;
			// controls.noZoom = false;
			// controls.noPan = false;
			// controls.staticMoving = true;
			// controls.dynamicDampingFactor = 0.8;
			controls.enablePan = false;


			var iphone_color  = '#FAFAFA',
			    ambientLight  = new THREE.AmbientLight( '#EEEEEE' ),
			    hemiLight     = new THREE.HemisphereLight( iphone_color, iphone_color, 0 ),
			    light         = new THREE.PointLight( iphone_color, 1, 100 );

			hemiLight.position.set( 0, 50, 0 );
			light.position.set( 0, 20, 10 );

			scene.add( ambientLight );
			scene.add( hemiLight );
			scene.add( light );


			var axisHelper = new THREE.AxisHelper( 1.25 );
			//scene.add( axisHelper );


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


	controls.addEventListener( 'change', renderPhone );


			function animationLoop() {
			  requestAnimationFrame(animationLoop);			  
			  controls.update();
			}

			animationLoop();


			window.addEventListener( 'resize', function () {
			...