1

一般来说，我是 three.js 和 WebGL 的新手。

http://css.dzone.com/articles/threejs-render-real-world上的示例展示了如何在 three.js 中使用栅格GIS 地形数据

是否可以在场景中使用矢量GIS 数据？例如，我有一系列代表位置（包括高度）的点，这些点存储在真实世界坐标（米）中。我将如何在 three.js 中显示它们？

http://threejs.org/docs/59/#Manual/Introduction/Creating_a_scene上的基本示例显示了如何使用坐标创建几何图形 - 我可以使用与真实世界坐标类似的方法，例如

"x" : 339494.5,
"y" : 1294953.7,
"z": 0.75

还是我需要将这些转换为页面单位？我可以用我的点来创建一个表面来覆盖航拍图像吗？

我尝试修改简单示例，但没有看到任何内容（或任何错误消息）：http: //jsfiddle.net/slead/KpCfW/

感谢您对我做错了什么提出任何建议，或者这是否确实可行。

4

1 回答 1

2

我做了很多事情来让 JSFiddle 显示一些东西.. 这里：http: //jsfiddle.net/HxnnA/

  • 您没有在几何体中指定任何面。在这种情况下，我只是硬编码了一张脸，所有三个数据点都充当角。或者，您可以考虑使用粒子将数据显示为点而不是面。
  • 将材料设置为THREE.DoubleSide。这通常不需要或不推荐，但有助于在早期阶段进行调试，此时您可以看到脸部的两侧。
  • 你的相机可能看错了方向。添加了一个lookAt()将其指向中心并扩大视野（这只是为了在编码时更容易找到东西）。
  • 您的相机近平面和远平面可能超出了相机位置和地形尺寸的范围。所以我增加了远平面距离。
  • 您的坐标值非常大，所以我只是手动修改了它们以使其与相机相关，并确保它们形成足够大的三角形以便在相机中看到它。您可以考虑将坐标除以 100 以使单位更小。但是调整相机以适应巨大的规模也应该足够了。

您的方法没有问题，只要确保您提供数据，以便考虑到相机位置、方向和近 + 远平面，它是有意义的。注意你如何做脸。Face3 的参数是顶点数组中每个点的索引。稍后您可能需要考虑缠绕顺序、法线和 uvs。您可以研究 Three.js 中包含的几何类以供参考。

Three.js 没有为单位指定任何含义。它只是浮点数，您可以自己决定单位（1.0）代表什么。无论是 1 毫米、1 英寸还是 1 公里，都取决于考虑到应用及其规模，什么最有意义。当实际数字非常小或非常大时，浮点数会带来精度问题。我自己的应用程序通常处理从几厘米到几百米范围内的东西，并以 1.0 = 1 米的方式使用单位，这一直很好。

于 2013-08-11T01:26:59.943 回答