当前位置: 代码迷 >> 综合 >> geometry 的偏移(translate)和mesh的偏移的区别
  详细解决方案

geometry 的偏移(translate)和mesh的偏移的区别

热度:89   发布时间:2023-12-25 15:28:20.0

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);
}

效果如下:

    

  相关解决方案