teratail p3tpjw04tpdg3h(ver2)

https://teratail.com/questions/p3tpjw04tpdg3h

by cx20

HTML

<script src="https://cx20.github.io/gltf-test/libs/three.js/r136/build/three.js"></script>
<script src="https://cx20.github.io/gltf-test/libs/three.js/r136/examples/js/controls/OrbitControls.js"></script>
<script src="https://cx20.github.io/gltf-test/libs/three.js/r136/examples/js/loaders/GLTFLoader.js"></script>

CSS

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

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

JavaScript

let camera, scene, renderer;
let controls;
let width = window.innerWidth;
let height = window.innerHeight;

camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 1000);
camera.position.z = 5;

scene = new THREE.Scene();

let ambient = new THREE.AmbientLight(0xdddddd);
scene.add(ambient);

renderer = new THREE.WebGLRenderer();
controls = new THREE.OrbitControls(camera, renderer.domElement);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

/**
 * Models
 */
const gltfLoader = new THREE.GLTFLoader();
let mixer = null

gltfLoader.load(
    'https://cx20.github.io/gltf-test/sampleModels/Fox/glTF/Fox.gltf',
    (gltf) => {

        gltf.scene.scale.set(0.025, 0.025, 0.025);
        scene.add(gltf.scene);

        // Animation
        mixer = new THREE.AnimationMixer(gltf.scene);
        const action = mixer.clipAction(gltf.animations[0]);
        action.play();

    }

)

const clock = new THREE.Clock();
let previousTime = 0;

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()
    const deltaTime = elapsedTime - previousTime
    previousTime = elapsedTime

    // Mixer
    if(mixer)
    {
		    mixer.update(deltaTime)
    }


    // Update controls

    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick();