在HTML5 <canvas> </canvas>上从不同视点绘制模型

Question

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

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

Answer 1

＆＃34;不同的角度＆＃34;意味着你想要建模和渲染一个三维物体。

这是成功的一个方法：

• 在任何开源和免费建模应用程序中设计您的模型（三角钢琴），例如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图形，并不适合您的目的，因为您已经注意到它的局限性。

Answer 2

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