首先介绍threejs的基本构成
基本组件：场景，摄像机，渲染器
场景： new THREE.Scene()
摄像机： new THREE.PerspectiveCamera()
渲染器： new THREE.WebGLRendere()
如何理解上述基本组件呢？举个例子：
桌子上的一个苹果。苹果和桌子所在的空间可以理解成一个场景，人的眼睛就是摄像机，眼睛接收到信息再回执给大脑就是一个渲染器。
1.创建场景
let scene = new THREE.Scene()
2.创建摄像机
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
摄像机这里介绍两种基本的：正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。
透视投影照相机对应投影到的物体的大小是随着距离逐渐变小的，而正投影照相机投影到的物体大小是不受距离影响的。
基本参数，分别是fov，aspect，near，far 。
fov表示摄像机视锥体垂直视野角度，最小值为0，最大值为180，默认值为50，实际项目中一般都定义45，因为45最接近人正常睁眼角度；
aspect表示摄像机视锥体长宽比，默认长宽比为1，即表示看到的是正方形，实际项目中使用的是屏幕的宽高比；
near表示摄像机视锥体近端面，这个值默认为0.1，实际项目中都会设置为1；
far表示摄像机视锥体远端面，默认为2000，这个值可以是无限的，说的简单点就是我们视觉所能看到的最远距离。
3.设置相机位置
camera.position.set(20, 20, 20);
camera.lookAt(scene.position);
为了确保渲染物体能被摄像机拍到，需要使用lookat方法将其指向场景中心（默认是0，0，0）
4.创建渲染器
let renderer = new THREE.WebGLRenderer();
设置渲染器颜色和面积
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
上述步骤基本搭建完成，接下来我们就要往空间里添加物体了
为了辅助物体的创建，我们先要创建一个三维坐标系（这个三维坐标系的原点就是空间的中心位置，接下来的物体创建的位置都将以此为原点）
let axes = new THREE.AxesHelper(10)
将三维坐标系添加到场景中
scene.add(axes)
我们先创建一个简单的几何体
第一步创建一个模型
let planeGeometry = new THREE.PlaneGeometry(30, 30)
第二部给模型贴上材质
let planeMaterial = new THREE.MeshBasicMaterial({
color: 0x845EC2
})
第三步组合、设置位置，添加到场景中
组合当前几何体 Points Line Mesh
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
设置该几何体位置
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, 0, 0);
将几何体添加到场景
scene.add(plane)
最后将渲染器挂载到dom
document.getElementById("webgl-output").appendChild(renderer.domElement);
渲染器渲染加载场景及摄像机
renderer.render(scene, camera)
另外介绍一下光源及阴影相关概念
上述创建物体时候写到了创建材质，材质是有很多种的，普通材质、法向量材质等等。在我们生活中，不同的材质遇到光照产生的效果也是不同，因此threejs中的光源概念就产生了。 在代码里如果未加光源，那么创建的物体都是看不见的，漆黑如夜。 光源有很多种，比如环境光（太阳光的效果）、点光源（手电筒）、还有可以产生阴影的光源。 接下来说说阴影，阴影的前提下是需要一个可以产生阴影效果的光源，所以阴影是需要设置接受投影的物体，需要一个开关开控制（其他场景的物体要开启投射或者接受阴影）。
spotLight.castShadow = true;
//设置用多少像素生成阴影（值越大，越细腻）
spotLight.shadow.mapSize = new THREE.Vector2(7000, 7000);
//投影远点（设置到距离光源的哪个位置生成阴影）
spotLight.shadow.camera.far = 130;
//投影近点（设置从距离光源的哪个位置生成阴影）
上述就是threejs基本组件及相关定义的简单介绍，如有兴趣深入研究，一代宗师指日可待。
