引入Z軸創造體積、呈現空間感外，光影也是 3D 重要元素，光的強弱、位置、角度、色彩等，會與物體的「材質」一同影響呈現的樣子；除了物體與光源變化外，也可以操作觀者的畫面視角，這邊通常會用「攝影機」來形容，由視角的變化轉換與空間的利用，也能創造出有趣的效果。

在網際網路、設備與相關技術的發展下，運算效率提升讓瀏覽器能建立出精緻的畫面效果，3D網頁技術發展至今具有一定的成熟度，同時，專注於3D技術的 JavaScript Library 也逐漸豐富多元，接下來將使用相當有名的 Three.js。

剛剛提到的三軸維度、光源效果、攝影機與物體材質，也會在接下來的使用中提到這些元素，讓我們開始吧！

在2D畫面創造三維世界

安裝Three.js

可以利用npm下載安裝用於專案中，也可以利用CDN的方式將Three.js引入；另外，因 Three.js 使用的是 ES module，因此在使用時在HTML的script標籤需將type標示為module。

<script type="module">
  import * as THREE from 'https://cdn.skypack.dev/pin/three@v0.133.1-dCIBIz3pnzocx0lNrLHe/mode=imports/optimized/three.js';
</script>

最新版本的連結可以在 https://cdn.skypack.dev/three 查詢，或是可以使用cdnjs網站提供的CDN： https://cdnjs.com/libraries/three.js

建立基礎場景 (scene、camera、renderer)

接下來，就可以直接在<script>、</script>之間建立基礎的場景，Three.js的基礎場景包含「場景 scene」、「攝影機camera」、「渲染器renderer」三個主要元素，皆使用new建構出來即可。

攝影機camera
要能在2D螢幕上呈現3D立體圖像，需要搭配物體投影的成像方法，而不同投影類型則控制在攝影機中。Three.js主要提供能呈現最接近人眼所見場景的透視投影PerspectiveCamera，和正投影(正射投影)的OrthographicCamera；另外，還有包含兩個攝影機的StereoCamera、六個CubeCamera，而包含一組攝影機的ArrayCamera，則適合運用在VR等類型的場景中。

PerspectiveCamera()需傳入四個參數，用於定義投影的錐形體，分別為垂直角度、錐體的長寬比例、近端面面積、遠端面面積；而OrthographicCamera()則需分別傳入左、右、上、下、近、遠共六個面的參數。

//建立使用透視投影的攝影機
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

渲染器renderer
利用new將THREE.WebGLRenderer()建構出基礎渲染器，可以使用setSize()函式設定渲染的大小，最後再將將渲染器的domElement屬性放置到HTML中，即可完成場景的建立。

//建構場景
const scene = new THREE.Scene();
//建構攝影機(透視投影攝影機)
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//建構渲染器
const renderer = new THREE.WebGLRenderer();
//調整大小
renderer.setSize( window.innerWidth, window.innerHeight );
//將渲染器的domElement屬性放置到HTML
document.body.appendChild( renderer.domElement );

場景建立完成後，再將立體物件建立出來、加進場景中，再透過渲染器進行渲染，就能在場景中加入靜態3D物件囉！