JSFiddle - React, Tailwind, and code Playground

by atulmourya

HTML

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

CSS

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

JavaScript

var mesh, renderer, scene, camera, controls, uniform;

init();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(200, 200, 200);

    hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 4);
    hemisphereLight.name = "hemisphereLight";
    scene.add(hemisphereLight);

    controls = new THREE.OrbitControls(camera);
		THREE.DRACOLoader.setDecoderConfig({type: 'js'});
		var dracoLoader = new THREE.DRACOLoader();
    dracoLoader.load( 'https://customise.toyota.com.au/camry/3dassets/draco/kspEnv_Dome.drc', function ( geometry ) {
				geometry.computeVertexNormals();
				var material = new THREE.MeshStandardMaterial( { vertexColors: THREE.VertexColors } );
				var mesh = new THREE.Mesh( geometry, material );
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				scene.add( mesh );
				// Release decoder resources.
				THREE.DRACOLoader.releaseDecoderModule();
			} );

    animate();


}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);

}