效果如下:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层级模型节点命名、查找、遍历</title>
<script src="../three.js"></script>
<script src="../OrbitControls.js"></script>
</head>
<body>
<script>
// 创建球模型的方法
function sphereGeometry(r,x,y,z){
var sphere_geometry = new THREE.SphereGeometry(r,25,25);
var sphere_material = new THREE.MeshPhongMaterial({color:0x00ffff});
var mesh = new THREE.Mesh(sphere_geometry,sphere_material);
mesh.position.set(x,y,z);
return mesh;
}
// 创建圆柱体模型的方法
function cylinderGeometry(r1,r2,h,x,y,z){
var cylinderGeometry = new THREE.CylinderGeometry(r1,r2,h,20);
var cy_material = new THREE.MeshPhongMaterial({color:0x00ffff});
var mesh = new THREE.Mesh(cylinderGeometry,cy_material);
mesh.position.set(x,y,z);
return mesh;
}
// 创建长方体模型的方法
function boxGeometry(xw,yh,zh,x,y,z){
var boxGeometry = new THREE.BoxGeometry(xw,yh,zh);
var bm_material = new THREE.MeshPhongMaterial({color:0x00ffff});
var mesh = new THREE.Mesh(boxGeometry,bm_material);
mesh.position.set(x,y,z);
return mesh;
}
// 1,创建场景
var scene = new THREE.Scene();
// 2,创建几何模型
var headMesh = sphereGeometry(100,0,0,0);
headMesh.name = "脑壳";
var leftEyeMesh = sphereGeometry(20,80,30,60);
leftEyeMesh.name = "左眼";
var rightEyeMesh = sphereGeometry(20,80,30,-60);
rightEyeMesh.name = "右眼";
// 创建头组对象
var headGroup = new THREE.Group();
headGroup.add(headMesh,leftEyeMesh,rightEyeMesh);
// scene.add(headGroup);
// 创建身体的几何体
var bodyNeck = cylinderGeometry(50,50,40,0,-100,0);
bodyNeck.name = "脖子";
var lefthand = cylinderGeometry(50,50,350,0,-180,-200);
lefthand.name = "左手";
lefthand.rotateX(Math.PI/2);
var rightHand = cylinderGeometry(50,50,350,0,-180,200);
rightHand.rotateX(Math.PI/2);
var abdomen = boxGeometry(200,300,300,0,-270,0);
abdomen.name = "肚子";
var bodyGroup = new THREE.Group();
bodyGroup.add(bodyNeck,abdomen,lefthand,rightHand);
scene.add(bodyGroup);
var allGroup = new THREE.Group();
// scene.add(headGroup);
allGroup.add(bodyGroup,headGroup);
scene.add(allGroup);
// 3,创建灯光
var apointLight = new THREE.PointLight({color:0xffffff});
var apointLight2 = new THREE.PointLight({color:0xffffff});
var apointLight3 = new THREE.PointLight({color:0xffffff,intensity:1 });
apointLight.position.set(300,300,300);
apointLight2.position.set(-300,300,-300);
apointLight3.position.set(300,-500,300);
// scene.add(ambientLight);
scene.add(apointLight,apointLight2,apointLight3);
var pointLightHelper = new THREE.PointLightHelper(apointLight,50);
// scene.add( pointLightHelper );
// 4,创建相机(远景相机)
var width = window.innerWidth;
var height = window.innerHeight;
var k = 2*width / height;
var s = 500;
var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-2000,2000);
camera.position.set(200,300,200);
camera.lookAt(scene.position);
// 添加坐标轴
var axesHelper = new THREE.AxesHelper(400);
scene.add(axesHelper);
// 5,创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
function render(){
renderer.render(scene,camera);
allGroup.rotateY(0.01); // 1弧度=(180/π)°
requestAnimationFrame(render);
}
render();
// 6,创建鼠标控制对象
var controls = new THREE.OrbitControls(camera,renderer.domElement);
// controls.addEventListener('change',render);
console.log('scene',scene);
// 递归遍历方法
scene.traverse(obj => {
console.log('obj:',obj);
})
// 查找某个具体的模型
var idNode = scene.getObjectById(4)
console.log(idNode);
var nameNode = scene.getObjectByName("左眼");
console.log(nameNode);
</script>
</body>
</html>