threejs 让group沿着某个轴旋转

### 如何使 Three.js 中的 Group 对象绕特定轴旋转 在 Three.js 中，可以通过 `THREE.Group` 来管理多个对象，并通过调整组的位置和旋转来影响其内部的对象。为了实现围绕特定轴的旋转效果，可以利用 `rotateOnAxis` 方法。 下面是一个具体的例子，展示如何创建一个 `Group` 并使其沿着自定义轴线旋转： ```javascript // 创建场景、相机和渲染器... 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); // 创建并配置 Group 和子物体 const group = new THREE.Group();[^3] // 添加一些几何体到 Group 中作为示例 for (let i = 0; i < 100; i++) { const geometry = new THREE.SphereGeometry(Math.random() * 0.5 + 0.25, 32, 32); const material = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff }); const sphere = new THREE.Mesh(geometry, material); // 设置球体位置 sphere.position.x = Math.random() * 8 - 4; sphere.position.y = Math.random() * 8 - 4; sphere.position.z = Math.random() * 8 - 4; group.add(sphere); // 将球体加入到 Group 中 } scene.add(group); // 定义要绕着旋转的轴向量（这里假设为 Y 轴） const rotationAxis = new THREE.Vector3(0, 1, 0).normalize(); function animate() { requestAnimationFrame(animate); // 绕指定轴每帧都稍微转一点角度 group.rotateOnAxis(rotationAxis, 0.01); renderer.render(scene, camera); } animate(); ``` 这段代码展示了如何创建一组随机分布的小球并将它们放入同一个 `Group` 下面。接着，在每一帧更新时调用 `group.rotateOnAxis()` 函数使得整个群集按照给定的方向矢量进行旋转操作。