場景

將物體（模型）建置完畢後，如果要在螢幕上顯示，就必須先將物件加入場景。Three 的場景(Scene) 為一個物件，保存著當前的場景狀態。

我們可以使用 add 方法將物件、光源、相機加入場景當中。scene.children 裡頭存放著場景裡的物件。

相機

在 three.js 裡頭主要有兩種類型的相機，正交投影與透視投影，他們都繼承 Camera 這個類別。

three.js 裡頭幾乎都已物件導向為主，所以在使用 three.js 的時候常會看見 new THREE.xxx 的方式出現。

• new THREE.PerspectiveCamera(fov, aspect, near, far)
• new THREE.OrthographicCamera(left, right, top, bottom, near, far)

一旦 camera 被建立出來，我們可以透過 camera.lookAt 這個 API 來決定相機的視角。

幾何圖形

three.js 裡頭內建許多幾何圖形，可以到官方文件中觀看可用的幾何圖形。不過最經典的茶壺卻沒有出現在 API 上有點可惜啊XD。

特別要注意的地方是書上及網路上的範例中，都會使用 CubeGeometry 當作正方體的幾何圖形，

大家可以玩玩看內建的幾何圖形，也可以運用自己的巧思創造出有趣的圖形。就算只是幾何圖形，只要夠有想像力，也能做出非常可愛的圖形。

注意事項

這邊需要特別注意的一點是，當你改變 geometry 時，不一定會導致物件的改變。你必須要告訴 three.js 哪裡有改變。所以當你新增了幾何形狀時，可以根據需要設定：

• dynamic
• verticesNeedUpdate

材質與紋理

three.js 內建了一些常用的材質。比較常用的有：

• MeshBasicMaterial 基本曲面材質，跟光源無關的材質，主要用在開發與 debug。
• MeshPhongMaterial 馮氏反射面：非常像鏡面光滑的反射，如果要強調光澤，可以考慮使用它。
• LambertMaterial 朗伯特面材質：從各個角度觀看燈光，都具有相同的亮度。遵守朗伯餘弦定理。
• ShaderMaterial 可以透過自己撰寫 shader 的方式創造材質。
• ParticleMaterial Three.js 封裝了粒子常用的功能，可以用這個物件很容易地創造驚艷的粒子效果。

有了這些預設的材質，就不用大費周章地撰寫光源跟反射的矩陣，省下不少功夫。

光源

Three.js 具備常見的光源，包含了：

• AmbientLight
• AreaLight
• DirectionalLight
• HemisphereLight
• PointLight
• SpotLight

幾乎涵蓋了所有實務上的應用。

結論

這兩天的教學已經涵蓋大部分的 three.js 用途，不過這個強大的框架還不只這些而已，之後進階篇的介紹能夠將 three.js 使用的更加強大。

以下是總結基本 API 所建立出來的 demo，這邊的幾何圖形幾乎都是用 BoxGeometry 完成。

low-poly aircraft

我做了一台小飛機，全部都是由幾何形狀組成的，不過代碼寫得非常不模組化，時間上太趕所以就先急就章了，相信各位優秀的工程師們能夠找到更模組化的方法。