前言
本篇通过一个简单的入门案例了解three.js的基础知识。实践是增强知识记忆的最好方法，单独的看官网文档很枯燥看不下去。还好官网上提供了很多优秀的示例，接下来通过手敲一系列的示例代码来学习three.js知识。这些示例可代码可以帮助我们深入的了解three.js代码的各种灵活用法。
基本架构
import * as THREE from 'three';
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
上面代码就是three.js的最基本架构。三个在three.js结构中非常重要的概念。
(1) 创建相机（camera ），相机是指在3D场景中的角度，代表着三维空间内观察者的位置。three.js 有着多种相机用来呈现不同的效果。主要有透视相机(PerspectiveCamera) 和正交相机(OrthographicCamera)。
(2) 创建场景（scene）, 场景就是在3D中展示的东西的总和，我们想要展示的物品、模型、灯光都是需要添加到场景中的。
(3) 创建渲染器（renderer）, 渲染器是将相机和场景渲染到页面中显示出来。
代码运行后就会得到一个全黑的页面，这就是three.js的最初始的样子，全黑是因为我们还没有往里面添加东西。
要有光
在three.js提供了好几类的光源，这里我们用到了环境光和点光源。
//环境光 环境光颜色与网格模型的颜色进行RGB进行乘法运算
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(40, 40, 40); //点光源位置
scene.add(point);
环境光是会与3D空间内模型的每一面都进行颜色运算的。
点光源是从设置的位置向外计算照射到的才会进行颜色运算。
添加模型
var geometry = new THREE.BoxGeometry(1, 1, 1); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({ //材质对象Material
color: 0x0000ff
});
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
BoxGeometry 是立方几何体，在three.js 中设置了很多的几何体造型都是可以直接使用的。
MeshLambertMaterial 是一种网格材质，可以与光照发生反应产生不同的颜色变化。
camera.position.set(5,5,5); // 设置相机的位置
camera.lookAt(0,0,0); // 设置相机所观察的方向
renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
这时就能看到页面中的立方块了。
旋转动画
three.js是通过每次执行渲染对象WebGLRenderer的渲染方法.render()来将3D场景渲染出一帧的图像显示在页面上，当我们多次调用渲染方法就可以不停的生成新的图像来覆盖原图像，这样让物品一遍旋转一遍不停的渲染.render() 就是实现旋转动画的效果。
将 renderer.render(scene, camera); 替换为：
function animation() {
requestAnimationFrame(animation);
mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
renderer.render(scene, camera);
}
animation();
requestAnimationFrame 是浏览器提供的API，参数是一个函数，这个API接口是会跟随浏览器渲染频率进行执行的，也就是说浏览器一般是60FPS的频率，大约每16.7ms刷新页面显示，这时requestAnimationFrame就会跟随这个频率调用传入的函数，这样就可以让页面看起来非常流畅。
添加鼠标控制
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
let controls = new OrbitControls(camera, renderer.domElement);
OrbitControls 为轨道控制器，可以使得相机围绕目标进行轨道运动。支持鼠标左中右键操作和键盘操作。
将 camera 和 renderer 渲染的 elenment 作为参数传进去，浏览器会监测鼠标的变化，并通过算法转化更新相机的视角，再通过不停渲染到页面之上。
为了方便调试预览threejs提供了一个辅助三维坐标系AxisHelper，可以直接调用THREE.AxisHelper创建一个三维坐标系添加到场景中。
const axesHelper = new THREE.AxesHelper( 3 );
scene.add( axesHelper );
结语
本篇只是写了一个three.js的一个入门小例子，想要进一步的了解可以通过对上面代码通过修改参数，注释部分代码对比的方式加深对three.js的理解。
其他示例：
挤压缓冲几何体ExtrudeGeometry：juejin.cn/post/711983…
光线与物体的作用 lights_physical：juejin.cn/post/712124…
