Three.js机器人与星系动态场景：实现3D渲染与交互式控制

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RobotGLTF } from './RobotGLTF.js';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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 starTexture = new THREE.TextureLoader().load('textures/stars.jpg');
scene.background = starTexture;
 
// 加载机器人模型
const loader = new GLTFLoader();
loader.load('models/RobotExpressive.glb', function (gltf) {
  scene.add(gltf.scene);
  RobotGLTF.setAnimations(gltf.animations);
  RobotGLTF.setMixer(gltf.animations, gltf.scene);
}, undefined, function (error) {
  console.error(error);
});
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新OrbitControls
  RobotGLTF.update(clock.getDelta()); // 更新动画
  renderer.render(scene, camera); // 渲染场景
}
 
// 启动动画循环
const clock = new THREE.Clock();
animate();

这段代码示例展示了如何使用Three.js创建一个包含动画机器人的3D场景，并允许用户通过鼠标或触摸进行旋转查看。代码加载了一个星空背景纹理和一个机器人模型，并使用OrbitControls来控制相机的旋转。动画更新是通过RobotGLTF.update方法进行的，该方法负责处理模型的动画混合树。