Javascript Three.js：使用alpha颜色绘制大量三角形（50k+；）的最佳方法

我目前正在构建一个web应用程序来可视化CAD/CAE数据

data 

是一个包含所有三角形的数组

我的绘制三角形的第一种方法是创建一个几何体：

triangles = new THREE.Geometry();

然后向其中添加所有三角形：

 for (var i = 0; i < data.triangles.length; i++) {
    triangles.vertices.push(new THREE.Vector3(data.triangles[i][0].x, data.triangles[i][0].y, data.triangles[i][0].z));
    triangles.vertices.push(new THREE.Vector3(data.triangles[i][1].x, data.triangles[i][1].y, data.triangles[i][1].z));
    triangles.vertices.push(new THREE.Vector3(data.triangles[i][2].x, data.triangles[i][2].y, data.triangles[i][2].z));
    triangles.faces.push(new THREE.Face3(0,1,2));
    triangles.faces[i].vertexColors[0] = new THREE.Color(0xFF0000);
    triangles.faces[i].vertexColors[0].setRGB(data.triangles[i][0].r, data.triangles[i][0].g, data.triangles[i][0].b);
    triangles.faces[i].vertexColors[1] = new THREE.Color(0x00FF00);
    triangles.faces[i].vertexColors[1].setRGB(data.triangles[i][1].r, data.triangles[i][1].g, data.triangles[i][1].b);
    triangles.faces[i].vertexColors[2] = new THREE.Color(0x0000FF);
    triangles.faces[i].vertexColors[2].setRGB(data.triangles[i][2].r, data.triangles[i][2].g, data.triangles[i][2].b);
    lvar += 3;
 }

并将网格添加到我的场景对象中

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

到目前为止，这种方法效果很好，但因为我只使用了一种材质，我不知道如何将alpha添加到顶点颜色中

我的第二种方法是为每个三角形创建一个几何体

for (var i = 0; i < data.triangles.length; i++) {
   triangles = new THREE.Geometry();
   triangles.vertices.push(new THREE.Vector3(data.triangles[i][0].x, data.triangles[i][0].y, data.triangles[i][0].z));
   triangles.vertices.push(new THREE.Vector3(data.triangles[i][1].x, data.triangles[i][1].y, data.triangles[i][1].z));
   triangles.vertices.push(new THREE.Vector3(data.triangles[i][2].x, data.triangles[i][2].y, data.triangles[i][2].z));
   triangles.faces.push(new THREE.Face3(0,1,2));
   triangles.faces[i].vertexColors[0] = new THREE.Color(0xFF0000);
   triangles.faces[i].vertexColors[0].setRGB(data.triangles[i][0].r, data.triangles[i][0].g, data.triangles[i][0].b);
   triangles.faces[i].vertexColors[1] = new THREE.Color(0x00FF00);
   triangles.faces[i].vertexColors[1].setRGB(data.triangles[i][1].r, data.triangles[i][1].g, data.triangles[i][1].b);
   triangles.faces[i].vertexColors[2] = new THREE.Color(0x0000FF);
   triangles.faces[i].vertexColors[2].setRGB(data.triangles[i][2].r, data.triangles[i][2].g, data.triangles[i][2].b);
   lvar += 3;
   material.triangles = new THREE.MeshBasicMaterial({
      vertexColors: THREE.VertexColors,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: .99
   });
   var mesh = new THREE.Mesh(triangles, material);
   scene.add(mesh);
}

然后我将我的

MeshBasicMaterial

替换为

ShaderMaterial

定义我的

属性

attributes = {
   customColor: {    type: 'c', value: [] },
   customOpacity: { type: 'f', value: []}   
};

创建/填充我的几何体、颜色和不透明度：

geometry = new THREE.Geometry();
for (var i = 0, k, lvar = 0; i < data.triangles.length; i++) {
   for (k = 0; k < 3; k++) {
      geometry.vertices.push(new THREE.Vector3(data.triangles[i][k].x, data.triangles[i][k].y, data.triangles[i][k].z));
      attributes.customColor.value[lvar + k] = new THREE.Color(THREE.ColorKeywords.black);
      attributes.customColor.value[lvar + k].setRGB(data.triangles[i][k].r, data.triangles[i][k].g, data.triangles[i][k].b);
      attributes.customOpacity.value[lvar + k] = 1.0;
   }
   geometry.faces.push(new THREE.Face3(lvar, lvar + 1, lvar + 2));
   lvar += 3;
}

最后是我的网眼布：

var mesh = new THREE.Mesh(sc.geometry.triangles, shaderMaterial);
scene.add(mesh);

---

请参见

BufferGeometry

示例，例如，其中包含160000个三角形。还有其他例子。您可以对自己的自定义alpha属性使用

ShaderMaterial

。对你来说，这是一个可以接受的方法吗？@WestLangley谢谢你的提示！我检查它是否对我有用（：@WestLangley我使用Three.js的原因之一是

Raycaster

组件。我需要它来处理

行

和（根据您的建议）

BufferGeometry

。这可能吗？阅读

Raycaster.js

，您可以看到支持的内容。它与

BufferGeometry

一起工作，用于网格，但不用于线。如果需要，您可以自己修复。进行一些实验。

geometry = new THREE.Geometry();
for (var i = 0, k, lvar = 0; i < data.triangles.length; i++) {
   for (k = 0; k < 3; k++) {
      geometry.vertices.push(new THREE.Vector3(data.triangles[i][k].x, data.triangles[i][k].y, data.triangles[i][k].z));
      attributes.customColor.value[lvar + k] = new THREE.Color(THREE.ColorKeywords.black);
      attributes.customColor.value[lvar + k].setRGB(data.triangles[i][k].r, data.triangles[i][k].g, data.triangles[i][k].b);
      attributes.customOpacity.value[lvar + k] = 1.0;
   }
   geometry.faces.push(new THREE.Face3(lvar, lvar + 1, lvar + 2));
   lvar += 3;
}

var shaderMaterial = new THREE.ShaderMaterial({
   attributes: attributes,
   vertexShader: document.getElementById('vertexshader').textContent,
   fragmentShader: document.getElementById('fragmentshader').textContent,
   blending: THREE.NormalBlending,
   depthTest: true,
   transparent: true,
   side: THREE.DoubleSide,
   linewidth: 2
});

var mesh = new THREE.Mesh(sc.geometry.triangles, shaderMaterial);
scene.add(mesh);