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>
   <script src="https://rawcdn.githack.com/mrdoob/three.js/r137/examples/js/utils/BufferGeometryUtils.js"></script>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    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);
    /* console.log(light) */
    scene.add(light);

    // mesh
  
var loader = new THREE.GLTFLoader()
   var url = "https://cdn.glitch.global/b6638abd-afc2-4530-bc1b-8edf2eccdaad/scene%20-%202022-02-05T232938.462.glb?v=1644121787204"
   //"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) {
              child.material.flatShading = false
              //child.geometry.computeVertexNormals();
              console.log(child.material.shading)
              child.geometry.computeBoundingSphere();
              child.geometry.deleteAttribute('normal');
							child.geometry =...