Three.js 改变模型对象的旋转轴位置 - 文章教程

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

发布于 2021-08-18 字数 1911 浏览 1062 评论 0

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

平移几何体

如果想改变一个网格模型对象的默认旋转轴,平移网格模型对象的几何体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();

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

21 文章
1 评论
23922 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0