three.js 层级模型节点命名、查找、遍历

最新推荐文章于 2023-09-20 16:58:08 发布

汉武大帝·

最新推荐文章于 2023-09-20 16:58:08 发布

阅读量1.4k

点赞数

分类专栏： three.js 文章标签： javascript mesh maya

本文链接：https://blog.csdn.net/yinge0508/article/details/122965141

版权

three.js 专栏收录该内容

112 篇文章 11 订阅

订阅专栏

效果如下：

代码：

<!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>

汉武大帝·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js 层级模型节点命名、查找、遍历

效果如下：代码：<!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"> <titl.
复制链接

扫一扫