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

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

by siouxcitizen

HTML

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

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

<!-- reference

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その３５ http://jsdo.it/siouxcitizen2/mYw5

-->

<!-- 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 light = new THREE.SpotLight(0xFFFFFF, 2, 100, Math.PI / 4, 8);
    light.position.set( 10, 25, 25 );
    light.castShadow = true;
    scene.add(light);
    
    camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 10000 );
    //camera.position.set(1, 5, 30);
    camera.position.set(40, 10, 30);

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

    let scale = 10.0;
    let url = "https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb";
    
    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 && animations.length ) {
            mixer = new THREE.AnimationMixer( object );
            for ( let i = 0; i < animations.length; i ++ ) {
                let animation = animations[ i ];
                mixer.clipAction( animation ).play();
            }
        }
        scene.add(object);
...