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

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

在3D世界中，物体的一些属性或者动作，其实是很少的，比如移动旋转。像让人行物体抬抬手，踢踢腿，都可以通过几何变换来完成。除了这些基础动作，比较复杂的动作，比如爆炸，也都是通过移动旋转和几何变换来完成的。

绘制一个立方体

为我们需要绘制一个立方体，一个辅助网格线，便于观察立方体的旋转。

初始化视图

function initView() {
    container = document.createElement("div");
    document.body.appendChild(container);
}

初始化场景

function initScene() {
    scene = new THREE.Scene();
    // scene.background = new THREE.Color(0xffffff);
}

初始化灯光

function initLight() {
    // 环境光
    light = new THREE.AmbientLight(0xff0000);
    light.position.set(100, 100, 200);
    scene.add(light);
}

初始化摄像机

const near = 1
const far = 10000

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, near, far);
    camera.position.x = 0;
    camera.position.y = 300;
    camera.position.z = 600;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt({
      x: 0,
      y: 0,
      z: 0,
    });
}

初始化物体

 var cube;
 var mesh;
// 初始化物体
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);
}

初始化网格

• THREE.GridHelper用来创建坐标格辅助对象

function initGrid() {
  // 网格辅助坐标
  var helper = new THREE.GridHelper(1000, 50);
  helper.setColors(0x0000ff, 0x808080);
  scene.add(helper);
}

初始化渲染函数

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0xffffff, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
}

渲染循环

function animate() {
    render();
    update();
    requestAnimationFrame(animate);
}

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

function update() {
    stats.update();
    controls.update();
}

这样我们的立方体就创建好了 codepen示例代码 点击查看【codepen】

围绕xyz轴旋转

我们的几何体是通过Mesh创建的，而Mesh继承自Object3D，在Object3D有旋转相关的方法

围绕X轴旋转 rotateX

• 我们在渲染循环时添加代码

function update() {
    mesh.rotateX(0.01)
    stats.update();
    controls.update();
}

• 我们可以看到，我们的物体围绕 x 轴旋转，是由内向外进行旋转，我们的旋转方向是由右手法则确定的。
• 我们也可以通过mesh的旋转属性进行旋转，两种方法效果一样

mesh.rotation.x += 0.01

围绕Y轴旋转 rotateY

• 围绕 y 轴旋转我们可以添加如下代码

function update() {
  mesh.rotateY(0.01)
  // mesh.rotation.y += 0.01
  stats.update();
  controls.update();
}

围绕Z轴旋转 rotateZ

• 围绕 z 轴旋转，我们可以添加如下代码

function update() {
  mesh.rotateZ(0.01)
  // mesh.rotation.z += 0.01
  stats.update();
  controls.update();
}

我们先做模拟的都是简单地围绕单个轴旋转，对于围绕多个轴旋转的复杂场景之后我们再来了解。

codepen示例代码 点击查看【codepen】