基於Threejs的3D繪圖入門之基礎篇【轉】（一）

最近接手了一位離職同事做的項目，涉及到3D繪圖，他走之前進行了一些調研。本文及後續的博文，主要針對基礎知識及項目迭代優化過程中遇到的問題進行記錄。本文屬於基礎概念篇，該篇文檔源於我的同事調研結果，轉載記錄用於日後查閱。

一、3D基本要素

1 場景

一個三維空間，所有物體的容器。創建場景之後，接下來就是往場景中擺放要呈現的物體。

const scene = new THREE.Scene()

2 相機

創建完場景之後，需要添加一個相機，利用相機從不同的位置、方向、角度來觀察場景中的物體（簡單理解就是人的眼睛）。相機能夠看到的內容，就是最終需要再屏幕上顯示的內
容。場景是無限大的，但是相機能觀察到的範圍是有限的。調整相機的位置、方向、角度，屏幕上渲染的內容會響應的發生變化。所以，一般對整個場景的移動、旋轉、縮放等操作，其實都是通過修改相機相關參數來實現的。

2.1 透視相機

const k = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000);
camera.position.set(0,0,40);
camera.lookAt(scene.position)

2.2 正交相機

const k = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(-20 * k, 20 * k, 20, -20, 0.0001, 2000);
camera.position.set(0,0,40);
camera.lookAt(scene.position)

3 光

如果沒有光，相機看不到任何東西（有些特殊材質，沒有光也可以固定呈現顏色）。所以需要往場景中添加光源。爲了跟真實世界更加接近，ThreeJs支持模擬不同光源，展現不同光
照效果。

const light = new THREE.SpotLight(0xffffff);
light.position.set(-40, 60, 0);
scene.add(light)

4 物體

有了場景、相機、光，就可以往場景中放物體了，在ThreeJs中，物體由形狀和材質兩部分組成，形狀決定物品的輪廓，材質則是物體的材料和質感。TheeJs中封裝多種常見的形狀立方體、球體等等，方便我們開發一些簡單的應用。對於複雜的模型，則需要三維建模工具
進行建模然後導出，由ThreeJS來解析渲染。

const fang = new THREE.BoxGeometry(4,4,4)
const mesh = new THREE.Mesh(fang, [
  new THREE.MeshBasicMaterial({ color: 0xff7875 }),
  new THREE.MeshBasicMaterial({ color: 0xffec3d }),
  new THREE.MeshBasicMaterial({ color: 0x7cb305 }),
  new THREE.MeshBasicMaterial({ color: 0x36cfc9 }),
  new THREE.MeshBasicMaterial({ color: 0x1890ff }),
  new THREE.MeshBasicMaterial({ color: 0x9254de })
 ]);
scene.add(mesh)

5 渲染

ThreeJs繪製的東西，最終是使用canvas顯示的，每次更新場景，調整相機都需要重新渲染。一般在requestionAnimationFrame回調中執行該函數，或者需要更新的時候手動觸發。

const renderer = new THREE.WebGLRenderer({ clearColor: 0x000000 });
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
requestAnimationFrame(() => {
     renderer.render(scene, perspectiveCamera);
});