Three.js 合并geometry 出现的问题

项目场景:

再Three.js 中需要建立一个立方体方框geometry

问题描述:

最初使用blender 直接建模,导出gltf然后使用gltf加载器加载,但是出现了异步调用的问题,尝试解决失败后果断放弃,使用BoxBufferGeometry构建12条边再组合成一个立方体方框,再使用merge合并时候出现了许多问题


一、立方体方框

成功构建的立方体方框
在这里插入图片描述

二、问题与解决方案

1.问题

在three.js 官网参考上查询到BufferGeometryUtils.mergeBufferGeometries方法合并BufferGeometry出现以下问题


在这里插入图片描述

let meger = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries);

控制台出现报错信息在这里插入图片描述
显示不存在这个属性,反复查证后,仍然没有解决,当前安装的Three.js 版本为R128,尝试回退版本到R110,出现 geometry.applyMatrix4这个未定义,大概是那个版本没有,尝试回退到中间版本,不是图中问题就是 geometry.applyMatrix4未定义,放弃这个方法。
使用旧方法回退版本至R110,放弃使用BufferGeometry,尝试旧方法成功解决,在新版本中已经不具备 new THREE.Geometry(); 所以回退。

2.立方体方框构建函数 R110中使用没问题

export function CubeWireFrame(size,thickness){
    var cubeGeometry = new THREE.Geometry();
    var mesh,geometry,material = new THREE.MeshNormalMaterial();
    var x,y,z;

    var array2d=[[1,1],[-1,1],[-1,-1],[1,-1]];

    var p=(size - thickness)/2;

    x = thickness;
    y = thickness;
    z = size - 2 * thickness;

    for(let i=0;i<4;i++){
        geometry = new THREE.BoxGeometry(x,y,z);
        mesh = new THREE.Mesh(geometry , material);
        mesh.position.x = array2d[i][0] * p; 
        mesh.position.y = array2d[i][1] * p;
        mesh.position.z = 0;
        mesh.updateMatrix();

        cubeGeometry.merge(mesh.geometry , mesh.matrix);
    }

    x = z;
    z = y;

    for(let i=0;i<4;i++){
        geometry = new THREE.BoxGeometry(x,y,z);
        mesh = new THREE.Mesh(geometry , material);
        mesh.position.x = 0;
        mesh.position.y = array2d[i][0] * p;
        mesh.position.z = array2d[i][1] * p; 
        mesh.updateMatrix();

        cubeGeometry.merge(mesh.geometry , mesh.matrix);
    }

    x = y;
    y = size;

    for(let i=0;i<4;i++){
        geometry = new THREE.BoxGeometry(x,y,z);
        mesh = new THREE.Mesh(geometry , material);
        mesh.position.x = array2d[i][0] * p;
        mesh.position.y = 0;
        mesh.position.z = array2d[i][1] * p; 
        mesh.updateMatrix();

        cubeGeometry.merge(mesh.geometry , mesh.matrix);
    }

    return cubeGeometry;
}

3.使用InstancedMesh

在这里插入图片描述
对于我来说不使用buffer的形式性能也足够,实际上只需要渲染一个222 的方框组,GPU位1050 2G 222占用4%。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值