three.js如何使得物体绕某个点旋转
时间: 2023-11-07 21:01:10 浏览: 91
使用three.js,可以通过设置物体的旋转中心点(pivot point)来使其绕某个点旋转。
首先,创建一个THREE.Group对象,将需要旋转的物体添加到该组中。然后,将该组的位置设置为旋转中心点的位置,再将物体绕X、Y或Z轴旋转即可。最后,将该组添加到场景中。
例如,以下代码将一个立方体绕Y轴以(0, 2, 0)为中心点旋转:
```javascript
var group = new THREE.Group();
scene.add(group);
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
group.add(cube);
var pivot = new THREE.Vector3(0, 2, 0);
group.position.copy(pivot);
function animate() {
requestAnimationFrame(animate);
group.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
在animate函数中,每帧都将group绕Y轴旋转0.01弧度。因为group的位置已经设置为中心点,所以立方体将绕该点旋转。
需要注意的是,如果物体的位置已经被设置过,需要将其位置减去旋转中心点的位置,以保证旋转中心点正确。例如,如果上面的立方体已经被移动到了(1, 0, 0)的位置,则需要将group的位置设置为(1, 2, 0)。
```javascript
var group = new THREE.Group();
scene.add(group);
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(1, 0, 0); // 设置立方体位置
group.add(cube);
var pivot = new THREE.Vector3(0, 2, 0);
group.position.copy(pivot).sub(cube.position); // 设置旋转中心点并修正位置差
function animate() {
requestAnimationFrame(animate);
group.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```