Three.js r102 .glTF 3D Model Animation Display 01

Displaying .glTF 3D Model Animation (Using Draco 3D Graphics Compression) by Three.js r102 library

by siouxcitizen

HTML

<!-- Displaying .glTF 3D Model Animation (Using Draco 3D Graphics Compression) by Three.js r102 library -->

<!-- originally forked from [WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その１８）（調整中） http://jsdo.it/cx20/CJd3 -->

<!-- reference

[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その２１）（調整中） http://jsdo.it/cx20/aq1x 

Babylon.js v3.3.0 Practice#75 glTF 3D Model Animation Display 14 https://codepen.io/siouxcitizen/pen/LqQQPb

-->

<!-- about Three.js
from 20190306_0502
mrdoob/three.js r102  
https://github.com/mrdoob/three.js

https://github.com/mrdoob/three.js/blob/dev/build/three.min.js
https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/DRACOLoader.js
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/GLTFLoader.js

CDN by https://raw.githack.com/
 -->

<!-- three.min.js r102 -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/build/three.min.js"></script>
<!-- OrbitControls.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/controls/OrbitControls.js"></script>
<!-- DRACOLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/DRACOLoader.js"></script>
<!-- GLTFLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/GLTFLoader.js"></script>

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

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

body {
  background: #000;
  font: 30px sans-serif;
}

JavaScript

let gltf = null;
let mixer = null;
let clock = new THREE.Clock();
let controls;
let camera;

init();
animate();
  
function init() {
    width = window.innerWidth;
    height = window.innerHeight;
    
    scene = new THREE.Scene();
    
    //let ambient = new THREE.AmbientLight( 0x101030 );
    let ambient = new THREE.AmbientLight( 0xdddddd );
    //scene.add( ambient );

    const light = new THREE.SpotLight(0xFFFFFF, 2, 100, Math.PI / 4, 8);
    light.position.set( 10, 25, 25 );
    light.castShadow = true;
    //scene.add(light);  // KHR_materials_unlit 拡張のテストの為、ライトをコメントアウト
    
    camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 10000 );
    camera.position.set(0, 3, 10);

    let geometry = new THREE.BoxGeometry(100, 5, 100);
    let material = new THREE.MeshLambertMaterial({
        color: "#707070"
    });
    
    //let ground = new THREE.Mesh(geometry, material);
    //ground.position.y -= 15;
    //ground.receiveShadow = true;
    //scene.add(ground);

    let manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };

    let loader = new THREE.GLTFLoader();
    loader.setCrossOrigin( 'anonymous' ); // r84 以降は明示的に setCrossOrigin() を指定する必要がある

    //THREE.DRACOLoader.setDecoderPath( 'https://cdn.rawgit.com/cx20/gltf-test/a63d4941/libs/three.js/r95dev/draco/gltf/' );
    loader.setDRACOLoader( new THREE.DRACOLoader() );
    
    let scale = 0.01;
    let url = "https://rawcdn.githack.com/BabylonJS/Exporters/422493778d6ffbc2980e83e46eb94729bbeada0c/Maya/Samples/glTF%202.0/T-Rex/trex_running.gltf";
    
    loader.load(url, function (data) {
        gltf = data;
        let object = gltf.scene;
        object.scale.set(scale, scale, scale);
        //object.position.y = -5;
        //object.position.x = 4;
        object.castShadow = true;
        object.receiveShadow = true;

        let animations = gltf.animations;
        if ( animations &&...