使用 HTML5 画布元素和 Javascript 加载 3D 模型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10435422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load 3D model with HTML5 canvas element and Javascript
提问by dcd018
I have a simple concept that I want to use HTML5 for, but I'm a total newbie when it comes to canvas and model viewers written in Javascript. I have a 3D model of a desk lamp and I'd like only the head part of the lamp to rotate with mouse movement. This CSS3 box shadow effectis sort of what I mean, but I already have the 3D model drawn out in Maya that I'd like to load with HTML5 and use Javascript for cursor interaction. I only need the head part of the lamp to retain 3D attributes, I can use a png for the base. I hope this makes sense, I would normally just use flash, but I'd like to do this with HTML5 if possible.
我有一个简单的概念，我想将 HTML5 用于它，但是当谈到用 Javascript 编写的画布和模型查看器时，我完全是新手。我有一个台灯的 3D 模型，我只想让台灯的头部随着鼠标移动而旋转。这个CSS3 框阴影效果就是我的意思，但我已经在 Maya 中绘制了 3D 模型，我想用 HTML5 加载并使用 Javascript 进行光标交互。我只需要灯的头部保留3D属性，我可以使用png作为底座。我希望这是有道理的，我通常只使用 Flash，但如果可能的话，我想用 HTML5 来做到这一点。
回答by Vij
I am new to webgl too, you can do it with three.js. If you are using Blender there is a converter script available which will convert the model to json file.
我也是 webgl 的新手，你可以用 Three.js 来做。如果您使用 Blender，则可以使用转换器脚本将模型转换为 json 文件。
Then u can load the json file on canvas using json loader of three.js. I found these links useful to load json model. Hope it helps
然后你可以使用three.js的json加载器在画布上加载json文件。我发现这些链接对于加载 json 模型很有用。希望能帮助到你
http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/
http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/
check out the source of this example - http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html
查看此示例的来源 - http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html
回答by Nitzan Tomer
CSS 3 won't help you with that, sounds like you'll need to use WebGL which is a "JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins"
CSS 3 不会帮助你，听起来你需要使用 WebGL，它是一个“JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 图形而不使用插件”
Try the wikipedia articleand the official site(there's also the "test if your browser supports WebGL site")
尝试维基百科文章和官方网站（还有“测试您的浏览器是否支持 WebGL 网站”）
回答by Galvion
Try jsc3d at : https://code.google.com/p/jsc3d/
在以下位置尝试 jsc3d：https: //code.google.com/p/jsc3d/
Quoted : ..JSC3D is built on pure Javascript software rendering using 2d canvas technology as well as an optional WebGL back-end that provides more efficient rendering...
引用：..JSC3D 建立在纯 Javascript 软件渲染上，使用 2d 画布技术以及可选的 WebGL 后端，提供更高效的渲染...
