给ThreeJs物体注入活力：物体旋转指南

2023-12-19 02:23:58

当我们希望物体围绕一个轴旋转时，绕x、y、z轴的旋转无法满足我们的需求。所以，Three.js提供了另一个更复杂的函数rotateOnAxis()，这个函数可以让我们绕着任意轴进行旋转。

本节的例子，我们希望制作一个绕着z轴旋转的立方体，并且绕着自身y轴进行旋转，然后在将它稍微偏转一下，具体步骤如下：

function init() {
  // 创建场景
  scene = new THREE.Scene();

  // 创建相机
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  // 创建渲染器
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 创建立方体
  var geometry = new THREE.BoxGeometry(1, 1, 1);
  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 创建旋转轴
  var axis = new THREE.Vector3(0, 1, 0);

  // 创建旋转动画
  var animation = new THREE.Animation(cube, 'rotation', {
    from: 0,
    to: 2 * Math.PI,
    duration: 1000,
    easing: THREE.Easing.Linear.None
  });

  // 将旋转动画添加到场景中
  scene.addAnimation(animation);

  // 渲染场景
  renderer.render(scene, camera);
}

function animate() {
  // 更新场景
  scene.update();

  // 渲染场景
  renderer.render(scene, camera);

  // 循环调用animate()
  requestAnimationFrame(animate);
}

init();
animate();