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

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

我们上一节讲了围绕xyz轴旋转，这种旋转物体的中心恰好是旋转的中心。这一节我们讲下更加复杂的旋转，让我们来看看吧。本节代码都是基于《物体旋转的方法和技巧1》的代码进行的。

以某点为中心围绕Y轴旋转

• 解决方案：将立方体嵌套到另一个组对象中，然后旋转组对象。

• 我们创建一个组，把物体添加到组中，场景中添加组

// 创建组，继承自Object3D
group = new THREE.Group() // new THREE.Object3D
group.add(mesh);
scene.add(group)

• 然后让组围绕Y轴旋转

group.rotateY(0.01);

• 这个时候物体的旋转还是以中心点进行旋转的。

• 先停止组的旋转，然后移动mesh的位置

  mesh.translateX(-50) // 向左移动50
  mesh.translateZ(50) // 向屏幕外移动50

• 我们可以看到立方体位置发生了偏移，但是组的中心还在绿色的轴上，这个时候旋转效果如下

• 几何体看上去已经是在围绕一个点在旋转了，但是我们之前几何体中心是和绿色轴重合的，所以我们还需要移动组的位置

  group.translateX(50); // 向右移动50
  group.translateZ(-50); // 向屏幕内移动50

• 这个时候，组的中心在如下位置

• 我们的几何体移动回了原来的位置，然后让组进行旋转

• 这样我们的几何体看上去就是以某点为中心围绕y轴旋转了。

​

codepen示例代码

围绕任意方向旋转

• 我们通过rotateOnAxis方法可以实现围绕任意方向旋转

var angle = 0.01;
function update() {
  var v1 = new THREE.Vector3(1,1,0)
  mesh.rotateOnAxis(v1,angle)
  stats.update();
  controls.update();
}

codepen示例代码

一个物体围绕另一个物体旋转(例如太阳系的旋转)

• 我们需要创建两个物体，一个球体，一个几何体来模拟
• 让球体在场景(0, 0, 0)的位置，几何体在(-200, 0, 0)的位置
• 把几何体添加到球中，让球体进行旋转

 var cube;
 var mesh;
 var group;
 var sphere;
// 初始化物体
function initObject() {
  var geometry = new THREE.BoxGeometry(100, 100, 100);
  // 给立方体的面赋值 随机颜色
  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,
  });
  mesh = new THREE.Mesh(geometry, material);
  // mesh.position = new THREE.Vector3(0, 0, 0);
  // scene.add(mesh);
  mesh.position.set(-200,0,0)

  var geometry = new THREE.SphereGeometry(60, 100, 100);
  var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  sphere = new THREE.Mesh(geometry, material);

  sphere.add(mesh);

  scene.add(sphere);
}

function render() {
    sphere.rotateY(0.01);
    renderer.render(scene, camera);
}

• 效果如下

codepen示例代码