前言
前端3D效果的展示方法很多，如果簡單的顯示一個立方體，我們可以用六塊div，每塊div結合CSS的旋轉特性，旋轉出不同的角度組裝出來一個盒子。當我們拖拽這個盒子的時候，可以用JS根據鼠標新的坐標點刷新那六個div新的旋轉角度參數，讓六個面始終同步旋轉，始終是閉合的，所以視覺效果來看是3D的。
上述方法適用於簡單的3D模型，比如立方體、長方體等。其特點是，各種控件都支持這種css旋轉，比如我們可以把一個iframe做出3D的旋轉效果，同時不影響iframe上網頁內容的操作，這是比較酷的。但是對於一些更注重細節的3D模型，則很難用css特性來實現。也許我們可以用更多的，粒度更小的div來組裝，但缺乏配合這種方法的3D建模工具，只憑經驗去拼湊，注定很難適應各種需求。所以我們選擇Three.js來實現對3D模型的展示。Three.js提供了一些API，能夠在場景里創建一些常見的幾何體，比如長方體、球體等。但實際應用的時候，我們更多的是結合一些3D建模軟件生成定制的3D模型，然后用Three.js加載顯示。
3D建模軟件選擇blender是因為這是一個開源免費的軟件，官網：www.blender.org。 Thee.js 當然也是一個開源項目，項目位置：https://github.com/mrdoob/three.js/
第一章 Three.js初體驗
從github上下載three.js解壓進入文件夾后，幾個比較有用的文件夾有：
build：存放編譯生成的Three.js庫文件，壓縮和未壓縮的版本都有；
examples：存放各種實例，數量非常多，打開后直接能運行看到效果，是很棒的學習材料；
utils：存放各種工具，和blender結合的關鍵就在這里：utils\exporters\blender，這里我使用2.63\scripts\addons 下面的io_mesh_threejs文件夾，拷貝到我安裝的blender目錄：C:\Program Files (x86)\Blender Foundation\Blender\2.63\scripts\addons下面，然后在blender里面，點擊主窗體顯示模式選擇圖標，選擇“User Preference”，在搜索框里輸入“three”，找到我們剛剛拷貝過去的addon，勾選安裝。這時候，當我們重新切換主窗體選擇模式到“info”，在菜單項中選擇“File/Export”時就出現了“Three.js(.js)”這一項了，就可以把我們創建的3D文件導出為Three.js支持的json格式的文件了。
按照Three.js官網項目首頁的最少代碼示例，一個Three.js的工程大致是這樣的：
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
Three.js繪制3D模型需要這些基本元素：
1，一個camera。 代碼中是這樣的：camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera存在透視投影和正視投影兩種，透視投影比較符合我們日常習慣，也是常見的選擇。創建完camera之后，一般需要設置camera的三維位置等等。
2，一個場景。scene = new THREE.Scene(); 場景是用來加載3D模型的三維空間。
3，光源。示例中沒有設置。
4，3D的object。示例中是自己創建的：
geometry = new THREE.CubeGeometry( 200, 200, 200 ); //設置物理性狀
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );//設置材質
mesh = new THREE.Mesh( geometry, material );//創建模型
scene.add( mesh );//添加到場景中
5，渲染，即執行繪制。在示例中是由一個canvas的render執行的：
renderer = new THREE.CanvasRenderer();//用canvas來繪制3D模型 renderer.setSize( window.innerWidth, window.innerHeight );//設置繪制的區域大小 document.body.appendChild( renderer.domElement );//把繪制了3D模型的canvas添加為dom元素
另外， 為了更好地展示3D模型，代碼中使用了animation，這也是Three.js的API，用戶自定義每一幀時3D模型不同的狀態，然后再render，就能夠自動播放了。