前言
随着HTML5标准的颁布，以及流行浏览器的日益强大，直接在浏览器本中展示三维图形和动画变得越来越容易，也越来越受关注。本期介绍借助Three.js快速创建第一个三维场景。
准备工作：工程环境搭建
1、编译器VSCode
2、安装npm
操作步骤
1. 创建项目
基本网页文件index.html，写入 html5 会自动补全全部的网页文件。
不用看太多，只要输入5个字母 html5，为了项目显示好看加个CSS文件，写入截图内容：
2. 导入
从官网或者github下载最小库文件，在项目中引进库，titile 空行的下方写入截图内容：
3. 创建三大件
每个Three.js项目都必须基于三大件：场景、相机、渲染器组成，你可以把他们封装成一个函数。这是个取巧的方法，执行这个函数，能一次性得到三大件。
4. 初始化辅助网格
初始化辅助网格，第二句添加进场景中。
var grid = new THREE.GridHelper(200, 80)scene.add(grid)
安装完liveserver插件后，按快捷键ctrl+shift+v 调出项目网页。
5. 添加环境光源
var ambint = new THREE.HemisphereLight(0xffffbb, 0x080820)scene.add(ambint)
6. 添加基础物体
①球体
var ball = new THREE.Mesh(new THREE.SphereGeometry(1,20,20), new THREE.MeshStandarMaterial({color: "skyblue"}))scene.add(ball)
② 多拿滋
var torus = new THREE.Mesh(new THREE.TorusGeometry(1,0.5,20,20), new THREE.MeshStandarMaterial({color: "skyblue"}))scene.add(torus)
③ 全家福
1）CircleGeometry 圆
2）RingGeometry 扇形
3）BoxGeometry 立方体
4）CylinderGeometry 圆柱体
5）TorusKnotGeometry 一个打结的圆环
6）PolyhedronGeometry 多面体
IcoshahedronGeometry 正二十面体、TetrahedronGeometry 正四面体、OctahedronGeometry 正八面体、DodecahedronGeometry 正十二面体
7）ConvexGeometry 根据一组点创造一个凸包
8）LatheGeometry由一条曲线创造一个旋转体
9）ExtrudeGeometry 将一个二维图形拉伸成三维图形
10）TubeGeometry 沿着一条曲线拉伸出一条管
11）ParametricGeometry 根据一组等式创建几何体
12）TextGeometry 创建三维的文本
7. 动态渲染场景
这时已经看见这些三维物体了，只要动态改变物体性质（位置、颜色、等等）它还可以渲染成动画，动画需要一个window新版函数，requestAnimationFrame，它有个回调函数，一般是回调自身。
