Question

我有一系列数据，它们简单地表示X / Y / Z坐标，并希望在屏幕上显示它们。我知道Three.js的存在，但是到目前为止，我所涉及的示例似乎是针对更复杂的动画以及诸如此类的，并且还没有设法找到一组文档的ELI5教程来帮助我前进。 / p>

请注意，我还没有嫁给three.js，但这似乎是完成这项工作的最佳工具。

我不是要找人为我做这件事，因此，一些指向一些基本文档的链接将非常受欢迎！

Answer 1

简单明了，从概念上讲，包括制作球体并将其位置设置为您的坐标。

1）具有坐标数据

const coordData = [ 
    {x: 9, y: 2, z: 6},
    {x: 3, y: 7, z: 4},
    ...
]

2）创建几何，材质和组

const pointGeom = new THREE.SphereBufferGeometry( 5, 32, 32 ),
      pointMat = new THREE.MeshBasicMaterial({ color: 0xffff00 }),
      pointGroup = new THREE.Group();

3）循环使用坐标数据，并使用上述const为其分别创建一个点（球体）

for (var i = coordData.length - 1; i >= 0; i--) {
   const coord = coordData[i],
         point = new THREE.Mesh( pointGeom, pointMat );

   point.position.set( coord.x, coord.y, coord.z );
   pointGroup.add(point);
}

4）将组添加到场景中

scene.add(pointGroup);

Answer 2

我最终通过plot.ly库提出了一个很好的答案。该页面非常适合我想做的事情。

https://plot.ly/javascript/3d-point-clustering/

如何创建简单的三维坐标显示？

2 个答案: