使用React复刻ThreeJS官网示例——keyframes动画

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 100);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加OrbitControls支持鼠标和触摸板操作
const controls = new OrbitControls(camera, renderer.domElement);
 
// 加载模型
const loader = new GLTFLoader();
loader.load('models/gltf/AnimatedMorphCube/AnimatedMorphCube.gltf', function (gltf) {
    scene.add(gltf.scene);
 
    // 动画相关设置
    gltf.animations; // 获取动画数组
    gltf.scene.mixer = new THREE.AnimationMixer(gltf.scene); // 创建混合器
    const clips = gltf.animations; // 获取动画片段
 
    // 播放动画
    clips.forEach(clip => {
        const action = gltf.scene.mixer.clipAction(clip);
        action.play(); // 播放动画
    });
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        gltf.scene.mixer && gltf.scene.mixer.update(clock.getDelta()); // 更新动画
        renderer.render(scene, camera);
    }
    animate();
 
}, undefined, function (error) {
    console.error(error);
});
 
// 初始化时间
const clock = new THREE.Clock();
 
// 窗口尺寸变化响应
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

这段代码使用React的原则，将Three.js的加载和渲染逻辑封装在一个函数组件中，并通过React的生命周期钩子管理动画的开始、更新和清理。这是一个更为现代和React式的方式来使用Three.js，同时也展示了如何在Web应用程序中集成Three.js动画的基本方法。