一、一探究竟

昨天我們第一次用 Three.js 做出一個紫色的 3D 方塊，雖然成功顯示出來了，但其實昨天的程式碼裡出現了很多第一次看到的東西，，例如:Scene、Camera、Renderer 。

所以今天先不急著做新的效果，來看看這三個東西到底在做什麼吧。

二、Scan:建立3D世界

import * as THREE from "three";
const scene = new THREE.Scene();

Scene 就像是我們的 3D 空間，之後建立的方塊、球體、燈光，都要放進這個空間裡，像昨天的這段就是把 cube 放進我們建立的世界裡。

scene.add(cube);

三、Camera：決定我們看到哪裡

有了世界還不夠，我們還需要一雙智慧的「眼睛」，Camera好比相機，能夠幫我們從各個角度看 3D 世界。

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
//這段是z軸移動
camera.position.z = 5;
);

四、Renderer：把畫面真的顯示出來

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

我們已經建立好場景和相機，但瀏覽器還不知道要怎麼把它畫出來，所以 Renderer 的工作就是把 3D 世界真正顯示在網頁上。

五、結論

要記住這三個基本概念，學會他們就能靈活運用 Three.js。

Scene = 3D 世界
Camera = 看世界的眼睛
Renderer = 畫面顯示出來

現在我們知道 3D 世界是怎麼出現的了，但昨天的方塊為什麼是方塊？又為什麼它是紫色？

下一篇就來看看 Geometry 和 Material，到底是怎麼決定一個 3D 物件的樣子的。