JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r137/examples/js/loaders/GLTFLoader.js"></script>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;
let mixer = null;
let clock = new THREE.Clock();

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false,
        alpha: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor( 0x000000, 0 );
    
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);

    // (camera) controls
    // mouse controls: left button to rotate, 
    //    mouse wheel to zoom, right button to pan
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);

    // mesh
  	var loader = new THREE.GLTFLoader()
   var url = "https://cdn.glitch.com/68b56b18-ecd5-43f1-aad6-453eac070643%2FRobotExpressive.glb?v=1596736813681"
   //"https://cdn.glitch.me/b6638abd-afc2-4530-bc1b-8edf2eccdaad%2Fjeep2.glb?v=1635915893075" 
      loader.load(url, (data) => {
              gltf = data;
            var object;
            if (gltf.scene !== undefined) {
                object = gltf.scene; // default scene
            } else if (gltf.scenes.length > 0) {
                object = gltf.scenes[0]; // other scene
            }
             data.scene.traverse((child) => {
    
              if (child instanceof THREE.Mesh) {
              const {map, color} = child.material;
              	child.material = new THREE.MeshBasicMaterial({
                map: map,
                color: color
                });
              }
             })
           ...