three.js 性能优化的几种方法

three.js性能优化

尽量重用Material和Geometry

这里以Material和Geometry为例（使用比较频繁）

   for (var i = 0; i < 100; i++) {
        var material = new THREE.MeshBasicMaterial();
        var geometry = new THREE.BoxGeometry(10, 10, 10);

        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
    }

改为

    var material = new THREE.MeshBasicMaterial();
    var geometry = new THREE.BoxGeometry(10, 10, 10);

    for (var i = 0; i < 100; i++) {
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
    }
    

谨慎的在render()中操作

一般FPS为60也就意味着一秒会执行60次如果render()中有有实例化或是赋值操作很容易会崩溃。

如下：

function render() {

    material.map = canvasMap;
    material.map.needsUpdate = true;

}

选择合适的对象

THREE.ParticleSystem(粒子系统)代替THREE.Particle(粒子)

    for (var x = -5; x < 5; i++) {
        for (var y = -5; y < 5; y++) {
            var particle = new THREE.Particle(material);
            particle.position.set(x * 10, y * 10, 0);
            scene.add(particle);
        }
    }

代替

    var geometry = new THREE.Geometry();
    var material = new THREE.ParticleBasicMaterial();

    for (var x = -5; x < 5; i++) {
        for (var y = -5; y < 5; y++) {
            var particle = new THREE.Vector3(x * 10, y * 10, 0);
            geometry.vertices.push(particle);
        }
    }

    var system = new THREE.ParticleSystem(geometry,material);

    scene.add(system);

要操作一组对象时使用 THREE.Object3D

  var contain = new THREE.Object3D(); 

    var material = new THREE.MeshBasicMaterial();
    var geometry = new THREE.BoxGeometry(10, 10, 10);

    for (var i = 0; i < 100; i++) {
        var mesh = new THREE.Mesh(geometry, material);
        contain.add(mesh);
    }

contain.rotation.x = Math.PI/3;

网格合并 THREE.GeometryUtils.merge

    var geometry = new THREE.BoxGeometry(5, 5, 5);
    var material = new THREE.MeshBasicMaterial({color: 0xff0000});

    for (var i = 0; i < 100; i++) {

        THREE.GeometryUtils.merge(geometry, new THREE.BoxGeometry(5, 5, 5));
    }

    var mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
    
    

或是一下方式（geometry有位置信息）

    var geometry = new THREE.BoxGeometry(5, 5, 5);
    var material = new THREE.MeshBasicMaterial({color: 0xff0000});
    
    var mesh = new THREE.Mesh(geometry,material);
    mesh.position.set(10,10,10);
    
    var mGeo = new THREE.BoxGeometry(10, 2, 10);
    
    THREE.GeometryUtils.merge(mGeo, mesh);


    scene.add(new THREE.Mesh(mGeo, material));

R80 THREE.GeometryUtils.merge() change to geometry.merge()

        var geometry = new THREE.BoxGeometry(2, 4, 2);
        
        var mGeo = new THREE.BoxGeometry(5, 5, 5);

        var matrix = new THREE.Matrix4();

        for(var i=0;i<100;i++){

            matrix.setPosition(new THREE.Vector3(Math.random()*10,0,Math.random()*10));
            geometry.merge(mGeo, matrix);
        }


            var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color:                     0xff0000}));
        scene.add(mesh);
        

参考地址：

   1， https://www.cnblogs.com/chenjy1225/p/9640562.html
   2， https://humanwhocodes.com/blog/2009/08/11/timed-array-processing-in-javascript/
   3，https://threejs.org/examples/?q=sand#css3d_sandbox