JSFiddle - React, Tailwind, and code Playground

by Atrahasis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script>
    /**
 * @author qiao / https://github.com/qiao
 * @author mrdoob / http://mrdoob.com
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangley
 * @author erich666 / http://erichaines.com
 */
/*global THREE, console */

// This set of controls performs orbiting, dollying (zooming), and panning. It maintains
// the "up" direction as +Y, unlike the TrackballControls. Touch on tablet and phones is
// supported.
//
//    Orbit - left mouse / touch: one finger move
//    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
//    Pan - right mouse, or arrow keys / touch: three finter swipe

THREE.OrbitControls = function ( object, domElement ) {

	this.object = object;
	this.domElement = ( domElement !== undefined ) ? domElement : document;

	// API

	// Set to false to disable this control
	this.enabled = true;

	// "target" sets the location of focus, where the control orbits around
	// and where it pans with respect to.
	this.target = new THREE.Vector3();

	// center is old, deprecated; use "target" instead
	this.center = this.target;

	// This option actually enables dollying in and out; left as "zoom" for
	// backwards compatibility
	this.noZoom = false;
	this.zoomSpeed = 1.0;

	// Limits to how far you can dolly in and out ( PerspectiveCamera only )
	this.minDistance = 0;
	this.maxDistance = Infinity;

	// Limits to how far you can zoom in and out ( OrthographicCamera only )
	this.minZoom = 0;
	this.maxZoom = Infinity;

	// Set to true to disable this control
	this.noRotate = false;
	this.rotateSpeed = 1.0;

	// Set to true to disable this control
	this.noPan = false;
	this.keyPanSpeed = 7.0;	// pixels moved per arrow key push

	// Set to true to automatically rotate around the target
	this.autoRotate = false;
	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60

	// How far you can...

JavaScript

var width = innerWidth;
	var height = innerHeight;

	init();

	function init(){
	    var renderer = new THREE.WebGLRenderer({antialias: true});
	    renderer.setSize(width,height);

	    var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);

	    camera.position.x = 5;
	    camera.position.y = 2;
	    camera.position.z = 5.3;

	    var controls = new THREE.OrbitControls( camera );
	    controls.damping = 0.2;
	    controls.addEventListener( 'change', render );

	    document.body.appendChild(renderer.domElement);

	    var scene = new THREE.Scene();

	    function render(){renderer.render(scene,camera)}
	    
	    var car = new THREE.Object3D();
	    var body = new THREE.Object3D();
	    var wheels = new THREE.Object3D();
	    var ground = new THREE.Object3D();


	            var cube = new THREE.Mesh(new THREE.CubeGeometry(2,1,5),
	                                    new THREE.MeshLambertMaterial({color:0x856363}));


	            var cube1 = new THREE.Mesh(new THREE.CubeGeometry(1.8,1,3),
	                                    new THREE.MeshLambertMaterial({color:0x856363}));
	            cube1.position.y = 0.8;

	    body.add(cube);
	    body.add(cube1);
	    body.position.z = -1.5;


	    car.add(body);
	    car.add(wheels);

	    car.rotation.y = Math.PI/6;
	    car.position.y += 1;

	    car.position.x += 3;
	    car.position.z -= 3;


	            var wheel1 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
	                                    new THREE.MeshLambertMaterial({color:0x800000}));
	            var wheel2 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
	                                    new THREE.MeshLambertMaterial({color:0x800000}));
	            var wheel3 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
	                                    new THREE.MeshLambertMaterial({color:0x800000}));
	            var wheel4 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
	                 ...