webgl three 项目常用操作

分组

    const group1 = new THREE.Group(); //所有高层楼的父对象
    group1.name = "高层";
    for (let i = 0; i < 5; i++) {
        const geometry = new THREE.BoxGeometry(20, 60, 10);
        const material = new THREE.MeshLambertMaterial({
            color: 0x00ffff
        });
        const mesh = new THREE.Mesh(geometry, material0);
        mesh.position.x = i * 30; // 网格模型mesh沿着x轴方向阵列
        group1.add(mesh); //添加到组对象group1
        mesh.name = i + 1 + '号楼';
        // console.log('mesh.name',mesh.name);
    }
    group1.position.y = 30;
    const group2 = new THREE.Group();
    group2.name = "洋房";
    // 批量创建多个长方体表示洋房
    for (let i = 0; i < 5; i++) {
        const geometry = new THREE.BoxGeometry(20, 30, 10);
        const material = new THREE.MeshLambertMaterial({
            color: 0x00ffff
        });
        const mesh = new THREE.Mesh(geometry, material0);
        mesh.position.x = i * 30;
        group2.add(mesh); //添加到组对象group2
        mesh.name = i + 6 + '号楼';
    }
    group2.position.z = 50;
    group2.position.y = 15;
    const model = new THREE.Group();
    model.name = '小区房子';
    model.add(group1, group2);
    model.position.set(-50, 0, -25);
    scene.add(model);
    console.log(scene.children)

把模型分组后可以通过group设置一些共有属性 比如例子中的房子在x轴平铺 y、z是相同的
子项的位置是相对于父项的位置确定的 比如父项x为-30 子项为0 那么子项的实际位置在-30
这样设置有利于把一个整体一起放在图上 而不用一个一个设置坐标

遍历节点

//遍历节点 obj为节点 obj.属性可以进行判断
    model.traverse(function (obj) {
        console.log('所有模型节点的名称', obj.name);
        // obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'
        if (obj.isMesh) {//判断条件也可以是obj.type === 'Mesh'
            obj.material.color.set(0xffff00);
        }
    });

指定属性获取

    // 通过name获取
    const nameNode = scene.getObjectByName("4号楼");
    console.log(nameNode);
    //通过指定属性获取
    const nameNode1 = scene.getObjectByProperty("name", "3号楼");
    console.log(nameNode1);

根据id获取会报错 id是只读属性 最好还是不要使用id

获取世界位 三维向量

大部分世界位不在属性上

    
    //获取指定模型的世界坐标
    const worldPosition = new THREE.Vector3();
    nameNode.getWorldPosition(worldPosition);
    //获取缩放
    const worldScale = new THREE.Vector3();
    nameNode.getWorldScale(worldScale); 
    console.log(worldPosition);

移除指定节点

  //移除要在要移除节点的父节点上移除
    group1.remove(nameNode);
    console.log(model.children);
    //移除多个
    group1.remove(nameNode, nameNode1);

显示/隐藏

     //隐藏模型/组
    group1.visible = false;
    //隐藏材质 隐藏材质后所有相关的模型都会隐藏
    nameNode.material.visible =false;