We are committed to building the first “cloud CAD” collaborative design platform integrating viewing, modeling, assembly and rendering in China.
At the request of readers, we hope that we can set up a professional QQ communication group for webGL and Threejs industry for front-end developers in Chengyu area, so as to facilitate discussion. The group has webGL, Threejs big guy oh, welcome to join! — Click the link to join the group chat [Three.js/WebGL Chongqing Alliance Group] : jq.qq.com/?_wv=1027&k…
The introduction
Almost all front-end interface development is based on roughly the same hierarchical model. Whether it’s div tags on the Web, Node in a 2D game, or Object3D in a 3D application. They build relationships with each other in a tree structure, from the root node of the project to the specific functional elements at the end of the application, from the scene and page to the game characters and menu tables.
For example, for a car, in Threejs you can use one grid model to describe one part of the car, and multiple parts require multiple grid models to represent each other, forming a hierarchy of fathers and sons or brothers. In mechanical and architectural Web3D applications, knowledge of hierarchical models is often used, a hierarchical model is like a book of contents.
The main purpose of this article is to help you establish the concept of Threejs hierarchical model, which can be organized into a hierarchy through Threejs Group objects. You can also refer to the DOM tree in the front end, where Threejs form a tree structure of individual model objects just like HTML elements. You can select one or more model objects by a specific ID or name attribute.
In specific development process, 3 d art to give you a contains multiple hierarchy model of the mesh object, you may need to manipulate a mesh model, 3 d art at this time as long as through the model name tags, so for programmers, direct call a method of Threejs can traverse the entire model, find someone you want to operation model object.
Hierarchical model node naming, searching, traversal
Threejs The hierarchical model of the Scene and the sub-objects is a tree structure. If you have a certain algorithm foundation on the tree structure will be very familiar, if you know the front end of the DOM tree structure is also very helpful to understand, if these do not understand it does not matter, you can directly understand the following source code.
The concept of Threejs hierarchical model is introduced by the class Group of three.js. If you already have a certain concept of WebGL hierarchical model, focus on the Group directly. If you do not have the concept of hierarchical model, This concept is understood by the introduction of three. js APIGroup.
Model naming (.nameAttributes)
In the hierarchical model, some model objects can be labeled by naming the.name attribute.
group.add(Mesh)
// Name the mesh model
Mesh.name = "Eyes"
// Name the mesh parent object
group.name = "Head"
Copy the codeTree structure hierarchical model
In actual development, you might load an external model, and then look up a subobject from the model object by the node name.name. To make it easier for you to understand, instead of loading an external model, you can create a very simple robot model through code, and then operate on the robot.
// Head mesh model and group
var headMesh = sphereMesh(10.0.0.0);
headMesh.name = "Skull"
var leftEyeMesh = sphereMesh(1.8.5.4);
leftEyeMesh.name = "Left"
var rightEyeMesh = sphereMesh(1.8.5, -4);
rightEyeMesh.name = "Right"
var headGroup = new THREE.Group();
headGroup.name = "Head"
headGroup.add(headMesh, leftEyeMesh, rightEyeMesh);
// Body grid models and groups
var neckMesh = cylinderMesh(3.10.0, -15.0);
neckMesh.name = "Neck"
var bodyMesh = cylinderMesh(14.30.0, -35.0);
bodyMesh.name = "Stomach"
var leftLegMesh = cylinderMesh(4.60.0, -80, -7);
leftLegMesh.name = "Left"
var rightLegMesh = cylinderMesh(4.60.0, -80.7);
rightLegMesh.name = "Right"
var legGroup = new THREE.Group();
legGroup.name = "Legs"
legGroup.add(leftLegMesh, rightLegMesh);
var bodyGroup = new THREE.Group();
bodyGroup.name = "Body"
bodyGroup.add(neckMesh, bodyMesh, legGroup);
// 人Group
var personGroup = new THREE.Group();
personGroup.name = "People"
personGroup.add(headGroup, bodyGroup)
personGroup.translateY(50)
scene.add(personGroup);
// Sphere mesh model creation function
function sphereMesh(R, x, y, z) {
var geometry = new THREE.SphereGeometry(R, 25.25); // Sphere geometry
var material = new THREE.MeshPhongMaterial({
color: 0x0000ff
}); // The object is called "Material"
var mesh = new THREE.Mesh(geometry, material); // Create the mesh model object
mesh.position.set(x, y, z);
return mesh;
}
// Create a cylinder mesh model
function cylinderMesh(R, h, x, y, z) {
var geometry = new THREE.CylinderGeometry(R, R, h, 25.25); // Sphere geometry
var material = new THREE.MeshPhongMaterial({
color: 0x0000ff
}); // The object is called "Material"
var mesh = new THREE.Mesh(geometry, material); // Create the mesh model object
mesh.position.set(x, y, z);
return mesh;
}
Copy the code
Recursive traversal method.traverse()
The Threejs hierarchical model is a tree structure that can be recursively traversed through all the descendants of a Threejs model object by recursively traversing the following code to create a robot model or an externally loaded 3D model.
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 === "Left" | obj.name === "Right") {
obj.material.color.set(0x000000)}// Print the id attribute
console.log(obj.id);
// Prints the parent object of this object
console.log(obj.parent);
// Prints the children of this object
console.log(obj.children);
})
Copy the codeLook for a specific model
When you look at the.getobjectByid () and.getobjectByName () methods of Threejs, it’s easy to think of some DOM methods if you already have a front end foundation.
Like the front-end DOM, Threejs can find a descendant object of the parent element of the tree structure through a method. For ordinary front-end, one or more DOM elements can be found by name or ID. Threejs can also find a node in a model tree through some methods. See the base class Object3D for more details on finding methods and how to use them
// Iterates over the subobjects of the scene and returns the object corresponding to the id
var idNode = scene.getObjectById ( 4 );
console.log(idNode);
Copy the code// Iterates through the children of the search object, returning the object corresponding to the name (name can be repeated, return the first one)
var nameNode = scene.getObjectByName ( "Left" );
nameNode.material.color.set(0xff0000);
Copy the codeWrite in the last
This article introduces the concept of Threejs hierarchical model, including naming, finding, and traversal of hierarchical model nodes. I hope it will be helpful for you.
This article is published from yuntu 3D big front end team. Any unauthorized reprint of the article is prohibited.