最近想在平板上做一個(gè)樓盤展示的東西，但豬哥就只會(huì)點(diǎn)JS,，所以左思右想也只能用JS來做,，好在目前HTML5已經(jīng)發(fā)展相對(duì)成熟，所以WEB 3D這塊相對(duì)來說也有一定積淀了,。但性能還有待提高,，昨天發(fā)現(xiàn)android chrome已經(jīng)支持webgl，這是多么喜聞樂見的消息,。

之前我是想用Sprite3D.js來做,，但感覺這個(gè)始終不如意，而且文檔甚少,，之前android chrome并不支持webgl,，所以three.js在上面根本運(yùn)行不了，現(xiàn)在支持了,，當(dāng)然必須使用three.js了,。

關(guān)于three.js的各種，大家自行谷歌即可,。

我搜了幾篇文章,，大家可以參考參考。

http://www.cnblogs.com/yiyezhai/archive/2013/01/21/2863552.html

http://www./articles/6faaUb

簡(jiǎn)單的說,，你就是需要這樣：

創(chuàng)建一個(gè)three.js容器,。然后進(jìn)行各種操作。

現(xiàn)在先來個(gè)DEMO吧,。(你懂的,，最好用chrome看)

http://www./demo/three.js/#webgl_buffergeometry_lines_indexed

http://www./（低配電腦殺手，慎重打開,，低配打開前先保存項(xiàng)目）

這些都是別人做好的DEMO,，非常強(qiáng)大。

Three.js 支持多種格式的 3D 文件,，比如Collada (.dae)文件,，比如 three.js JSON 格式的文件。相關(guān)的模型操作可以參考網(wǎng)上的教程,。

對(duì)于3DS MAX ,、MAYA這些非常專業(yè)的軟件,，要做出一個(gè)非常好的模型是比較困難的，谷歌公司出品的SketchUp可以幫我們解決這個(gè)問題,。我們只需要學(xué)習(xí)一些簡(jiǎn)單的光色知識(shí)以及V-ray這個(gè)強(qiáng)大的插件即可做出很好看的模型來,。

在SketchUp中做如下操作。

1,、點(diǎn)擊菜單項(xiàng)文件 > 導(dǎo)出 > 3D模型...,。
2、選擇COLLADA文件（.DAE）,。
3、如果你要導(dǎo)出紋理,，執(zhí)行一下貼圖紋理檢查,。
4、單擊導(dǎo)出,。
SketchUp會(huì)創(chuàng)建一個(gè)名為your-model.dae的Collada文件和一個(gè)包含該模型的紋理素材的文件夾（以你的模型命名）,。

接下來需要導(dǎo)入相應(yīng)的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

導(dǎo)入模型：

這里要注意一下,，這里是使用ajax加載的,，所以在本地是看不了的。

哈哈,，先分享到這里吧,，其他的等豬哥再研究研究。