huangyang
V2EX  ›  问与答

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

  •  
  •   huangyang · Jan 17, 2015 · 6248 views
    This topic created in 4320 days ago, the information mentioned may be changed or developed.

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

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

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

    11 replies  •  2015-01-17 17:58:44 +08:00
    ixiaohei
    ixiaohei
    Jan 17, 2015❤️1
    1
    有一个webGL的框架...不记得叫什么了...我去搜一下,骚等
    huangyang
    huangyang
    OP
    Jan 17, 2015
    2
    @ixiaohei three.js ?
    ixiaohei
    ixiaohei
    Jan 17, 2015
    3
    嗯,找到了,叫Three.js。你可以去看看demo找找灵感,看能不能实现你说的要求。

    另外webGL firefox chrome和ie11都实现了,性能貌似都很好,我以前在nexus7上的chrome跑过webGL的一个demo,有点卡,pc都不卡
    ETiV
    ETiV
    Jan 17, 2015 via iPhone❤️1
    4
    LZ你要是自己搞,怕是最终效果不行……

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

    我同没基础,没概念。之前想搞,最后还是弃坑了。
    akfish
    akfish
    Jan 17, 2015❤️1
    5
    前段时间微软的手环首页就有lz需要的效果,人家是简单粗暴的N张实拍图片实现。

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

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

    当然还有完全不需要自己写代码的方法,试试嵌入M$的PhotoSynth,你上传N张图片自动3D重建,貌似有网页内嵌入播放器。
    huangyang
    huangyang
    OP
    Jan 17, 2015
    7
    @akfish 感谢,干货很多,🙏
    cevincheung
    cevincheung
    Jan 17, 2015
    8
    @lizheming
    为毛要穿内内!
    bombless
    bombless
    Jan 17, 2015
    9
    @cevincheung 可以看到内裤,很好的福利了吧
    lizheming
    lizheming
    Jan 17, 2015
    10
    @cevincheung 快来个没内内版的!!!
    miniwoodman
    miniwoodman
    Jan 17, 2015
    11
    我也用 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 真是个好东西,太好玩了~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1866 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 86ms · UTC 09:51 · PVG 17:51 · LAX 01:51 · JFK 04:51
    ♥ Do have faith in what you're doing.