Three.js: 如何让导入的 3D 模型一部分左右移动，另一部分跟随整体运动并上下移动

Three.js: 如何让导入的 3D 模型一部分左右移动，另一部分跟随整体运动并上下移动

想要实现让导入的 3D 模型一部分左右移动，另一部分跟随整体运动的同时上下移动，您可以使用 Three.js 中的组合和动画功能来实现。下面是一个简单的示例，展示了如何实现这种效果：

1. 导入所需的依赖：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

2. 创建场景、相机和渲染器：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 添加光源以及控制器：

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);

const controls = new OrbitControls(camera, renderer.domElement);

4. 加载模型文件：

const loader = new GLTFLoader();
let model;
loader.load('path/to/model.gltf', (gltf) => {
  model = gltf.scene;
  scene.add(model);
});

5. 创建动画循环函数，使模型的一部分左右移动，一部分跟随整体运动的同时上下移动：

function animate() {
  requestAnimationFrame(animate);

  // 如果模型已加载
  if (model) {
    // 控制模型整体运动
    model.rotation.y += 0.01; // 左右移动
    model.position.y += Math.sin(Date.now() * 0.001); // 上下移动

    // 控制模型的一部分左右移动
    const part = model.getObjectByName('partName');
    if (part) {
      part.rotation.y += 0.02; // 左右移动
    }
  }

  controls.update();
  renderer.render(scene, camera);
}

animate();

在上述代码中，您需要将 'path/to/model.gltf' 替换为您要加载的实际模型文件路径。您还需要将 'partName' 替换为您要控制其左右移动的模型部分的名称。

这样，模型的一部分将根据 part.rotation.y 的值进行左右移动，而整个模型将根据 model.rotation.y 和 model.position.y 的值进行整体和上下运动。您可以根据需要调整旋转和移动的速度和范围。

总结:

通过使用 Three.js 的组合和动画功能，您可以实现让导入的 3D 模型一部分左右移动，另一部分跟随整体运动的同时上下移动的效果。上述代码示例提供了一个基本的实现框架，您可以根据实际需求进行修改和扩展。