teratail p3tpjw04tpdg3h

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/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 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();
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 = () => {
    let deltaTime = clock.getDelta();

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

    // Render
    renderer.render(scene, camera);

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

tick();