JSFiddle - React, Tailwind, and code Playground

by shenzhuxi

HTML

<div id="info"></div>
<div id="container"></div>

<script src="https://cdn.rawgit.com/mrdoob/three.js/r92/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r92/examples/js/loaders/GLTFLoader.js">
</script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r92/examples/js/Detector.js">
</script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r92/examples/js/controls/OrbitControls.js">
</script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r92/examples/js/libs/stats.min.js">
</script>

JavaScript

//import * as THREE from '../node_modules/three/build/three.module.js';
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
init();
//animate();

function init() {

  container = document.createElement( 'div' );
  document.body.appendChild( container );

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
  camera.position.set( -1.8, 0.9, 2.7 );

  controls = new THREE.OrbitControls( camera );
  controls.target.set( 0, -0.2, -0.2 );
  controls.update();

  scene = new THREE.Scene();

  light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
  light.position.set( 0, 1, 0 );
  scene.add( light );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.gammaOutput = true;
  container.appendChild( renderer.domElement );

  window.addEventListener( 'resize', onWindowResize, false );

  // model
    var loader = new THREE.GLTFLoader();
    loader.setCrossOrigin( 'anonymous' );
  loader.load( 'https://gist.githubusercontent.com/shenzhuxi/cf7ad7ce73ca6228a99a0a64a7eb6ab8/raw/d919fd82a5768a236b55fb0011603ca7b46ded5d/ybot.gltf', function ( gltf ) {
    gltf.scene.traverse((node) => {
      if (node.isMesh) {
        console.log(node.material.type);
        node.onBeforeRender = gltf.scene.onBeforeRender;
      }
    });

    scene.add( gltf.scene );
    //console.log(scene);
    mixer = new THREE.AnimationMixer(gltf.scene);
    gltf.animations.forEach( function (animation, i) {
      //console.log(animation);
      mixer.clipAction(animation).weight = 0.5;
      mixer.clipAction(animation).play();
    });
    renderer.render( scene, camera );
    animate();
  } );

  // stats
  stats = new Stats();
  container.appendChild( stats.dom );

}

function onWindowResize() {
  camera.aspect =...