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

Very cool 3D graphics on website, but what is the technology behind this?

本文关键字:背后 技术 是什么 3D 图像 非常 网站      更新时间:2023-09-26

我最近在一个丹麦网站上发现了一个非常酷的3D图形。你可以旋转和缩放地球的三维物体。我对网站上的3D图形很感兴趣,我很好奇这是如何做到的。我肯定不是Flash,因为我右键点击了它,没有任何关于Flash的信息,就像你右键点击Flash图形一样,那是什么呢?

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

你所指的旋转地球仪实际上是在HTML画布元素上呈现的WebGL,并通过Javascript进行控制。

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

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

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

这是通过HTML画布标记和Javascript完成的。

Html5, Jquery,Web字体和其他一些第三方javascript的组合已经使用…要了解更多信息,您可以使用chrome网页检查器来检查它是如何完成的https://developers.google.com/chrome-developer-tools/或者你可以使用Firebug- Firefox插件来做同样的事情

我不确定这里是否使用了WebGL,因为我不知道


你也可以看看verge3d,它简化了3D元素的集成(在blender或Maya中制作),并将它们导出为gltf web应用程序,这些应用程序可以使用他们所谓的拼图语言进行编程,这实际上只是拖放脚本块和逻辑连接器。Google Studio Earth也可以实现。但是如果你不想做很多编程的话,使用verge3d会更方便。

看了那个网站,如果我是一个赌徒(我是),我会把钱放在verge3d中正在完成的特定实现上。从加载屏幕到地球球的移动互动,感觉就像《verge3d》。(我不能说百分之百,但我肯定会在这上面下注。)它有一个WordPress插件,便于整合,网站使用WordPress。网站中使用的元素都属于该平台,所以请查看。

Verge3d WordPress集成