three.js - 是否有两个 JS 对应于三个 JS

Question

我正在学习 ThreeJS 作为 WebGL 的接口。谢谢大家之前的帮助。

我正在开发一种新的 3D 动力学方法，并希望在教科书中添加 3D 组件。示例可在此处找到：http ://eon.sdsu.edu/~impellus/DMF/

他们不是最好的，但我正在学习。

同时，我想研究 2D Statics 和 2D INTERACTIVE Free Body Diagrams 中的一些动画。目标是呈现一个对象，切掉它的各个方面并用力替换丢弃的部分（基本上：通过删除接触来交互式地构建自由体图）。通常，我会考虑使用 Flash，但有人建议我不要这样做。

你可以在这里看到我使用threejs创建了一个关于流线、条纹、路径的2D教程：

但是我的感觉是使用threeJS的强大功能来制作2D交互动画并不自然。

那么请问三JS是否有二JS版本？我认为只是问这个问题应该是我正在寻找的证据，但让我更清楚。我正在寻找一个专门用于 2D 动画的 webGL 接口。是的，我可以使用threeJS，但我认为那将是一个错误。有人可以指导我吗？

score 35 · Accepted Answer

pixi.js刚刚发布 - 它是一个由 WebGL 支持的 2D 引擎以提高性能，但具有 2D 画布后备以实现兼容性。我自己没有使用过，但值得一试。

score 21 · Accepted Answer

查看 Jono Brandel 的 two.js！

score 13 · Accepted Answer

我还探索了 2D 引擎的使用，但最终只使用了 Three.js。如果您将相机设置为从不沿 Z 方向移动，并将所有视觉元素放在同一个 z = 恒定平面上，那么它就是一个 2D 引擎。

您唯一需要解决的是平面上元素的 z 顺序。一种方法是为每个元素分配一个稍微不同的 Z 值：

例如，如果您在 Z = 0 平面上绘制，则可以将元素 1 设置为在 Z = 0 处绘制，将元素 2 设置为在 Z = 0.0001 处绘制，因此元素 2 将始终绘制在元素 1 的顶部。

实现 z 顺序的更好方法是破解引擎并为每个元素设置绘制顺序，以强制一个元素在另一个元素之前绘制。

使用 three.js 的另一个问题是（在撰写本文时）它不能很好地处理 2D 精灵。

score 5 · Accepted Answer

我发现 IvanK 速度非常快并且功能齐全，它比 Pixijs 有更多的功能。

检查一下（它有带有自动回退支持的 webgl、canvas、svg 渲染器）。

我找到了另一个库，fabricjs.com，非常强大但速度很慢。

score 2 · Accepted Answer

试试这个 Javascript 游戏引擎列表：

其中一些专门用于带有精灵或 Box2d 物理的 2D 动画。

还有用于绘制 2D HTML5 动画的商业产品，例如http://www.sencha.com/products/animator/

score 0 · Accepted Answer

如果您正在寻找 2D 可视化，最好的选择是 D3 或 Two.js：

有时，您需要一把简单的刀来涂黄油。Three.js 在实现平滑图形方面非常像电锯。它更适合 3 维。

6 回答 6