最近想在平板上做一個樓盤展示的東西，但豬哥就只會點JS，所以左思右想也只能用JS來做，好在目前HTML5已經(jīng)發(fā)展相對成熟，所以WEB 3D這塊相對來說也有一定積淀了。但性能還有待提高，昨天發(fā)現(xiàn)android chrome已經(jīng)支持webgl，這是多么喜聞樂見的消息。
之前我是想用Sprite3D.js來做，但感覺這個始終不如意，而且文檔甚少，之前android chrome并不支持webgl，所以three.js在上面根本運行不了，現(xiàn)在支持了，當然必須使用three.js了。
關(guān)于three.js的各種，大家自行谷歌即可。
我搜了幾篇文章，大家可以參考參考。
http://www.cnblogs.com/yiyezhai/archive/2013/01/21/2863552.html
http://www.tuicool.com/articles/6faaUb
簡單的說，你就是需要這樣：
1 | <html> |
2 | <head> |
3 | <title>My first Three.js app</title> |
4 | <style>canvas { width: 100%; height: 100% }</style> |
5 | </head> |
6 | <body> |
7 | <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script> |
8 | <script> |
9 | // Our Javascript will go here. |
10 | </script> |
11 | </body> |
12 | </html> |
創(chuàng)建一個three.js容器。然后進行各種操作。
現(xiàn)在先來個DEMO吧。(你懂的，最好用chrome看)
http://www.bojinxiaozhu.com/demo/three.js/#webgl_buffergeometry_lines_indexed
http://www.findyourwaytooz.com/（低配電腦殺手，慎重打開，低配打開前先保存項目）
這些都是別人做好的DEMO，非常強大。
Three.js 支持多種格式的 3D 文件，比如Collada (.dae)文件，比如 three.js JSON 格式的文件。相關(guān)的模型操作可以參考網(wǎng)上的教程。
對于3DS MAX 、MAYA這些非常專業(yè)的軟件，要做出一個非常好的模型是比較困難的，谷歌公司出品的SketchUp可以幫我們解決這個問題。我們只需要學習一些簡單的光色知識以及V-ray這個強大的插件即可做出很好看的模型來。
在SketchUp中做如下操作。
1、點擊菜單項文件 > 導出 > 3D模型...。
2、選擇COLLADA文件（.DAE）。
3、如果你要導出紋理，執(zhí)行一下貼圖紋理檢查。
4、單擊導出。
SketchUp會創(chuàng)建一個名為your-model.dae的Collada文件和一個包含該模型的紋理素材的文件夾（以你的模型命名）。
接下來需要導入相應的JS文件
<scripttype="text/javascript"src="Three.js"></script>
<scripttype="text/javascript"src="ColladaLoader.js"></script>
ColladaLoader.js就是用來加載模型文件的。
下載地址為：https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/ColladaLoader.js
導入模型：
1 | var loader = new THREE . ColladaLoader (); |
2 | loader . load ( 'path/to/your-model.dae' , function ( result ) { |
3 | scene . add ( result . scene ); |
4 | }); |
這里要注意一下，這里是使用ajax加載的，所以在本地是看不了的。
哈哈，先分享到這里吧，其他的等豬哥再研究研究。
