threejs基础知识点，包含渲染器，相机，光源，物体

threeJS四要素渲染器，相机，光源，物体分别对应下面的写法

                initRender();//创建渲染器
                initCamera();//创建相机
                initLight();//创建光源
                initObject();//创建物体

渲染器介绍：

WebGLRenderer使用 WebGL 技术；
CanvasRenderer使用 Canvas 2D 技术；
CSS2DRenderer和CSS3DRenderer则是使用 CSS 技术；

不同渲染器具有不同的特点，简单来说 WebGLRenderer 最强大，CanvasRenderer、CSS2DRenderer 和 CSS3DRenderer 具有较好的兼容性但同时也有居多限制。

需要显示出来，就需要一个容器

<div id="retina"></div>

之后需要设置渲染器

var renderer;//渲染器
var width;
var height;
function initRender(){
    width = window.innerWidth;
    height = window.innerHeight;
    renderer = new THREE.WebGLRenderer({
        antialias : true//抗锯齿开启
    });
    renderer.setSize(width, height);//设置渲染器宽度和高度
    renderer.setClearColor('#000000', 1.0);//设置背景颜色
    renderer.setPixelRatio(window.devicePixelRatio);//设置设备像素比
    document.getElementById('retina').appendChild(renderer.domElement);//把渲染器放置到页面中
}

相机介绍

比较常用有两种，分别为PerspectiveCamera透视投影相机和OrthographicCamera正交投影相机；

创建相机

var camera;
var origPoint = new THREE.Vector3(0, 0, 0);//原点
function initCamera(){
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    camera.position.set(200, 400, 600);//设置相机位置
    camera.up.set(0, 1, 0);//设置相机正方向
    camera.lookAt(origPoint);//设置相机视点
}

new THREE.PerspectiveCamera(fov, aspect, near, far)的参数如下

fov表示视角；
aspect表示裁切面宽高比；
near表示近平面距离；
far表示远平面距离；

只有离相机的距离大于near且小于far，另外还得在相机视角内的物体，才能被相机观察到从而被渲染器渲染出来；

camera.position.set(200, 400, 600);设置相机位置，基于的是右手坐标系，所以camera.up.set(0, 1, 0);表示的是Y轴是相机的正方向，可以理解为一个人的眼睛在y轴正方向上面

接下来是相机的焦点camera.lookAt(origPoint);

旧版一般直接执行lookAt(0,0,0)，但是在新版本中需要把数据先封装为Vector3对象，否则不生效，导致渲染异常。

Vector3( x : Float, y : Float, z : Float )它具有三个属性，分别是x、y、z，这个属性既可以表示三维空间中的点也可以表示向量；

创建光源

方向光，太阳距离地球的距离足够远，其光线可以近似看作平行光，对应 ThreeJS 框架中的DirectionalLight方向光；

聚光灯，手电筒能够朝着一个方向投射类似圆锥形的光线，对应 ThreeJS 框架中的SpotLight聚光灯。

点光源，PointLight点光源则类似于灯泡，其发出的光线照到物体表面的亮度是线性递减的，因此离点光源距离越远的物体会显得越暗。

环境光，在阳光充足没有人造光源的室外，有很多物体能遮挡阳光形成阴影区域，这些阴影区域内的物体不能发光且并不能直接被阳光照射到，按道理应该是漆黑一片才对，但实际上这些阴影区域仅仅只是比周围暗一点而已；究其原因则是因为存在环境光，对应 ThreeJS 框架中的AmbientLight环境光；

var pointLight;
var ambientLight;
function initLight() {
    //点光源
    pointLight = new THREE.PointLight( 0xffffff, 1, 2000 );
    pointLight.position.set(70, 112, 98);
    //环境光
    ambientLight = new THREE.AmbientLight( 0x333333 );
}

new THREE.PointLight(color, intensity, distance, decay)，

color表示光照的颜色；
intensity表示光照强度；
distance表示最远的照射距离，超过该距离后不再有任何光线；
decay表示光照的衰减程度，设置的越大则光照随着距离的增加衰减的越厉害；

环境光只有一个颜色性质，直接调用new THREE.AmbientLight( 0x333333 )创建即可。

创建物体

ThreeJS 框架中封装实现了很多种几何体，例子中使用BoxGeometry

var cube;
function initObject(){
    var geometry = new THREE.BoxGeometry( 100, 100, 100);
    var material = new THREE.MeshLambertMaterial( {color: 0xff0000} );
    cube = new THREE.Mesh( geometry, material );
    cube.position.set(0,0,0);
}

BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

绘制正方体的过程其实就是在八个顶点间连线的过程，每四个顶点组成一个正方形面，最终由六个正方形面组成正方体；

在计算机中构建 3D 物体也是如此，只不过采用的是连接三个顶点组成三角形的方式而已，这个三角形在计算机图形学中被称为三角形网格；

创建场景

//模拟现实场景
function createWorld() {
    initRender();//创建渲染器
    initCamera();//创建相机
    initLight();//创建光源
    initObject();//创建物体
    initScene();//创建场景
    render();//渲染
}
var scene;
function initScene(){
    scene = new THREE.Scene();
    scene.add(pointLight);
    scene.add(ambientLight);
    scene.add(cube);
}

创建场景时不需任何参数，直接执行new THREE.Scene()即可，然后还需要执行其add方法，把光源、物体添加到场景中；