JSFiddle - React, Tailwind, and code Playground

by GrassKnuckles

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

CSS

body {
  color: white;
  padding-top: 100px;
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

function init() {
        let scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        let camera = new THREE.PerspectiveCamera( 3, window.innerWidth/window.innerHeight, 10, 10000 );
        camera.position.x = 1000;
        camera.position.y = 0;
        camera.position.z = 0;


        light = new THREE.PointLight(0xc4c4c4,1.5);
        light.position.set(0,300,500);
        scene.add(light);
        light2 = new THREE.PointLight(0xc4c4c4,1.5);
        light2.position.set(500,100,0);
        scene.add(light2);
        light3 = new THREE.PointLight(0xc4c4c4,1.5);
        light3.position.set(0,100,-500);
        scene.add(light3);
        light4 = new THREE.PointLight(0xc4c4c4,1.5);
        light4.position.set(-500,300,500);
        scene.add(light4);

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

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', function() {renderer})
        controls.enableZoom = true
        controls.minPolarAngle = 1.1
        controls.maxPolarAngle = 1.9
        controls.update()

        //let texture = new THREE.TextureLoader().load( './model/awp/textures/dragon_lore.jpg' ); // load texture

        let loader = new THREE.GLTFLoader();
        loader.load('https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf ', function(gltf){

          let model = gltf.scene;

          /* model.traverse ( ( o ) => { // add texture
            if ( o.isMesh ) {
              o.material.map = texture
            }
          } ); */

          scene.add( model );
          animate();
        });

        let animate = function () {
          requestAnimationFrame( animate );
          controls.update();
          renderer.render( scene, camera );
        };

        animate();
}

init()