没有 WebGL 和计算机图形学基础的 Web 前端开发者想快速实现一个 3D 效果

[huangyang]

现在需要用WebGL技术做一个实时3D渲染放入网页效果，主要是把产品做成3D，并且可拖拽多角度显示，如何快速入门并能制作啊？不要求深层原理，只要实用，快速。需要了解哪些知识？工具？库（如：three.js）？书？

反正最终就类似于这种东西DEMO，比如做一个茶壶、手机的3D效果。

不考虑浏览器兼容性，不考虑性能问题。

[ixiaohei]

有一个webGL的框架...不记得叫什么了...我去搜一下，骚等

[huangyang]

@ixiaohei three.js ？

[ixiaohei]

嗯，找到了，叫Three.js。你可以去看看demo找找灵感，看能不能实现你说的要求。

另外webGL firefox chrome和ie11都实现了，性能貌似都很好，我以前在nexus7上的chrome跑过webGL的一个demo，有点卡，pc都不卡

[ETiV]

LZ你要是自己搞，怕是最终效果不行……

3D这个东西都还是要通过建模+贴图来搞的。

我同没基础，没概念。之前想搞，最后还是弃坑了。

[akfish]

前段时间微软的手环首页就有lz需要的效果，人家是简单粗暴的N张实拍图片实现。

用Three.js做的话，难度并不大，效果完全取决于建模和贴图质量。当然渲染流水线、shader等基本概念你得懂点。

另外一种简单粗暴的方式是用点云渲染，前提是你有采集3D点云的设备。

当然还有完全不需要自己写代码的方法，试试嵌入M$的PhotoSynth，你上传N张图片自动3D重建，貌似有网页内嵌入播放器。

[lizheming]

接楼上 =w= 可以 embed~ https://sketchfab.com/models/5dcebcfaedbd4e7b8a27bd1ae55f1ac3

[huangyang]

@akfish 感谢，干货很多，🙏

[cevincheung]

@lizheming
为毛要穿内内！

[bombless]

@cevincheung 可以看到内裤，很好的福利了吧

[lizheming]

@cevincheung 快来个没内内版的！！！

[miniwoodman]

我也用 Babylon.js 撸了一个 test (3D妹纸)
http://blog.hi-blender.com/2015/01/babylon-test2/

感觉 Babylon.js 入门非常容易，建立一般的效果不用编写Shader（当然其他几大框架也不用）， 符合你的要求 “不要求深层原理，只要实用，快速。”
之前粗略的看了下 Blend4web，感觉这个项目足够强大（庞大）， 但个人感觉还是 Babylon 最轻便快速

Babylon.js 附带了 3dsMAX / MAYA / Blender 的场景导出插件。

Babylon.js 官方演示地址：
http://babylonjs.com/

Babylon.js 源码与场景导出插件下载
https://github.com/BabylonJS/Babylon.js


这有一篇 three.js 同 Babylon.js 的对比：
http://www.sitepoint.com/three-js-babylon-js-comparison-webgl-frameworks/

接下来也准备学一下 Threes.js , WebGL 真是个好东西，太好玩了～