没有 WebGL 和计算机图形学基础的 Web 前端开发者想快速实现一个 3D 效果
huangyang · 2015-01-17 11:39:44 +08:00 · 5372 次点击这是一个创建于 3575 天前的主题，其中的信息可能已经有所发展或是发生改变。
现在需要用WebGL技术做一个实时3D渲染放入网页效果，主要是把产品做成3D，并且可拖拽多角度显示，如何快速入门并能制作啊？不要求深层原理，只要实用，快速。需要了解哪些知识？工具？库（如：three.js）？书？
反正最终就类似于这种东西DEMO，比如做一个茶壶、手机的3D效果。
不考虑浏览器兼容性，不考虑性能问题。
 |
1
ixiaohei 2015-01-17 11:42:48 +08:00  1
有一个webGL的框架...不记得叫什么了...我去搜一下，骚等
|
|
3
ixiaohei 2015-01-17 11:45:17 +08:00
嗯，找到了，叫Three.js。你可以去看看demo找找灵感，看能不能实现你说的要求。
另外webGL firefox chrome和ie11都实现了，性能貌似都很好，我以前在nexus7上的chrome跑过webGL的一个demo，有点卡，pc都不卡 |
 |
4
ETiV 2015-01-17 12:13:30 +08:00 via iPhone 1
LZ你要是自己搞，怕是最终效果不行……
3D这个东西都还是要通过建模+贴图来搞的。 我同没基础，没概念。之前想搞，最后还是弃坑了。 |
 |
5
akfish 2015-01-17 12:26:47 +08:00 1
前段时间微软的手环首页就有lz需要的效果，人家是简单粗暴的N张实拍图片实现。
用Three.js做的话，难度并不大，效果完全取决于建模和贴图质量。当然渲染流水线、shader等基本概念你得懂点。 另外一种简单粗暴的方式是用点云渲染，前提是你有采集3D点云的设备。 当然还有完全不需要自己写代码的方法，试试嵌入M$的PhotoSynth，你上传N张图片自动3D重建，貌似有网页内嵌入播放器。 |
 |
6
lizheming 2015-01-17 12:46:08 +08:00
接楼上 =w= 可以 embed~ https://sketchfab.com/models/5dcebcfaedbd4e7b8a27bd1ae55f1ac3
|
 |
8
cevincheung 2015-01-17 13:45:17 +08:00
@lizheming
为毛要穿内内！ |
 |
9
bombless 2015-01-17 14:08:45 +08:00
@cevincheung 可以看到内裤，很好的福利了吧
|
|
10
lizheming 2015-01-17 15:23:36 +08:00
@cevincheung 快来个没内内版的！！！
|
 |
11
miniwoodman 2015-01-17 17:58:44 +08:00
我也用 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 真是个好东西，太好玩了～ |
Select Language