项目场景:
再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%。