Three.js 手写跳一跳小游戏

// 引入相关库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
 
// 其他代码保持不变...
 
// 初始化GLTFLoader
const loader = new GLTFLoader();
 
// 加载角色模型
loader.load(
    'models/scene.gltf',
    (gltf) => {
        // 将模型添加到场景
        gltf.scene.position.set(0, 0, 0);
        gltf.scene.scale.set(0.01, 0.01, 0.01);
        scene.add(gltf.scene);
 
        // 设置动画
        mixer = new THREE.AnimationMixer(gltf.scene);
        gltf.animations.forEach(clip => {
            mixer.clipAction(clip).play();
        });
 
        // 更新动画
        animate();
    },
    (xhr) => {
        // 加载进度回调
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        // 加载错误处理
        console.error('An error happened', error);
    }
);
 
// 其他代码保持不变...

在这个代码实例中，我们使用了Three.js的GLTFLoader来加载一个包含动画的3D角色模型。加载完成后，我们把模型添加到场景中，并设置了合适的缩放，然后初始化动画播放。同时，我们也添加了加载进度和错误处理的回调函数，以确保即使在模型加载过程中也能够给予用户反馈。