1、簡介；

Three.js依賴一些要素，第一是scene，第二是render，第三是carmea

npm install --save?three
import * as THREE from "three";
import?{?GLTFLoader?}?from "three/examples/jsm/loaders/GLTFLoader.js";  
import?{?OrbitControls?}?from "three/examples/jsm/controls/OrbitControls";

2、scene；

scene可以理解為我們將要渲染的環境、背景。

scene.background = new THREE.Color('#eee')

3、render；

創建一個WebGLRenderer，將canvas和配置參數傳入:

const canvas = document.querySelector('#three')；
const renderer = new THREE.WebGLRenderer({?canvas, antialias: true?})；

4、carmea；

最后我們來創建一個camera用來觀看場景里的內容,Three.js提供多種相機，比較常用的是PerspectiveCamera（透視攝像機）以及OrthographicCamera?（正交投影攝像機）。

透視相機用來模擬人眼所看到的景象，物體的大小會受遠近距離的影響，它是3D場景的渲染中使用得最普遍的投影模式。

而正交投影攝像機，不具有透視效果，即物體的大小不受遠近距離的影響。透視相機用來模擬人眼所看到的景象，物體的大小會受遠近距離的影響，它是3D場景的渲染中使用得最普遍的投影模式。

而正交投影攝像機，不具有透視效果，即物體的大小不受遠近距離的影響。

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)；