利用HTML5构筑物理模拟环境3.4【转】

会飞的鱼

例２－４：TUTORIAL2_4.HTML（影子的设置）



WebGL（OpenGL）中，没有绘制相对于某个光源的物体阴影的API, 需要使用其它途径来计算。 利用Three.js, 只要简单设置一下就可以实现。


设置物体的阴影， 需要设置下面这4个对象属性。

(1) 渲染器

(2) 光源

(3) 生成阴影的原物体

(4) 绘制阴影的物体

模式图就象下面这样。



具体就是在各函数中追加一些对象的属性。
function initThree() {

（省略）

  renderer.shadowMapEnabled = ***e;//影をつける(1)

}function initLight() {

（省略）

  light.castShadow = ***e;//影をつける（2）

（省略）

}function initObject(){

（省略）

  cube.castShadow = ***e;//影をつける（3）

（省略）

  plane.receiveShadow = ***e; //影をつける（4）

（省略）

}使用阴影的时候需要注意的是，阴影的计算成本非常的高， 过于使用阴影功能会影响处理速度。