2d HTML5 画布上的 3d 元素答案

【问题标题】：3d elements on a 2d HTML5 canvas2d HTML5 画布上的 3d 元素
【发布时间】：2015-11-11 04:09:42
【问题描述】：

我正在使用HTML5 Canvas 制作 2d 游戏，我想将 3d 角色添加到 2D 画布中。

在单独的“隐藏”画布上使用THREE.js 是否是一个好的（甚至可能的）解决方案，每个 3d 角色 1 个。但是，将那些“3d”画布绘制到主 2d 画布上？

我可以在“2d”画布上绘制webGL 画布吗？

此解决方案有任何潜在问题吗？

会违反任何“最佳实践”吗？

我的直觉是这是一条好路。

【问题讨论】：

你想做2.5D游戏吗？将 3D 角色导出为 png 并在 2D 画布上绘制会不会更简单？
是的。但是我的设计师希望它是 3D 的，这样他就不必以不同的角度导出相同的精灵。所以，我正在努力寻找妥协。
Hmmmm...好的...那么最好在WebGL中进行（它也可以绘制2D）

标签： html canvas 3d three.js 2d

【解决方案1】：

Webgl 使用 webgl 上下文，而不是 2d。为什么需要不同的画布层？无论如何，您可以通过设置透明背景来做到这一点，是的，但这对您的浏览器来说会很重。您可以在单个 webgl 上下文中执行的操作（可能在您需要的另一个 2d 上下文之上）是用不同的角色渲染不同的场景，结果将是相同的

【讨论】：

回答您的问题。如果一个画布使用“2d”上下文，另一个使用“webgl”上下文，那么拥有 2 个画布层不是唯一的选择吗？它们不会混合在一起，所以它们必须在不同的画布上。对吗？
是的，一个 webgl 上下文 (=canvas)，具有透明背景，为您提供 3d 角色，在不同场景中呈现。在 2d 上下文的顶部（css），包含您需要的内容。最好的仍然是只有一个画布，所以你在你的角色后面添加一个平面并在上面渲染你的图片/风景/任何东西。渲染结果、代码、逻辑、实践都会更好。
@Karandawov 如果答案正确，您可以验证它
不用担心。我没有忘记 :) 只是在等待更多可能的答案，然后睡着了 :)