Three.js 详细解析（持续更新）

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)；