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

标签 javascript html canvas graphics webgl

好吧,这是我为我的计算机图形课选择做的一个项目 - 画一架可以从不同 Angular 观看的三 Angular 钢琴。

我还没有开始工作,我刚刚在 HTML5:Graphics and Animation with Canvas 上完成了 lynda.com 类(class).我可以看到人们如何制作一个立方体或一个球,这些简单的图形。但我不知道我应该如何进行我的项目。一个一个地定义每个小表面,肯定会非常乏味。我应该多学点吗? WebGL 还是其他?还是“乏味”的方式是“好”的方式?你有什么建议?

最佳答案

“不同的 Angular ”意味着您想要建模和渲染三维对象。

这是成功的秘诀:

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

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

  • 从 Blender 导出您的模型并将其导入您的 Three.js JavaScript。

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

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

HTML5 Canvas API 主要用于 2D 图形,并不适合您的目的,因为您已经注意到它的局限性。

关于javascript - 在 HTML5 <canvas> 上绘制不同视角的模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21461816/

相关文章:

javascript - 显示我返回的 JSON

javascript - HTML5 Canvas 中的简单按钮

javascript - React 中嵌套数据的不可变更新模式

javascript - 为什么我的 slider 中的某些幻灯片不动?

javascript - Angular 指令需要访问 ng-repeat 中的变量

jquery - 使用 jQuery 抓取 HTML 文档,这可能吗?

html - 在悬停时更改输入的 BGcolor,然后在 mouseout 时返回,但如果输入有焦点,禁用 mouseout BGcolor 更改

javascript - 在 Canvas 中为草制作动画的有效方法

javascript - 在 JavaScript 中尝试使用 localStorage 保存和加载包含对象的数组时出错

javascript - jQuery 中remove() 和detach() 的区别