ThreeJs入门42-物体旋转的方法和技巧3

星河boy
1,360 阅读2分钟

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

示例代码采用three.js-r73版本: github.com/mrdoob/thre…

前面讲过了物体的旋转，一般物体是按照自己的中心轴旋转的，但是有的时候会有例外，如果物体的中心并不在几何体的中心，我们如何让它按几何体中心进行旋转？让我们来看一下吧。

建模中心点问题

image.png

  • 上图模型的中心点在肚脐或者脚底，对于我们开发来说是比较好操作的。
  • 但是有的时候，建模师并没有把中心点放在我们想要的位置，就需要我们自己来计算中心点的位置
  • 通过找到包围盒的xyz最大最小值可以计算出模型中心位置。
  • 再通过把模型放到组中，然后移动模型到组的某个位置，然后我们操作组的时候看起来就会像操作模型的中心点。

加载立方体和人物模型

  • 我们基于之前的代码，重新写一下初始化几何体的方法，用来加载立方体和人物模型。

加载立方体

var boxMesh
// 立方体
var geometry = new THREE.BoxGeometry(30, 30, 30);

for (var i = 0; i < geometry.faces.length; i += 2) {
  var hex = Math.random() * 0xffffff;
  geometry.faces[i].color.setHex(hex);
  geometry.faces[i + 1].color.setHex(hex);
}

var material = new THREE.MeshBasicMaterial({
  vertexColors: THREE.FaceColors,
});
boxMesh = new THREE.Mesh(geometry, material);
boxMesh.position = new THREE.Vector3(0, 0, 0);
scene.add(boxMesh);

加载obj模型

var boxMesh undefined;  
// 加载obj模型
var loader = new THREE.OBJLoader();
loader.load("../../static/models/obj/manHeadModel.obj", function (object) {
  scene.add(object);
  objMesh = object;
});
  • 此时我们加载了立方体和obj模型

image.png

  • 我们的obj模型在创建的时候并没有在原点(0,0,0)，其实是错的，模型的位置还是在原点，只是人物模型的位置在建模的时候并没有在原点上创建，我们输出objMesh可以查看到。

image.png

  • 这就是我们之前说的建模中心点问题。我们给人物模型和几何体都添加辅助线查看下效果
axis2 = new THREE.AxisHelper(100);
axis2.position.copy(objMesh.position);
scene.add(axis2);

axis1 = new THREE.AxisHelper(100);
axis1.position.copy(boxMesh.position);
scene.add(axis1);

image.png

  • 我可以看到几何体和obj模型的辅助线都是在原点的，这个时候旋转，都会围绕自身中心点进行旋转。
function update() {
  boxMesh.rotateY(0.01);
  if (objMesh != undefined) {
    objMesh.rotateY(0.01);
  }
}

GIF.gif

  • 我们如何才能达到都围绕自己的中心点进行旋转呢，像下面这种效果：

GIF.gif

  • 下一节我们来讲述下，如何计算出obj模型自身的中心点，围绕自身进行旋转。

codepen示例代码

avatar
文章
阅读
粉丝