canvas - 有哪些库可以用 <canvas> 制作 3d 轨道飞行器?

标签 canvas webgl

我正在寻找一个 3-d 轨道飞行器,因此,我显然需要透视图、相机移动等。我还需要能够将纹理应用到几何体。考虑到复杂性,我认为除了 <canvas> 之外的任何地方都不会发生这种情况。或闪光灯。

据我了解,<canvas>仅限于 2d,但您可以使用 JS 完成所有 3d 工作,并将 2d 投影简单地输出到 Canvas 中。我的理解就到此为止了,弄清楚这一切似乎相当复杂。

问题#1:有哪些 3d 图形库可以提供我需要的基本功能(3d->2d 透视投影、纹理、相机动画以及平移的流畅用户输入) 、变焦、倾斜、移动摄影机等)?

问题#2:在我自己找到的提供此类功能的非专有库(Three.js 和 C3DL)中,它们似乎都需要 webGL。这类事情非常需要 webGL,或者支持 <canvas>充足的?如果不需要 webGL,如果我不做任何会降低 CPU 性能的事情,是否有任何理由使用它?

注意:除非有人另有建议,否则我将继续尝试学习 Three.js 来完成此任务。

最佳答案

首先,Canvas 绝不“局限于”2D。有一个 2D 上下文,如果您确实需要,可以用它制作 3D 场景(见下文)。正如您所说,还有用于 3D 渲染的 WebGL 上下文使用不同的规范。

要回答问题 2,WebGL 绝不是必需的。例如,该库仅使用 2D Canvas 上下文来进行 3D 项目:

http://arc.id.au/Canvas3DGraphics.html

还有几个投影纹理/旋转对象的示例,例如:

http://acko.net/files/projective/index.html

要回答第一个问题,上面链接了一个库,但它确实是我见过的唯一一个使用 2D 上下文的库。

关于canvas - 有哪些库可以用 <canvas> 制作 3d 轨道飞行器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6449357/

相关文章:

javascript - 如何通过GLSL在THREE.js中实现MeshNormalMaterial?

javascript - 渲染带有 alpha channel 的 png 时, Three.js 会从显卡中泄漏像素

javascript - putimagedata 绘制像素数据 4 次/不按比例

Javascript如何使对象出现在背景图像上

javascript - 当源 Canvas 和目标 Canvas 相同时,HTML5 Canvas drawImage函数速度很慢?

glsl - 片段着色器 glsl 中的世界位置到屏幕位置

javascript - 选择一个数组?

javascript - js Canvas 发射无用的激光

opengl-es - WebGL 中的 OpenGL 点功能

webgl - 如何在Dart WebGL应用程序中加快频段选择工具