Question

所以我正在开发一个项目，我有大约59k点，每个点应该表示为three.js中的一个立方体。

我将所有几何图形组合在一起，形成一个网格以提高性能，但它仍然非常慢（大约10-30 fps）。

我该如何改进？对于这个项目来说，让它平稳运行（比如大约40-60 fps）是可以接受的，所以我真的需要一些改进。

这是我创建网格和场景的代码：

function init() {

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

camera.position.set(230.09813315369976, 233.67707474083232, -181.06937619976165);
camera.updateProjectionMatrix();

THREE.currentCamera = camera;

if (controlsEnabled) {
    controls = new THREE.OrbitControls(camera);
    controls.damping = 0.2;
}
scene = new THREE.Scene();

geometry = new THREE.Geometry();
material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false});
console.log("Adding " + locations.length + " voxels");

var matrix = new THREE.Matrix4();

$.each(locations, function (index, value) {
    geo = new THREE.BoxGeometry(1, 1, 1);

    matrix.makeTranslation(
            value['x'],
            0,
            value['y']
            );

    geometry.merge(geo, matrix);
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
axes = new THREE.AxisHelper(100);
scene.add(axes);
camera.lookAt(mesh);
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
var element = renderer.domElement;
document.getElementById('page-wrapper').appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
var flag = 0;
element.addEventListener("mousedown", function () {
    flag = 0;
}, false);
element.addEventListener("mousemove", function () {
    flag = 1;
}, false);
element.addEventListener("mouseup", function () {
    if (flag === 0) {
        console.log("click");
        doRaycast = true;
    }
    else if (flag === 1) {
        console.log("drag");
    }
}, false);
$('#loading-vis').hide();
animate();

}

Answer 1

虽然将几何体批量化为尽可能少的绘制调用确实是一种优化，但这并不是那么简单。

我无法准确解释引擎盖下的内容，但最安全和最简单的方法是在所谓的“三角汤”中发出一个小于65536个三角形（2 ^ 16）的绘制调用。

发生了什么事情是你把所有东西都分成几个几何体，但是在引擎盖下，索引几何体上发生了一些混乱的事情，或者某种程度上几何体被分解成更少的碎片。

解决方案不是将所有内容批量分成一个geom，而是多个，每个都有少于65536个三角形。

针对大网格优化three.js

1 个答案: