当前位置:网站首页>Three. JS introductory learning notes 11:three JS group composite object
Three. JS introductory learning notes 11:three JS group composite object
2022-07-07 15:49:00 【Jiang Duoduo_ Mostly Harmless 】
Reference learning
http://www.yanhuangxueyuan.com/doc/Three.js/Group.html
https://blog.csdn.net/ithanmang/article/details/80965712
http://www.yanhuangxueyuan.com/Three.js/
https://www.cnblogs.com/guxingy/p/11956390.html
https://www.cnblogs.com/richardwlee/p/10573663.html
One . Concept
Explain the concept of hierarchy with a robot model , A whole robot passes through a group of objects Group1
, Then one leg uses a group object Group2
Express , One leg is assumed to contain two mesh models of thigh and calf Mesh
, Then the two mesh objects of the thigh and calf can be used as the parent legs Group2
Two sub objects of ,Group2
The two legs can be used as robots Group1
Two sub objects of , The hierarchy is as follows
robot - leg - The thigh , A lower leg Three levels .
If the robot position changes with the object , Legs also change .Mesh
If it is Group
The children of , be ,Mesh
Will follow Group
change .
Group
The base class of is Object3D
, Can pass Object3D
Create a parent object . It is recommended to use Group
As a point , Line , Parent objects of models such as Networks .
Two .add() and .remove() Method
1.add()
var mesh = new THREE.Mesh();
var group = new THREE.Group();
// Add the mesh model to the Group , yes group The children of
group.add(mesh);
//group Add to scene , group As a sub object of the scene
scene.add(group);
// If there are multiple, you can insert multiple at the same time
group.add(mesh1,mesh2);
var headMesh = sphereMesh(10, 0, 0, 0);
headMesh.name = " skull "
var leftEyeMesh = sphereMesh(1, 8, 5, 4);
leftEyeMesh.name = " The left eye "
var rightEyeMesh = sphereMesh(1, 8, 5, -4);
rightEyeMesh.name = " Right eye "
var headGroup = new THREE.Group();
headGroup.name = " Head "
headGroup.add(headMesh, leftEyeMesh, rightEyeMesh);
2.remove()
scene Scene Or group objects Group Of .remove() Methods use rules to view their base classes Object3D.
scene.remove(light, group);
Just remove the light and it will be dark
3、 ... and . Recursive traversal method .traverse()
You can traverse through the recursive algorithm Threejs All descendants of a model object , You can recursively traverse the above to create a robot model or an externally loaded three-dimensional model through the following code .
scene.traverse(function(obj){
if(obj.type === "Group"){
console.log(obj.name);
}
console.log(obj.id);
console.log(obj.parent);
console.log(obj.childeren);
})
Four . Find a model
// Traverse to find sub objects of the object , return name The corresponding object (name It can be renamed , Return to the first )
var nameNode = scene.getObjectByName("leftLeg");
nameNode.material.color.set(0xff0000);
// Traverse to find sub objects of the object , And back to id The corresponding object
var idNode = scene.getObjectById(4);
console.log(idNode);
Example
Set up mesh The name is “hello”, Let the name be hello Of mesh Turn green
var mesh = new THREE.Mesh(new THREE.CubeGeometry(5, 10, 20),
new THREE.MeshLambertMaterial({
color: 0xffff00
})
);
scene.add(mesh);
mesh.material = new THREE.MeshLambertMaterial({
color:0xff0000
});
mesh.position.set(10,10,10);
mesh.scale.set(0.1,0.1,0.1);
mesh.rotation.x = 90;
mesh.name = "hello";
var group = new THREE.Group();
group.name = "test";
group.add(mesh);
scene.add(group);
}
var nameNode = scene.getObjectByName("hello");
nameNode.material.color.set(0x00ff00);
5、 ... and . When picking an external model Group problem
Reference resources :
https://blog.csdn.net/ithanmang/article/details/80965712
When parsing external models, for example obj
When modeling, we often find 、 Load parsed parameters in anonymous functions object It's a Group
, Or currently we load the external model obj
For example , And then through Raycaster When the ray picks up the array, the object , When passed in scene.children
It is found that the model will not be selected , But some simple models created by ourselves will be selected .
This is because , The external model loaded will be in a Group
Group object , If direct scene.children
It's impossible to get , The model we created ourselves has not been put into Group
in , It belongs to scene.children
Of , So you can get . For example, we load a obj
Model , Take a look at his children
attribute .
After loading the page Scene
object
children
It's an array type , There are three elements , Two lights , One Group
object , among Group
The data in the object is obj
Model .
Example
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
color: 0x00ff00} );
var cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );
var cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );
// Create a group object , Add two cubes
// As a group object, these cube objects can be rotated 、 The zoom 、 wait ...
var group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );
scene.add( group );
Constructors
I don't understand here
function Group() {
Object3D.call( this );
this.type = 'Group';
}
Group.prototype = Object.assign( Object.create( Object3D.prototype ), {
constructor: Group,
isGroup: true
} );
Reference resources Object3D Object , Public methods .
.type string Returns the type of the object .
The problem remains to be solved
How to use Raycaster Pick to Group object
边栏推荐
- LeetCode3_ Longest substring without duplicate characters
- 15. Using the text editing tool VIM
- 居然从408改考自命题!211华北电力大学(北京)
- Nacos一致性协议 CP/AP/JRaft/Distro协议
- webgl_ Graphic transformation (rotation, translation, zoom)
- Whole process analysis of unity3d rendering pipeline
- Three. JS introductory learning notes 00: coordinate system, camera (temporarily understood)
- Syntax of generator function (state machine)
- Do you know the relationship between the most important indicators of two strong wind control and the quality of the customer base
- Database exception resolution caused by large table delete data deletion
猜你喜欢
【兰州大学】考研初试复试资料分享
Getting started with webgl (2)
numpy---基础学习笔记
The difference between full-time graduate students and part-time graduate students!
HW初级流量监控,到底该怎么做
postman生成时间戳,未来时间戳
Use of SVN
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
[target detection] yolov5 Runtong voc2007 data set
Webgl texture
随机推荐
【原创】一切不谈考核的管理都是扯淡!
居然从408改考自命题!211华北电力大学(北京)
【Markdown语法高级】让你的博客更精彩(四:设置字体样式以及颜色对照表)
What is Base64?
Oracle控制文件丢失恢复归档模式方法
有钱人买房就是不一样
Pit avoidance: description of null values in in and not in SQL
The bank needs to build the middle office capability of the intelligent customer service module to drive the upgrade of the whole scene intelligent customer service
[quick start of Digital IC Verification] 23. AHB sramc of SystemVerilog project practice (3) (basic points of AHB protocol)
The "go to definition" in VS2010 does not respond or prompts the solution of "symbol not found"
Do you know the relationship between the most important indicators of two strong wind control and the quality of the customer base
Getting started with webgl (2)
[deep learning] semantic segmentation experiment: UNET network /msrc2 dataset
Excerpted words
Matlab experience summary
Getting started with webgl (4)
Detailed explanation of unity hot update knowledge points and introduction to common solution principles
[target detection] yolov5 Runtong voc2007 data set
OpenGL's distinction and understanding of VAO, VBO and EBO
After UE4 is packaged, mesh has no material problem