Javascript ThreeJS：创建和渲染单个树木森林的更好方法？

我正在尝试渲染一个由100000多棵看起来非常简单的树组成的大森林。当然，创建多个单独的网格是不可能的。我当前的方法使用GeometryUtils.merge创建一个大的几何体，这样可以减少绘制调用的数量，效果非常好。但接近10万，它陷入了困境。我需要进一步提高性能，我有一种感觉，可能还有一两个技巧可以将性能提高10倍或更多

下面是代码，我还创建了一个JSFIDLE来演示我当前的技术：

//树几何体（两个相交的y垂直三角形）
var triangle=新的三个.Shape（）；
三角形。移动到（5，0）；
三角形。线形图（0，12）；
三角形.lineTo（-5,0）；
三角形.lineTo（5,0）；
var tree_Geometry 1=新的三个形状测量法（三角形）；
var矩阵=新的三个.Matrix4（）；
var tree_geometry2=新的三种形状测量法（三角形）；
tree_geometry2.applyMatrix（matrix.makeRotationY（Math.PI/2））；
//树木材料
var basic_material=新的3.MeshBasicMaterial（{color:0x14190f}）；
基本颜色=新的三种颜色（0x14190f）；
基本_材料侧=三个双面；
//合并到巨型几何体中以获得最大效率
var forest_geometry=new THREE.geometry（）；
var dummy=new THREE.Mesh（）；
对于（变量i=0；i<1000；i++）
{
dummy.position.x=Math.random（）*1000-500；
dummy.position.z=Math.random（）*1000-500；
假人位置y=0；
dummy.geometry=tree_geometry 1；
三.几何体.合并（森林几何体，虚拟）；
dummy.geometry=tree_geometry2；
三.几何体.合并（森林几何体，虚拟）；
}
//创建网格并添加到场景中
var forest_mesh=新的三个网格（forest_几何体、基本材料）；
场景。添加（森林网格）；

---

有人能提出进一步的技术来提高加载速度和渲染速度吗？

使用广告牌渲染树木怎么样？广告牌的2D特性似乎适合这个特殊问题。创建具有透明度的简单png树纹理，并将每棵树添加为点云对象-

大多数低端图形卡可以在不降低帧率的情况下渲染10000多个billboard对象。我已经使用billboards技术更新了您的代码（将树的数量更改为10000，并使用100像素高的树纹理）：-提取以下代码：

geometry = new THREE.Geometry();
sprite = new THREE.Texture(image);
sprite.needsUpdate = true;
for (var i = 0; i < 10000; i++) {
    var vertex = new THREE.Vector3();
    vertex.x = Math.random() * 1000 - 500;
    vertex.y = 0;
    vertex.z = Math.random() * 1000 - 500;
    geometry.vertices.push(vertex);
}
material = new THREE.PointCloudMaterial({
    size: 50,
    sizeAttenuation: true,
    map: sprite,
    transparent: true,
    alphaTest: 0.5
});
particles = new THREE.PointCloud(geometry, material);
// particles.sortParticles = true;
// Removed line above and using material.alphaTest instead
// Thanks @WestLangley
scene.add(particles);
renderer = new THREE.WebGLRenderer({
    clearAlpha: 1,
    alpha: true
});

geometry=new THREE.geometry（）；
雪碧=新的三个。纹理（图像）；
sprite.needsUpdate=true；
对于（变量i=0；i<10000；i++）{
var顶点=新的三个向量3（）；
vertex.x=Math.random（）*1000-500；
顶点y=0；
vertex.z=Math.random（）*1000-500；
几何。顶点。推（顶点）；
}
材料=新的三点云材料({
尺码：50，
尺寸评估：正确，
地图：雪碧，
透明：是的，
字母测试：0.5
});
粒子=新的三点云（几何体、材质）；
//particles.sortParticles=true；
//删除上面的行，并改用material.alphaTest
//谢谢@WestLangley
场景。添加（粒子）；
renderer=new THREE.WebGLRenderer({
clearAlpha:1，
阿尔法：是的
});

点云。正在删除sortParticles

。改用

material.alphaTest=0.5

。@WestLangley谢谢你。我已经更新了上面和JSFIDLE上的代码。帧率也大幅增加！哇，非常感谢你在一年后回答这个问题！正是我需要的。我已经搁置了这个项目。。。迫不及待地想重新打开它。我创建了一个代码，可以获取卫星图像和高程数据，并重建地球的任何部分，以便在3D中进行探索。树是让它看起来非常逼真的关键，但我的方法是拖累cpu。这会有很大帮助！

geometry = new THREE.Geometry();
sprite = new THREE.Texture(image);
sprite.needsUpdate = true;
for (var i = 0; i < 10000; i++) {
    var vertex = new THREE.Vector3();
    vertex.x = Math.random() * 1000 - 500;
    vertex.y = 0;
    vertex.z = Math.random() * 1000 - 500;
    geometry.vertices.push(vertex);
}
material = new THREE.PointCloudMaterial({
    size: 50,
    sizeAttenuation: true,
    map: sprite,
    transparent: true,
    alphaTest: 0.5
});
particles = new THREE.PointCloud(geometry, material);
// particles.sortParticles = true;
// Removed line above and using material.alphaTest instead
// Thanks @WestLangley
scene.add(particles);
renderer = new THREE.WebGLRenderer({
    clearAlpha: 1,
    alpha: true
});