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

Displaying .glTF 3D Model Animation (Using .glTF type file) by Three.js r102 library

by siouxcitizen

HTML

<!-- Displaying .glTF 3D Model Animation (Using .glTF type file) by Three.js r102 library -->

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

<!-- reference

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

Babylon.js v3.3.0 でglTFファイル形式アニメーション付き3Dモデル(重め)を表示 http://jsdo.it/siouxcitizen2/C1vb

-->

<!-- 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/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>
<!-- 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 );
    scene.add( ambient );

    const directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 );
    scene.add( directionalLight );

    const directionalLight2 = new THREE.DirectionalLight( 0xffeedd );
    directionalLight2.position.set( 0, 5, -5 );
    scene.add( directionalLight2 );
    
    camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 10000 );
    //camera.position.set(2, 2, 3);
    camera.position.set(1, 0.5, 1);

    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() を指定する必要がある

    let scale = 1.0;
    let url = "https://rawcdn.githack.com/BabylonJS/Babylon.js/a4d0b74099cd9b4a2a15e705ff17e036a188c0ee/Playground/scenes/Alien/Alien.gltf";
    
    loader.load(url, function (data) {
        gltf = data;
        let object = gltf.scene;
        object.scale.set(scale, scale, scale);
        object.position.y += 0.5;

        let animations = gltf.animations;
        if ( animations && animations.length ) {
            mixer = new THREE.AnimationMixer( object );
            for ( var i = 0; i < animations.length; i ++ ) {
                var animation = animations[ i ];
                mixer.clipAction( animation ).play();
            }
        }

        scene.add(object);
    });

    let axis = new THREE.AxisHelper(1000);   
    scene.add(axis);

    renderer = new THREE.WebGLRenderer();
    //renderer.setClearColor( 0xaaaaaa );
    renderer.setClearColor( 0x000000 );

    controls = new...