WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

Three.js改变模型对象的旋转轴位置

模型对象可能是一个网格模型对象,也能是包含多个网格模型的层级模型对象。

平移几何体

如果想改变一个网格模型对象的默认旋转轴,平移网格模型对象的几何体Geometry可以改变,主要不能平移网格模型本身,平移网格模型对象本身,执行网格模型的旋转方法并不会影响自身旋转轴的位置。比如通过threejs的BoxGeometry类创建一个立方体几何体,执行.rotateY()旋转方法,默认的旋转轴位置位于立方体的几何中心,如果通过几何体的平移方法translate ()改变几何体顶点的位置坐标,就可以改变网格模型旋转轴默认的旋转位置。

var box=new THREE.BoxGeometry(56,56,56);
// 平移几何体,改变旋转轴
box.translate ( 28, 0, 0 );

var mesh=new THREE.Mesh(box,material);
// 平移网格模型,不影响mesh自身的旋转轴
mesh.position.set(65,23,0)

// 立方体旋转动画效果
function render() {
    renderer.render(scene,camera);
    //每次绕y轴旋转0.01弧度
    // 不平移几何体,绕立方体的几何中心旋转
    // 平移距离是变长的一半,绕立方体侧边线旋转
    mesh.rotateY(0.1);
    requestAnimationFrame(render);
}
render();

嵌套父对象

如果是多个网格模型组成一个模型对象,分别去平移每个网格模型对应的几何体可能比较麻烦,对于这种情况也可以给该模型对象嵌套一个父对象,然后把该模型对象相对于父对象平移一定距离,然后旋转该模型的父对象,不旋转模型本身,可以看到该模型的旋转效果,视觉效果上旋转轴改变了。

// 加载mesh是外部加载得到模型对象
var box=new THREE.BoxGeometry(50,50,50);
box.translate ( 25, 0, 0 );
var mesh=new THREE.Mesh(box,material);


var group = new THREE.Group()
// group作为mesh的父对象
group.add(mesh)
// mesh相对父对象沿着x方向平移-25
mesh.position.x= -25

scene.add(group);


// 立方体旋转动画效果
function render() {
    renderer.render(scene,camera);
    // mesh.rotateY(0.1);
    group.rotateY(0.1);//旋转mesh的父对象
    requestAnimationFrame(render);
}
render();
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com