用数据变形飞机

Question

对于dataviz项目，我在数组中有一些数据。我需要使用这些数据在ThreeJS中渲染波形，如下所示：

每个峰的高度取决于给定的大小，并且取决于年份，其高度必须在其圆内。

我考虑过要创建一个计划，并根据数据使用顶点着色器对其进行变形。不幸的是，这似乎是不可能的。我有点迷茫，我显然需要有关此操作的建议。

该数组如下所示：

[
  {
    "year": 2016,
    "dimension": 28.400 // hectares
  },
  {
    "year": 1995,
    "dimension": 12.200
  }
]

Answer 1

在THREE.Materials ..上有一个“ displacementMap”纹理属性。这将根据纹理中像素的亮度垂直移动顶点。

您可以将飞机细分为一堆，例如新的THREE.Mesh（新的THREE.PlaneGeometry（10,10,30,30），新的THREE.MeshStandardMaterial（{displacementMap：yourDisplacementTexture}）

对于置换贴图纹理，可以使用外部图像，也可以创建画布，在其中绘制高度数据，然后创建THREE.Texture（thecanvas）。

另一个选择是使用THREE.PlaneGeometry（）创建细分的平面

然后获取geometry.vertices，并通过在每个顶点中设置.z值来对其进行修改。接着是geometry.verticesNeedUpdate = true（告诉渲染器将修改内容发送到GPU）。