Three.js 场景、相机、渲染（01）

前言：本篇主要是three.js的一个介绍，了解WebGL与three.js的关系。以及three.js的四个重要的组建。

一、什么是WebGL？

WebGL是一项可以在浏览器中流畅展示3D模型和场景的一种技术。他使用JavaScript作为编程语言，调用浏览器支持的3D绘制函数，来实现3D模型和场景的展现。

1.1浏览器为什么能绘制3D？

因为浏览器实现了OpenGL es的规范，这套规范可以直接使用指令操作显卡，使显卡渲染的3D世界，直接反应到浏览器中。

1.2webgl能做什么

• 游戏
• 家居
• 虚拟现实
• 城市地图
• CAD制图

1.3 WebGL与three.js的关系

three.js是一个封装好的WebGL库，他使WebGL的学习更为简单。

1.4 导入three.js

（1）直接npm

如果使用了框架，可以npm后再导入

npm install three --save

在使用的文件中引入

var THREE = require('three');
//或者
import * as THREE from 'three';

（2）单页面中引入

首先先在官网下载好最新版本的three.js压缩包，解压后在build文件夹中找到three.js文件，将它复制到使用的文件夹下即可。

<script src="./js/three.js"></script>

二、四大组建

在three.js中，要渲染物体到网页中，需要4个组建：场景、相机、渲染器、和几何体。<