【问题标题】:Create a 3D object to animate in html page创建一个 3D 对象以在 html 页面中设置动画
【发布时间】:2015-08-18 18:32:16
【问题描述】:

我现在正在构建一个网页,我的经理想要在其上旋转一个特定地球(意思是:阴影和特定地球设计)。 我们有一个专门研究 3D 模型的团队,他们已准备好构建对象。

但他们也不知道如何正确构建它。

我正在考虑使用 canvas 和 greensock (GSAP) js 库,但问题是,我不知道如何集成一个 3D 对象,这个对象的扩展应该是什么。

也许 WebGl 更合适?还是只是多张图片?

有人知道吗?

编辑:为了更具体,我不能使用 gif 或已经制作的动画,因为地球在滚动时必须旋转。如果你不滚动,地球就不会旋转。 然后地球会慢慢消失,另一个物体会取而代之。

【问题讨论】:

  • 不应该是一个简单的动画 gif 为你做这项工作吗?
  • 好的,对不起,我编辑了我的问题
  • 可能最简单的方法是使用一些预渲染的图像(比如说 30 个),然后根据滚动距离进行交换 - 非常像这些查看器中的任何一个:@987654322 @.
  • 或者您使用基于 WebGL 的 3d 引擎(如threejs)并将模型加载到其中。

标签: javascript html5-canvas gsap web-animations webgl-earth


【解决方案1】:

正如评论中所读,我决定使用 Three.js 来加载对象。

Three.js 有a function that permit to load .OBJ

然后我将使用 GSAP(GreenSock 库)来使其移动/旋转等。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-01-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-26
    • 1970-01-01
    • 2014-03-26
    相关资源
    最近更新 更多