ThreeJS's hierarchical structure model

1 Basic element model

2 Hierarchical structure model

The hierarchical model composed of the scene object scene itself is a tree structure. The first layer of the scene object hierarchical model is the root node of the tree structure. Generally speaking, the mesh model Mesh, the point model Points, and the line model Line are in a tree structure. The outermost leaf node. The middle layer of the hierarchical model is generally completed by Threejs Groupclasses, Groupand the objects instantiated by the classes can be called group objects.

When Threejs renders, it starts to parse and render from the root node scene object. If a model wants to be rendered, it must be directly or indirectly inserted into the scene. If a light source is to be used in lighting calculations, it also needs to be addinserted into the scene by methods. .

`.add()`method

The methods of scene objects Scene, group objects Group, mesh model objects Mesh, and light source objects are all inherited from their common base class Object3D .Light.add()

.add()The essence of the parent object execution method is to add the child object in the parameter to its own child object properties .children.

.add()The method can insert a single object or multiple sub-objects at the same time.

group.add(mesh1);
group.add(mesh2);

group.add(mesh1,mesh2);

Scene root node rendering problem

`.remove()`method

.add()The method is to add a child object to the parent object, and the .remove()method is to delete a child object in the parent object. All child objects of an object can be accessed through the .children()properties of the object . Executing the delete method of the object is the same as the .remove()adding method .add()to change the .children()properties of the parent object .

The method usage rules of scenes Sceneor group objects can be viewed as their base class Object3D .Group.remove()

// 删除父对象group的子对象网格模型mesh1
group.add(mesh1)
// 一次删除场景中多个对象
scene.remove(light,group)

Model naming ( `.name`attributes)

In the hierarchical model, some model objects can .namebe marked by attribute naming.

group.add(Mesh)
// 网格模型命名
Mesh.name = "眼睛"
// mesh父对象对象命名
group.name = "头"

Tree structure hierarchy model

In actual development, an external model may be loaded, and then .namea sub-object is searched from the model object by the name of the node . To make it easier for everyone to understand, this lesson does not load the external model, and creates a very simple robot model directly through the code. Then perform related operations on the basis of the robot.

// 头部网格模型和组
var headMesh = sphereMesh(10, 0, 0, 0);
headMesh.name = "脑壳"
var leftEyeMesh = sphereMesh(1, 8, 5, 4);
leftEyeMesh.name = "左眼"
var rightEyeMesh = sphereMesh(1, 8, 5, -4);
rightEyeMesh.name = "右眼"
var headGroup = new THREE.Group();
headGroup.name = "头部"
headGroup.add(headMesh, leftEyeMesh, rightEyeMesh);
// 身体网格模型和组
var neckMesh = cylinderMesh(3, 10, 0, -15, 0);
neckMesh.name = "脖子"
var bodyMesh = cylinderMesh(14, 30, 0, -35, 0);
bodyMesh.name = "腹部"
var leftLegMesh = cylinderMesh(4, 60, 0, -80, -7);
leftLegMesh.name = "左腿"
var rightLegMesh = cylinderMesh(4, 60, 0, -80, 7);
rightLegMesh.name = "右腿"
var legGroup = new THREE.Group();
legGroup.name = "腿"
legGroup.add(leftLegMesh, rightLegMesh);
var bodyGroup = new THREE.Group();
bodyGroup.name = "身体"
bodyGroup.add(neckMesh, bodyMesh, legGroup);
// 人Group
var personGroup = new THREE.Group();
personGroup.name = "人"
personGroup.add(headGroup, bodyGroup)
personGroup.translateY(50)
scene.add(personGroup);

// 球体网格模型创建函数
function sphereMesh(R, x, y, z) {
  var geometry = new THREE.SphereGeometry(R, 25, 25); //球体几何体
  var material = new THREE.MeshPhongMaterial({
    color: 0x0000ff
  }); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); // 创建网格模型对象
  mesh.position.set(x, y, z);
  return mesh;
}
// 圆柱体网格模型创建函数
function cylinderMesh(R, h, x, y, z) {
  var geometry = new THREE.CylinderGeometry(R, R, h, 25, 25); //球体几何体
  var material = new THREE.MeshPhongMaterial({
    color: 0x0000ff
  }); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); // 创建网格模型对象
  mesh.position.set(x, y, z);
  return mesh;
}

Recursive traversal method`.traverse()`

The Threejs hierarchical model is a tree structure. You can traverse all the descendants of a Threejs model object through the recursive traversal algorithm. You can create a robot model or an externally loaded 3D model by recursively traversing the following code.

scene.traverse(function(obj) {
  if (obj.type === "Group") {
    console.log(obj.name);
  }
  if (obj.type === "Mesh") {
    console.log('  ' + obj.name);
    obj.material.color.set(0xffff00);
  }
  if (obj.name === "左眼" | obj.name === "右眼") {
    obj.material.color.set(0x000000)
  }
  // 打印id属性
  console.log(obj.id);
  // 打印该对象的父对象
  console.log(obj.parent);
  // 打印该对象的子对象
  console.log(obj.children);
})

Find a specific model

Seeing the methods of Threejs .getObjectById(), .getObjectByName()etc., if you have a front-end foundation, it is easy to think of some methods of DOM.

Threejs, like the front-end DOM, can find a certain descendant object of the parent element of the tree structure through one method. For ordinary front-ends, one or more DOM elements can be found by name or id. Threejs can also find a model through some methods. A node in the tree. For more details on the search method and method usage, please refer to the base class Object3D

// 遍历查找scene中复合条件的子对象，并返回id对应的对象
var idNode = scene.getObjectById ( 4 );
console.log(idNode);

// 遍历查找对象的子对象，返回name对应的对象（name是可以重名的，返回第一个）
var nameNode = scene.getObjectByName ( "左腿" );
nameNode.material.color.set(0xff0000);