javascript - 使用 HTML5 画布元素和 Javascript 加载 3D 模型

Question

我有一个简单的概念，我想使用 HTML5，但是当谈到用 Javascript 编写的画布和模型查看器时，我完全是新手。我有一个台灯的 3D 模型，我希望只有台灯的头部可以随着鼠标移动而旋转。这个CSS3 盒子阴影效果有点像我的意思，但我已经在 Maya 中绘制了 3D 模型，我想用 HTML5 加载并使用 Javascript 进行光标交互。我只需要灯头部分保留3D属性，底座可以使用png。我希望这是有道理的，我通常只使用 Flash，但如果可能的话，我想用 HTML5 来做。

Answer 1

我也是 webgl 的新手，你可以用 three.js 来做。如果您使用的是 Blender，则可以使用转换器脚本将模型转换为 json 文件。

然后你可以使用 three.js 的 json loader 在画布上加载 json 文件。我发现这些链接对于加载 json 模型很有用。希望能帮助到你

http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/

查看此示例的来源 - http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html

Answer 2

CSS 3 对你没有帮助，听起来你需要使用 WebGL，它是一个“用于在任何兼容的 Web 浏览器中呈现交互式 3D 图形的 JavaScript API，无需使用插件”

试试维基百科文章和官方网站（还有“测试您的浏览器是否支持 WebGL 网站”）

Answer 3

尝试 jsc3d：https ://code.google.com/p/jsc3d/

引用：..JSC3D 是建立在纯 Javascript 软件渲染之上，使用 2d 画布技术以及提供更高效渲染的可选 WebGL 后端...