Three.js初学(待续)

如何设置相机：

      OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。 

      透视投影：就是从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 

      正投影：就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。

     在此以示例讲解开发中出现的问题。

var camera;
//此处为设置透视投影的相机，（视野角：fov； 纵横比：aspect； 相机离视体最近的距离：near； 相机离视体最远距离：far）
camera =newTHREE.PerspectiveCamera(45,width/height,1,10000);
//设置相机的位置坐标

camera.position.set(0, 0, 1000); //放置位置

//设置相机的上为z轴方向
camera.up.x =0;
camera.up.y =0;
camera.up.z =1;
//设置视野的中心坐标，即让相机对准原点
camera.lookAt({x:0, y:0, z:0});

问题：
注意：默认屏幕右方向为X轴，上方向为Y轴，垂直屏幕朝外为Z轴。

1、设置相机离视体最远的距离，不要设置的太小如1000，如果太小就会出现，模型稍一缩放就会消失，或者如果模型本身尺寸比较大，就会显示不完全。要根据相机的放置位置和模型的大小进行参数的调整。

如何设置光源：

Three.js中有以下几种光源：

点光源（PointLight ）、平行光（DirectionalLight）、聚光灯（SpotLight）还有环境光（AmbientLight ）。在一个场景中可以设置多个光源，一般都是环境光和其他几种光源进行组合。 

注意问题：如果不设置环境光，那么光线照射不到的面会变得过于黑暗。

示例代码如下：

//设置平行光DirectionalLight
var light =newTHREE.DirectionalLight(0x0000FF,1.0,0);
light.position.set(50,50,50);//光源向量，即光源的位置
//还可以添加多个光源
light2 = new THREE.DirectionalLight(0xFF00CC,1.0,0);
light2.position.set(0,50,0);
//添加环境光
var ambient = new THREE.AmbientLight( 0x444000 );
scene.add( ambient );
scene.add(light);
scene.add(light2);//追加光源到场景

注意使用平行光的一些参数设置：

（以下是参考大神对源码的分析，相关网址如下：http://www.jb51.net/article/32859.htm）

平行光默认点在（0,1,1）与相机的默认方向是一致的，点光源默认点是（0,0,0）

position：一个位置，以该位置为起点，原点为终点的方向是光线的方向。

intensity：光线的密度，默认为1。因为RGB的三个值均在0~255之间，不能反映出光照的强度变化，光照越强，物体表面就更明亮。

distance：衰减距离，默认值为0，光照无衰减；如果是非0值，光照会从position位置（实际上是position所处的那个平面）开始衰减，衰减到distance距离之后，光照强度intensity为0。

castShadow：布尔值，控制是否产生阴影，默认为false。如果设为true，对于所有表面都会逐像元地计算其在光照方向上是否被遮挡，这会消耗大量的计算。

onlyShadow：布尔值，控制是否只产生阴影而不“照亮”物体，默认为false。这种模式也许有什么特殊应用吧。

shadowCameraLeft，shadowCameraRight……系列，以position点为中心控制产生阴影的范围？

shadowBias：阴影偏心，默认为0。

shadowDarkness：阴影对物体亮度的影响，在0~1之间，默认为0.5。