使用ThreeJs搭建BIM模型瀏覽器，第九步-內存優化(1)

添加到場景的mesh，是通過geometry+materail生成的。如果場景內大量重複的構件，或者大量的構件的材質都是相同的，threejs提供這種方案節省內存：共享geometry 和materail。舉例說明：

創建300個一樣的圓，一般情況可能會寫成下面這樣

for (let i = 0; i < 300; i++) {
	let geometry = new THREE.BoxGeometry(10, 10, 10);
    let material = new THREE.MeshLambertMaterial({color: 0x00ffff});
    let mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200));
    group.add(mesh);
}

優化的方法是這樣寫：

let geometry = new THREE.BoxGeometry(10, 10, 10);
let material = new THREE.MeshLambertMaterial({color: 0x00ffff});
for (let i = 0; i < 300; i++) {
    let mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200));
    group.add(mesh);
}

注意了，大佬的博客都點到爲止，不會告訴你這樣的弊端，你一試就知道在BIM瀏覽器這樣做會存在的問題！

因爲所有的構件都共享了materail，你怎麼實現點擊選中，點擊選中之後給構件賦予顏色，結果所有同類構件都被渲染成相同的顏色！因爲materail是共享的，對materail改個顏色會感覺被選中了一大片。

解決思路很簡單，簡單到我都沒代碼可分享：針對選中的構件（或者要賦予顏色的構件），臨時替換一個materail即可（曲線救國）！

以前每個構件的紋理材質單獨創建時，可以直接賦予顏色，如下圖：

現在賦予顏色可以新建一個material給它。當然material新建之後也要管理好，以免內存膨脹；舊的材質紋理要緩存起來，用於恢復默認。相當於給構件弄了個新的包裝盒，舊的也別丟掉，還要用的。

Revit自帶的這個模型叫做Arch Link Model.rvt，它的材質有點多，有42種，即使這樣也明顯節省了20%的內存。如果是機電專業，管道設備幾乎不在意材質，都是通用的材質紋理，一共就不需要創建幾個material,估計會有驚喜。

這是第一步內存優化，針對材質紋理的。後面還會針對Revit導出的幾何體進行分析，計算相同形狀的構件，以實現文件的壓縮和前端的提效。