在 HTML5 <canvas> 上从不同的角度绘制模型答案

【问题标题】：Drawing a model from different viewpoints on HTML5 <canvas>在 HTML5 <canvas> 上从不同的角度绘制模型
【发布时间】：2014-02-23 01:41:09
【问题描述】：

这是我为我的计算机图形课程选择的一个项目——绘制一架可以从不同角度观看的三角钢琴。

我还没有开始工作，我刚刚完成了 HTML5:Graphics and Animation with Canvas 上的 lynda.com 课程。我可以看到如何制作一个立方体或一个球，这些简单的图形。但我不知道我应该如何继续我的项目。一个一个地定义每个小表面，肯定会非常乏味。我应该多学一些吗？ WebGL 还是别的什么？还是“乏味”的方式是“好的”方式？你有什么建议？

【问题讨论】：

标签： javascript html canvas graphics webgl

【解决方案1】：

“不同的角度”表示您要建模和渲染一个三维对象。

这是成功的秘诀之一：

在任何开源和免费建模应用程序中设计您的模型（三角钢琴），例如 Blender
然后，学习 Three.js 或类似 WebGL 框架的基础知识，它可以简化渲染 3D 场景的复杂过程
从 Blender 中导出您的模型并将其导入您的 Three.js JavaScript。

可以在没有 WebGL 的 Three.js 上将对象渲染到 <canvas>，但使用 WebGL 后端可以大大简化流程，我强烈建议坚持使用 WebGL。

Here are is one of Three.js examples showing some modeled cars from different angles (cameras).

HTML5 Canvas API 主要用于 2D 图形，但不太适合您的目的，您已经注意到它的局限性。

【讨论】：

+1 @Shashwat Black：您的第一个项目雄心勃勃。这个答案可能是您在一个学期的时间范围内可以用来完成的方法。
抱歉回复晚了。实际上教授希望我们应用在课堂上学到的算法。所以使用搅拌机不是正确的选择。我一直在努力。我是两天前开始的，我已经准备好了线框模型。距离提交截止日期还有大约 10 天。到那时我必须完成可见表面检测、照明和着色。希望我能及时完成。如果我早点完成，我也会研究渲染阴影。感谢你的回复。 :)
Here 是现在的样子。我知道这不是最好的，但我学到了很多东西。另外，如果您有任何进一步的建议，那就太好了..

【解决方案2】：

使用 WebGL，Three.js 旨在易于访问。 www.udacity.com 有一门使用 Three.js 的 3d 图形课程，非常适合入门。实时 3D 图形基本上是关于创建 2d 图像，该图像重新创建 3d 透视效果并且可以实时更新。以蛮力的方式来解决这个问题不会教你任何关于如何实现这种效果的知识。

【讨论】：