一、 2D世界結束，邁入3D吧

前面用 GSAP 讓網頁裡的元素開始動起來。但如果我想要的不是普通的文字、按鈕或方塊，而是一個真正的 3D 物件呢？

這時候就要認識 Three.js，它是一個可以在網頁上建立 3D 場景的 JavaScript Library。

二、安裝Three.js

首先在終端機輸入:

npm install three

接著進入index.js先建立一個基本的3D世界

import * as THREE from "three";
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);
document.body.appendChild(renderer.domElement);

做到這裡畫面會是空白很正常，因為我們目前只有建立一個世界，還沒有放東西進去畫面，所以這裡先建立一個3D方塊

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 0x8b5cf6
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

最後讓相機看向我們建立的這個3D方塊

camera.position.z = 5;
renderer.render(scene, camera);

三、結論

這次重新整理網頁後，你會看到一個紫色的 3D 方塊，雖然現在看起來還很簡單，但這代表一件事情：
我的網頁裡真的出現 3D 物件了。
接下來就來研究，剛剛那些 Scene、Camera、Renderer 到底是在做什麼。

下一篇，拆開看看一個 Three.js 世界到底需要哪些東西。