1、merge方法合并
多数情况下使用组可以很容易地操纵和管理大量网格。但是当对象的数量非常多时,性能就会成为一个瓶颈。使用组,每个对象还是独立的,仍然需要对它们分别进行处理和渲染。通过THREE.Geometry.merge()
函数,你可以将多个几何体合并起来创建一个联合体。
当我们使用普通组的情况,绘制20000个立方体,帧率在15帧左右,如果我们选择合并以后,再绘制两万,就会发现,我们可以轻松的渲染20000个立方体,而且没有性能的损失。合并的代码如下:
//合并模型,则使用merge方法合并
var geometry = new THREE.Geometry();
//merge方法将两个几何体对象或者Object3D里面的几何体对象合并,(使用对象的变换)将几何体的顶点,面,UV分别合并.
//THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead.
for(var i=0; i<gui.numberOfObjects; i++){
var cube = addCube();
cube.updateMatrix();
geometry.merge(cube.geometry, cube.matrix);
}
scene.add(new THREE.Mesh(geometry, cubeMaterial));
THREE.GeometryUtils.merge()
已经将此方法移动到了THREE.Geometry
对象的上面了,我们使用addCube
方法进行立方体的创建,为了确保能正确的定位和旋转合并的THREE.Geometry
对象,我们不仅向merge
函数提供THREE.Geometry
对象,还提供该对象的变换矩阵。当我们将此矩阵添加到merge
函数后,那么合并的方块将被正确定位。
和组的优缺点对比
- 缺点:组能够对每个单独的个体进行操作,而合并网格后则失去对每个对象的单独控制。想要移动、旋转或缩放某个方块是不可能的。
- 优点:性能不会有损失。因为将所有的的网格合并成为了一个,性能将大大的增加。
- 如果需要创建大型的、复杂的几何体。我们还可以从外部资源中创建、加载几何体。
2、搭建架子的思路
假设变量含义如下:
最底层的高度:bottomHight
每排库位组X轴位置:positionX
每排库位组Y轴位置:positionY
每排库位组Z轴位置:positionZ
每排库位组X轴方向数量:binXNum
每排库位组Y轴方向数量:binYNum
每排库位组Z轴方向数量:binZNum
库位长:binLength
库位宽:binWidth
库位高:binHeight
a、货架的柱子
长:可配置的固定数值(rackLengh = 3)
宽:可配置的固定数值 ( rackWidth = 3)
高(rackHeight):bottomHight+(binYNum-1)*binHeight
左侧柱子X: positionX-binLength/2+rackLengh /2
右侧柱子X:positionX+binLength/2-rackLengh /2
柱子Y轴坐标:positionY-binHeight/2
柱子Z轴坐标:positionZ-(this.binZNum * this.binWidth/2)+i * binWidth+rackWidth/2
b、托板
长:库位的长
宽:库位的宽
高:默认为2
X轴:positionX
Y轴坐标:bottomHight+positionY-binHeight/2-rackHeight/2+ j * this.binHeight
Z轴坐标:positionZ - shelfWidth/2+binWidth/2+i * this.binWidth
项目应用:
下面是我们创建货架的核心代码:
unction StoreShelf(option) {
this.binLength = option.BinLength||50;//库位长度
this.binWidth = option.BinWidth||50;//库位宽
this.binHeight = option.BinHeight||50;//库位高
this.binXNum = option.BinXNum||1;//库位X轴方向库位数量
this.binZNum = option.BinZNum||10;//库位Z轴方向库位数量
this.binYNum = option.BinYNum||