本文旨在記錄榨婆，“如有錯漏之處，敬請指正
1褒侧、模型刪除時良风，釋放內(nèi)存
不僅僅是調(diào)用scene.remove(mesh)刪除谊迄，還需要刪除該模型占用的內(nèi)存，使用dispose()方法,下面是我的寫法烟央，網(wǎng)上還有其他很多優(yōu)秀的寫法统诺，百度百度都有
// 優(yōu)化刪除模型
removeModel(parentGroup, group){
parentGroup.remove(group);
if (!this.$isEmpty(group)) {
group.traverse(child => {
if (child instanceof THREE.Mesh || child instanceof THREE.Line) {
this.disposeMaterial(child.material);
child.geometry.dispose && child.geometry.dispose();
} else {
this.disposeMaterial(child.material);
}
});
group = null;
}
},
// 自己寫的材質(zhì)貼圖釋放
disposeMaterial(material) {
if (material instanceof THREE.Material) {
for (const value of Object.values(material)) {
if (value instanceof THREE.Texture) {
value.dispose();
}
}
if (material.uniforms) {
for (const value of Object.values(material.uniforms)) {
if (value) {
const uniformValue = value.value;
if (uniformValue instanceof THREE.Texture) {
uniformValue.dispose();
}
if(Array.isArray(uniformValue)){
uniformValue.length = 0;
}
}
}
}
material.dispose();
}
},
2、使用vue的時候疑俭，除非必要使用響應(yīng)式的數(shù)據(jù)粮呢，都不要綁定到data上
比如場景scene,相機(jī)camera之類的
可以類似我這么寫
let scene = null; // 場景
let camera = null; // 攝像機(jī)
let container = null; // 畫布
let renderer = null; // 渲染器
let animationFrameId = null; // 記錄AnimationFrame
let controls = null; // 控制器
let mouse = null; // 獲取鼠標(biāo)
let rayCaster = null; // 獲取射線
let composer = null; // 后期處理
let renderPass = null; // 后期處理 渲染通道
let css3DRenderer = null; // 標(biāo)簽
data() {
return {
optionsData: {}, // 接口數(shù)據(jù)
optionsSetUp: {}, // 配置數(shù)據(jù)
};
},
3、離開頁面記得銷毀threejs的很多對象（太多了钞艇，如控制器）
將下面的代碼放在destoryed中
beforeDestroy() {
// 銷毀內(nèi)存中的threejs
this.destroyThreejs();
},
// 銷毀threejs
destroyThreejs() {
try {
cancelAnimationFrame(animationFrameId); // animationFrameId = requestAnimationFrame(this.render);
renderer.dispose();
renderer.forceContextLoss();
renderer.content = null;
let gl = renderer.domElement.getContext("webgl");
if (gl && gl.getExtension("WEBGL_lose_context")) {
gl.getExtension("WEBGL_lose_context").loseContext();
}
renderer = null;
camera = null;
scene.traverse((child) => {
if (child.material) {
child.material.dispose();
}
if (child.geometry) {
child.geometry.dispose();
}
child = null;
});
scene = null;
} catch (e) {
console.error('Failed to destroy threejs', e);
}
},
4啄寡、查看是不是有哪里代碼寫錯了，一直往場景中添加模型香璃，可以不定時打印下看看場景中有多少模型
// 查看場景中的模型數(shù)量
getSceneModelFaceNum(view) { // 將scene傳進(jìn)去
let objects = 0; // 場景模型對象
let triangles = 0; // 模型面片
for (let index = 0; index < view.children.length; index++) {
let object = view.children[index];
object.traverse(obj => {
objects ++;
if (obj instanceof THREE.Mesh || object instanceof THREE.Line) {
let geometry = obj.geometry;
if (geometry instanceof THREE.BufferGeometry) {
if (geometry.index && geometry.index.count) {
triangles += geometry.index.count
} else if (geometry.attributes.position) {
const pos = geometry.attributes.position
if (pos.count && pos.itemSize) {
triangles += Math.round(pos.count / pos.itemSize)
}
}
}
}
});
}
console.log('模型對象數(shù)量: ' + objects, '模型面片數(shù): ' + triangles);
},
5这难、對只用來展示的模型合并舟误，線段合并
代碼可查看我以前的文章threejs 引入外部模型（fbx）后葡秒，合并模型渲染
threejs 大量線段Line合并（貝塞爾曲線或者直線）
其他想到再補(bǔ)充
