在网站上非常酷的3D图形,但这背后的技术是什么？

Question

我最近在丹麦网站上发现了一个非常酷的3D图形.您可以旋转和缩放地球的3D对象.我对网站上的3D图形感兴趣,我很好奇这是如何完成的.我确定它不是Flash,因为我正确地使用了它,并且没有关于Flash的信息,因为当你正确点击Flash图形时它就是这样,那么它会是什么呢？

链接:链接到丹麦网站BIG 然后选择Locations

Answer 1

您指的旋转地球仪实际上是在HTML Canvas元素上渲染的WebGL,并通过Javascript控制.

WebGL功能强大,但对于没有对OpenGL-ES编程非常了解的人来说并不容易.我建议使用一个库,其中最好的是(在我看来)http://threejs.org,它通过为您管理低级3D操作简化了任务,让您专注于高级概念(多边形,阴影等).有很多教程和典型的"你好世界"的例子(幸运的是,它是地球的代表,有一些互动性).

在你给出的例子中深入研究,我建议你看看这个适合的教程,并解释如何完成同样的事情:http://www.smartjava.org/content/render-open-data-3d-world- globe-threejs.

旁注:Three.js允许在WebGL,Canvas,SVG或CSS3表面上进行渲染.IE不支持WebGL,但Canvas是(IE9 +).这意味着可以在所有最常见的浏览器上实现相同(或几乎相同)的结果(但具有完全不同的性能).