发布于 2016-12-28 22:06:48 | 215 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

Three.js JS3D 引擎库

three.js是JavaScript编写的WebGL第 三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

---

好久没看Three.js源码了。今天天气不错，接着看;这次从光照部分看起：光照模型，从光线本身角度来看包括环境光、平行光、点光源，从物体表面材质角度看又包括漫反射和镜面反射,需要了解的朋友可以参考下
天气越来越冷了，人也越来越懒怠，越来越像呆在温暖的寝室里看小说或者打游戏，也好久没看Three.js源码了。今天天气不错，接着看！

这次从光照部分看起：光照模型，从光线本身角度来看包括环境光、平行光、点光源，从物体表面材质角度看又包括漫反射和镜面反射。

Lights:Light

 
THREE.Light = function ( hex ) { 
THREE.Object3D.call( this ); 
this.color = new THREE.Color( hex ); 
}; 

该对象是其他光照对象的原型/基类，本身继承自Object3D对象/类型。它自身只有一个THREE.Color类型的color属性，就是颜色，这很好理解。

在Three.js中，光照作为一种Object3D对象，是经过Scene.add()方法加入到场景中的，渲染器会自动渲染所加入的光照效果。
Light::AmbientLight

 
THREE.AmbientLight = function ( hex ) { 
THREE.Light.call( this, hex ); 
}; 

无方向的环境光，并没有比Light类型多一个属性或方法，而仅仅为了语义上的继承而继承自Light，它甚至没有必要是Object3D对象。

Light::DirectionalLight

 
THREE.DirectionalLight = function ( hex, intensity ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.castShadow = false; 
this.onlyShadow = false; 
// more settings about shadow ...... 
}; 

平行光（有方向的光），使用new运算符构造该函数时需传入颜色hex和光线的“密度”intensity。这个类有这样一些属性：
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。
还有不少属性暂时猜不出含义（真该去补补计算机图形学啊，硬着头皮继续看吧）。

Light::PointLight

 
THREE.PointLight = function ( hex, intensity, distance ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 0, 0 ); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance !== undefined ) ? distance : 0; 
}; 

点光源，position那肯定就是光源点了。注意点光源的position和平行光的position的区别，前者默认在原点，而后者默认在点（0，1，1），这使得默认的平行光方向和相机的默认朝向一致。
其他两个属性和平行光中一样。PointLight点光源没有关于如何产生阴影的设定。

Light::SpotLight

 
THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance !== undefined ) ? distance : 0; 
this.angle = ( angle !== undefined ) ? angle : Math.PI / 2; 
this.exponent = ( exponent !== undefined ) ? exponent : 10; // more settings about shadow... 
}; 

一种可以在某个方向上产生阴影的点光源，影响MeshLamberMaterial和MeshPhongMaterial类型材质的表面。对阴影如何处理的设定和DirectionLight一致。
总之，光照对象并不承担渲染光照的任务，而仅仅是定义如何渲染光照。
Object::Partical

  
THREE.Particle = function ( material ) { 
THREE.Object3D.call( this ); 
this.material = material; 
}; 

粒子就是一个由材质的Object3D，这很好理解。Object3D对象提供一个坐标（就是粒子的坐标），负责粒子的运动，粒子只需要指定表现它的材质即可。

Object::ParticalSystem

 
THREE.ParticleSystem = function ( geometry, material ) { 
THREE.Object3D.call( this ); 
this.geometry = geometry; 
this.material = ( material !== undefined ) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } ); 
this.sortParticles = false; 
if ( this.geometry ) { 
if( this.geometry.boundingSphere === null ) { 
this.geometry.computeBoundingSphere(); 
} 
this.boundRadius = geometry.boundingSphere.radius; 
} 
this.frustumCulled = false; 
}; 

粒子系统表现多个粒子的运动，粒子系统本身继承自是Object3D对象。有这样几个属性：
geometry属性，每一个节点都是一个粒子，这些共享一个材质。
material属性，即这些节点的材质。

frustumCulled属性，布尔值，如果设定为真，那么在相机视界之外的会被踢出，但还没弄清楚是粒子系统中心坐标在视界外就踢出整个粒子系统还是单个粒子出去了就剔除，猜测多半是后者。

其实这几篇都是涉及怎么定义场景的，至于怎么渲染场景很难有深入。我准备接下来去看Demo的代码，结合者看看WebGLRenderer类的源代码（几千行OMG）。