geometry中的偏移,是物体的网格偏移了,,但是物体的世界的坐标还在原来的位置:这样可以很简单的实现一个绕着世界坐标的中心点旋转的物体效果:
1. 怎么实现物体绕这世界坐标的中心点旋转:
实现的思路是:网格(geometry)先偏移(translate),以后生成网格物体(mesh),最后网格旋转,实现代码如下:
var geo = new THREE.BoxGeometry(10,10,10);
geo.translate(50,0,50);
var mat = new THREE.MeshBasicMaterial({color:0xff0000});
var mesh = new THREE.Mesh(geo,mat);
mesh.rotateY(0.5 * Math.PI);
scene.add(mesh);
这样让一个物体绕着世界坐标的中心点旋转就非常方便了,在requestAnimation所在函数中,添加如下代码
ar r = 0.01;
function loop() {
renderer.render(scene,camera);
mesh.rotateY(r * Math.PI);
requestAnimationFrame(loop);
}
实现的效果如下(添加几张某时刻的图片):
2. 而mesh中的偏移,,是将物体的世界坐标改变,因此让其旋转,,是在原地旋转:
var geo = new THREE.BoxGeometry(10,10,10);
var mat = new THREE.MeshBasicMaterial({color:0xff0000});
mesh = new THREE.Mesh(geo,mat);
// 绕着 x,z偏移30;
mesh.translateOnAxis(new THREE.Vector3(1,0,1),30);
scene.add(mesh);
让其不断的旋转:
var r = 0.01;
function loop() {
renderer.render(scene,camera);
mesh.rotateY(r * Math.PI);
requestAnimationFrame(loop);
}
效果如下: