Question

首先，我是three.js的新手，我正在研究一个模块，在该模块中必须显示一个旋转的地球仪，地球仪上有标记。我已经在地球上绘制了标记，并且在标记上有一些工具提示和click事件，对于小型数据集，一切工作正常，但是在地球上绘制超过5000个标记时，fps下降了。我想要一个顺利的经历。我知道我可以合并几何图形，但是我不知道该怎么做。

建议和优化以获得流畅的体验。谢谢！！

data.forEach((markerData) => {
        if (markerData.geolocation) {
            const lat = markerData.geolocation.latitude;
            const lon = markerData.geolocation.longitude;
            const radius = 0.004;
            let height = 2.5;

            const materialRedLines = new THREE.LineBasicMaterial({
                color: "#f62e2e",
                linewidth: 1,
                linecap: 'round', 
                linejoin: 'round' 
            });

            let marker = new THREE.Mesh(
                new THREE.CylinderBufferGeometry(
                    radius,
                    0.001,
                    height,
                    30
                ),
                materialRedLines
            );
            marker.position.y = height * 0.5;
            marker.rotation.x = Math.PI;

            const latRad = lat * (Math.PI / 180);
            const lonRad = -lon * (Math.PI / 180);
            const r = 1.0;

            marker.position.set(
                Math.cos(latRad) * Math.cos(lonRad) * r,
                Math.sin(latRad) * r,
                Math.cos(latRad) * Math.sin(lonRad) * r
            );
            marker.rotation.set(0.0, -lonRad, latRad - Math.PI * 0.5);
            this.markerGroup.add(marker); // Group element which i add to the scene
        }
    });

Answer 1

如果它们确实是静态的。确保在标记上执行了updateMatrixWorld（），然后将其.matrixAutoUpdate设置为false。这将节省大量矩阵操作，而当您需要更改单个标记时，需要进行一些手动整理。如果您需要更多方法，可以尝试实例化或合并。实例化在概念上稍微复杂一些。

首先尝试matrixAutoUpdate = false技巧，看看有什么帮助。

还可以考虑使用比圆柱更简单的东西，例如带有w纹理的带有圆纹理的Three.sprite，将其作为切口。如果您要在30 * 4的三角形上做5000个标记，那么仅在标记上就有大约600,000个三角形。使用精灵会使三角形的数量减少到10,000个左右。

Threejs合并几何以提高性能

1 个答案: