javascript - 带有 png 图像的 3D 动画

标签 javascript css html animation

我尝试使用 HTML5/JS/CSS 为一张小图片制作动画。它应该在 z 轴上旋转。我知道如何使用 x-/y-Axis 来实现,但 z-Axis 似乎有所不同。

我找不到关于如何做到这一点的很好的教程或文档。

如果有人能给我一些提示,那就太好了!

到目前为止谢谢!

最佳答案

我认为您有兴趣做的事情最好使用 3d 渲染功能完成。 WebGL 可以帮助您。

There are plenty of tutorials在那里可以帮助您开始使用 webGL。这非常简单,这些是您需要执行的一般步骤。

  • 使用 webGL 初始化 Canvas
  • 创建一个新的gl纹理
  • 加载图像并绑定(bind)到纹理
  • 创建一个基本的四边形并在使用您喜欢的新纹理渲染时对其进行纹理处理
  • 在 3d 空间中旋转四边形
  • 渲染!

这里有太多的代码来详细描述如何做到这一点。查看教程,如果您有更多问题,请回来。

祝你好运!

关于javascript - 带有 png 图像的 3D 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11574243/

相关文章:

javascript - 我怎样才能拆开这个 SVG 字体以在 Chrome 中以编程方式使用它?

javascript - 如何访问匹配数组中的所有匹配

javascript - 将全局样式应用到 Shadow DOM 的正确方法

javascript - 如何更改已经显示的 Bootstrap 弹出窗口的内容?

jquery - 如何计算未隐藏的列表元素?

javascript - 即使重新加载页面后仍保留下拉框中的值

javascript - 如何将变量从一个函数传递到另一个函数?

javascript - Nodemailer 和 Amazon SES

javascript - 当一个 div block 被触摸并且在同一条线上时,我如何将一个 div block 放在另一个垂直排列的下方?

javascript - 从数组中获取部分属性值