THREE 大量模型加载优化

THREE 大量模型加载优化

测试10W以上盒子性能

第一种方法加载完毕后FPS为60;同一个合并只能使用一种材质
第二种加载完毕后15;
合并之后模型的射线拾取

//第一种
const random = () => { 
    return THREE.Math.randInt(-1000,1000);
}
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
function addCube(){
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var cube = new THREE.Mesh(geometry);
    return cube
} 
var geometry = new THREE.Geometry();
console.time() 
let index = 0
while(index<100000){
    var cube = addCube(); //创建了一个随机位置的几何体模型
    cube.position.x = random()
    cube.position.y = random()
    cube.position.z = random()
    cube.updateMatrix(); //手动更新模型的矩阵
    geometry.merge(cube.geometry, cube.matrix); //将几何体合并
    index++
}
console.timeEnd();
scene.add(new THREE.Mesh(geometry,material));
//第二种
console.time() 
while(index<100000){
    var cube = addCube(); //创建了一个随机位置的几何体模型
    scene.add(cube);
    index++
}
console.timeEnd() 

QQ交流群:1082834010

你可能感兴趣的:(THREE)