在HTML5<canvas>上从不同的视角绘制模型



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

我尚未开始这项工作,我刚刚在HTML5上完成了Lynda.com课程:图形和动画用画布完成。我可以看到一个人如何制作一个立方体或球,这些简单的人物。但是我不知道我应该如何继续我的项目。一个一个一个小的表面一个一个一个小表面,肯定是非常乏味。我应该学更多吗?WebGL还是其他?还是"乏味"的方式是"好"的方式?您会建议什么?

"不同角度"意味着您要建模并渲染三维对象。

这是成功的秘诀:

  • 在任何开源和免费建模应用中设计您的模型(大钢琴),例如Blender

  • 然后,学习三个或类似WebGL框架的基础知识,简化了渲染3D场景的复杂过程

  • 将您的模型从搅拌机中导出并将其导入您的三个。

可以在没有WebGL的情况下将对象渲染到<canvas>,但使用WebGl后端简单的过程非常多,我强烈建议您坚持使用WebGl。

这是三个示例之一,显示了一些从不同角度(相机)的建模汽车。

html5帆布API对2D图形最有用,并且不适合您的目的,因为您已经注意到了它的局限性。

使用WebGl,三分的目标是非常容易访问。www.udacity.com有一门关于3D图形的课程,该课程使用了三个。JS,非常适合开始。实时3D图形基本上是关于创建一个2D图像,该图像重新创建3D透视图的效果,并且可以实时更新。以一种蛮力的方式进行此操作不会教会您有关如何实现这种效果的任何东西。

最新更新