Quiet
  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我

bajiu

  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我
Quiet主题
  • WebGL
  • ThreeJs

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

bajiu
前端

2020-08-06 15:20:00

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

平移几何体

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

Three.js材质设置金属效果

下一篇

Spherical球坐标

©2024 By bajiu.