Question

我需要使用一个尺寸为1x1x1的立方体来构建地形，坐标在.txt文件中提供，并且大约有11M三元组。

问题是使用我当前的代码我只能绘制大约60k的代码，然后重置浏览器选项卡并提示停止无响应的脚本，因此我使用了太多的内存和时间来生成它们。 / p>

以下是我用来绘制它们的代码块：

function generateCubes(data) {
    var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);
    var material = new THREE.MeshLambertMaterial({color: 0x587058});
    var mesh = new THREE.Mesh(cubeGeometry, material);
    var mergedGeo = new THREE.Geometry();
    var instance;
    var line = data[0].split(';');
    var translateX = line[0], translateY = line[1], translateZ = line[2];
    //var group = new THREE.Object3d();
    for(var i = 0; i < 100000; i++) { // should go to data.length
        line = data[i].split(';');
        //instance = mesh.clone();
        //instance.position.set(line[0] - translateX, line[2] - translateZ, line[1] - translateY);
        //group.add(instance);
        mesh.position.x = Number(line[0]) - translateX;
        mesh.position.y = Math.round(Number(line[2]) - translateZ);
        mesh.position.z = Number(line[1]) - translateY;
        mesh.updateMatrix();
        mergedGeo.merge(instance.geometry, instance.matrix);
    }
    group = new THREE.Mesh(mergedGeo, material);
    scene.add(group);
}

在$ .ajax调用中成功调用该函数。

评论的部分在没有合并几何的情况下使用，这样我就可以绘制大约100k的数据。

感谢您帮助我。

编辑：我看到this question并没有帮助我。

Answer 1

您正在寻找的是体素渲染。实现此目的的两个主要渲染路径：A）体积渲染，但webgl缺乏硬件3d纹理支持。 B）网格表面生成和标准多边形渲染。可能是你唯一的选择。不要认为在公共场合有任何好的高效js实现。

你需要做什么。

将你的世界划分为相同维度的块，块尺寸可能需要2的幂才能更快他们的行动。
想出一个可以存储11M体素数据的数据结构。这可能需要在Int32Arrays的某些安排中使用在每个体素上访问/存储数据的位操作符。
对于每个块，生成表面网格。请参阅link。
对于远离相机的块，想出一些方案可以生成低LOD的网格（可选）。
从前到后渲染可见平截头体中的所有块顺序。

绘制一个立方体一百万次

1 个答案: