「技术分享」Threejs 核心基础类——Object3D

阅读原文：【技术分享】Threejs 核心基础类——Object3D

点击关注“八戒技术团队”，阅读更多技术干货

在学习threejs过程中，涉及到各种各样的类和方法，比如Camera、Light、Mesh等等。对于初学者而言，遇到问题只知其然而不知其所以然，面对数量庞大且关联密切的类和方法往往会犯迷糊，所以深入的理清各个类之间的联系、继承关系，以及共用的方法变得尤为重要。基于此，本文将着重介绍threejs中的基础核心类之一—Object3D。

Object3D作为threejs中最重要的基础类之一，包括上面提到的Camera、Light、Mesh在内的大量类均继承自Object3D。它为需要用到位置、方向等数据的对象提供大量的公共属性和方法。这些方法可以用来设置项目中3d对象的position、rotation等属性，或者设置多个3d对象的共用属性。只要理解这些共用的属性或方法，相同的机制会作用于继承自Object3D的其他任何类。

在本文中，我们将梳理Object3D类中较常用到的基础知识，并直接运用Object3D中的属性方法。当然，我们也将会在使用相机、网格等类的同时运用这些方法和属性，以便加深印象。与此同时，也会接触到与空间变换相关的其他重要类，比如Vector3和Euler。

一、position属性

在threejs中，通常情况下我们不会直接使用Object3D类中的方法和属性，而是通过间接地使用继承它的类中的方法和属性。如果在特殊性情况下，需要直接使用Object3D类的方法，建议通过new关键字创建THREE.Object3D的实例进行操作。

var obj = new THREE.Object3D();
// {"x":0,"y":0,"z":0}
console.log(JSON.stringify(obj.position));
obj.position.set(3, 4, 5); 
// {"x":3,"y":4,"z":5}
console.log(JSON.stringify(obj.position));

上面的例子中，使用了position属性，其值是一个Vector3的实例。Vector3可以理解为三维向量，可用于表示空间中的点（x,y,z）。position属性设置的是场景中3d对象的中心点。如果是父子对象，那么子对象的位置将是相对父对象的位置设置的。

二、rotation属性

rotation是Object3D中另外一个常用的属性，它的值为Euler类的实例。Euler实例表示的是欧拉角（Euler Angles,简单来说，就是几何体自身的坐标系，相对于全局坐标系，以有序的方式绕全局坐标轴和自身坐标轴旋转所产生的一组角度，它用于描述几何体在空间中的旋转。详细内容这里不展开，有兴趣的小伙伴可以自行查阅相关资料）。当我们创建或更改Euler实例的值时，可以用set方法设置值，有4个参数，前3个为从0到2的弧度，表示相对于对应坐标轴的旋转角度，最后一个为旋转顺序，默认为XYZ。设置值的另一种方法为copy方法，复制另外一个实例的值。

接下来，将通过一段简短的代码来说明具体的使用方法。

// 建立场景
    var scene = new THREE.Scene();
    // 创建实例
var obj = new THREE.Object3D();
// 设置旋转角度
    obj.rotation.set(0, 0, Math.PI * 1.75);
    // 创建网格对象
    var mesh = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshNormalMaterial()
);
    // 将obj 的rotation属性值复制给mesh对象 
    mesh.rotation.copy(obj.rotation);
    scene.add(mesh);
    // 相机
    var camera = new THREE.PerspectiveCamera(4, 4 / 3, .5, 100);
    camera.position.set(2, 2, 2);
    camera.lookAt(0, 0, 0);
    // 渲染
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(640, 480);
document.getElementById('myDemo').appendChild(renderer.domElement);
    renderer.render(scene, camera);

在本示例中，我们先创建了一个Object3D的实例obj，然后使用Euler类的set方法，为实例设置旋转角度。接着创建一个Mesh类的实例mesh，由于Mesh类继承自Object3D类，因此mesh也拥有rotation属性和对应的方法，最后我们使用mesh继承来的copy方法为自己设置与obj相同的旋转属性值。眼尖的小伙伴可能注意到了，上面的实例中用到了一个方法：lookAt，我们常常在Camera实例中见到并用来设置相机的方向，但是它依然是继承自Object3D，你甚至可以在Mesh的实例上调用此方法！它也可以被看作是设置旋转值的另一种方式，它可以接受3个参数：一组代表x,y,z数值的数字，也可以接受Vector3的实例作为参数。下面我们将用lookAt方法设置Object3D的rotation。

接下来，看看可以如何在其他继承自Object3D的类上使用lookAt方法。

var scene = new THREE.Scene();
    var mesh = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshNormalMaterial()
  );
    scene.add(mesh);
    var camera = new THREE.PerspectiveCamera(45, 4 / 3, .5, 100);
    camera.position.set(2, 2, 2);
camera.lookAt(0, 0, 0);
// 很形象，转头，看向camera.position代表的位置
    mesh.lookAt(camera.position);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(640, 480);
    document.getElementById('demo').appendChild(renderer.domElement);
    renderer.render(scene, camera);

下面，我们将结合上面讲到内容进一步给出一个简单的旋转动画示例，将涉及到Vector3实例，以及将lookAt方法运用在调整模型角度上。

// 实际上Scene也是继承自Object3D
    var scene = new THREE.Scene();
      // GridHelper同样是继承自Object3D
    var gridHelper = new THREE.GridHelper(4, 4);
       // 这里我们可以直接使用继承来的scale属性来设置缩放
  gridHelper.scale.set(2.5, 2.5, 2.5);
    scene.add(gridHelper);
 
    // 不用多说Mesh依然是继承自Object3D
    var box = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshNormalMaterial());
    scene.add(box);
 
    var sphere = new THREE.Mesh(
            new THREE.SphereGeometry(0.25, 20, 20),
            new THREE.MeshNormalMaterial());
    scene.add(sphere);
 
    // Camera同样是继承自Object3D
    var camera = new THREE.PerspectiveCamera(45, 4 / 3, .5, 100);
    camera.position.set(10, 10, 10);
    camera.lookAt(0, 0, 0);
 
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(640, 480);
    document.getElementById('myDemo').appendChild(renderer.domElement);
 
    var state = {
        frame: 0,
        maxFrame: 100,
        fps: 30,
        lt: new Date(),
        vector: new THREE.Vector3(3, 0, 0) // and instance of vercor3
    };
    
    var update = function (state) {
        state.vector.z = -5 + 10 * state.bias;
        // 用state的vector属性设置sphere的position
        sphere.position.copy(state.vector);
        // 让box以lookAt的方法调整旋转角度，始终面向sphere
        box.lookAt(state.vector);
    };
    
    var loop = function () {
        state.per = state.frame / state.maxFrame;
        state.bias = 1 - Math.abs(state.per - 0.5) / 0.5;
        var now = new Date();
        secs = (now - state.lt) / 1000;
        requestAnimationFrame(loop);
        if (secs > 1 / state.fps) {
            update(state);
            renderer.render(scene, camera);
            state.frame += state.fps * secs;
            state.frame %= state.maxFrame;
            state.lt = now;
        }
    };
    loop();

在上面的例子中，我们建立了一个包含Vector3实例属性值的state对象，并通过改变state.vector的z轴值来使sphere对象平行于z轴作来回运动，并使box对象按照sphere的路径位置旋转。

三、Group

Group类用于将一系列3d实例对象组合成集合，它同样继承自Object3D，其add方法来自于Object3D，也就是说add方法存在于任何继承于Object3D的类或对象中。所以可以用这一系列的类实现实例对象分组的功能，当然也包括Object3D本身。

接下来，我们将展示一个如何创建3d对象组的示例。

var createCubeStack = function (original) {
      var stack = {},
      original = original || new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshNormalMaterial()),
      cube;
      // 直接通过Object3D创建group对象
      stack.group = new THREE.Object3D();
      // 定义set方法用来设置3d对象集合中元素的位置和旋转方向
      stack.set = function (per) {
        var bias = 1 - Math.abs(0.5 - per) / 0.5,
        arr = stack.group.children,
        len = arr.length;
        arr.forEach(function (cube, i) {
            var y = -len / 2 + i + 2 * bias;
            cube.position.set(0, y, 0);
            cube.rotation.set(0, Math.PI * 2 * (i / len) + Math.PI * 2 * per, 0);
        });
      };
      // 创建多个3d对象实例
      var i = 0,
      len = 3,
      per;
      while (i < len) {
        per = i / len;
        cube = original.clone();
        cube.position.set(0, -len / 2 + i, 0);
        cube.rotation.set(0, Math.PI * 2 * per, 0);
        stack.group.add(cube)
        i += 1;
      }
      return stack;
  };

上面例子中，我们创建了一个方法，用来生成并返回一个3d对象实例的group，并包含了设置group中元素位置，旋转角度的方法。接下来，我们将把此方法用到具体的场景中去：

var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45, 4 / 3, .5, 100);
  camera.position.set(5, 5, 5);
  camera.lookAt(0, 0, 0);
  var stack = createCubeStack();
  scene.add(stack.group);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(320, 240);
  document.getElementById('demo').appendChild(renderer.domElement);
 
  var frame = 0,
  maxFrame = 100;
  var loop = function () {
        requestAnimationFrame(loop);
        renderer.render(scene, camera);
        stack.set(frame / maxFrame);
        frame += 1;
        frame = frame % maxFrame;
  };


  renderer.render(scene, camera);
  loop();

当我们运行代码后，会得到一堆立方体，旋转、跳跃。当然直接用Object3D来设置3d实例对象的分组并不是最优的方案，毕竟人家已经明确给出了Group类用来实现分组的功能。但是我们只是想通过这个例子来进一步说明，threejs中Object3D和其他类之间的继承关系。

四、其他

在Object3D中还有很多有用的属性。比如：name属性，可以为3d实例对象设置name属性，并通过getObjectByName获取相应的实例对象；scale属性，其值是Vector3的实例，可以用来设置实例对象的缩放；userData属性，可以用来存储用户的自定义数据，方便在各个实例中读取并使用。除了列出的这些，还有很多实用的属性和方法。

本文并不打算对Object3D中所有的属性和方法作一一列举。仅仅旨在通过一些典型的方法和属性示例，来说明threejs中各个类的继承关系及如何使用共有的方法和属性，并以此为初学者提供一种新的系统性的学习思路。同时也希望本文对大家有所帮助。

希望以上内容能对有需要的人有所帮助

欢迎大家留言写下自己希望了解的技术方向

欢迎大家一起探讨交流