纳金网

标题: 利用HTML5构筑物理模拟环境3.3【转】 [打印本页]

---

作者: 会飞的鱼    时间: 2012-8-22 15:09
标题: 利用HTML5构筑物理模拟环境3.3【转】
例２－３：TUTORIAL2_3.HTML（设置环境光）
在Three.js里，光源有直接照射到物体的光源（平行光源，聚灯光源，点光源）和间接照射到物体的环境光源。 在此之前设置了直接光源， 本节开始设置环境光。 首先，确认一下加上环境光后物体的照射例子。


和例２－２相比、可以看出直接光照射不到的地方变得明亮一些了。 现实中，关于环境光不是光源直接照射形成的，而是因为各种物体漫反射形成的。 在计算机图形处理世界中，这样间接照射在物体上的光线被称为环境光。 在OpenGL中，环境光是通过直接光源的参数添加进去的，而Three.js中把环境光定义为光源的一种。 具体来说像下面这样向平行光源添加环境光。
var light, light2;

function initLight() {

  light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);

  light.position.set( 50, 50, 200 );

  scene.add(light);
  light2 = new THREE.AmbientLight(0x555555);

  scene.add(light2);

}环境光和直接光都一样，利用相关构造函数声明对象然后添加到场景。 另外，环境光的强度可以通过构造函数的参数来指定（上面的例子中：0×555555）。 同时要让环境光照射到物体，只是设置光源是不够的，还需要向物体的材质中设置 [ambient] 属性。
var cube = Array();

function initObject(){

  for(var i=0; i<3; i++){

    cube = new THREE.Mesh(

         new THREE.CubeGeometry(50,50,50),

         new THREE.MeshLambertMaterial({color: 0xff0000, ambient:0xFF0000})

    );

    scene.add(cube);

    cube.position.set(0,-100+100*i,0);

  }

}声明物体材质的构造函数中的参数里，设置 [ambient] 属性。 这个属性，通过16进制指定了对于环境光反射的强度。简单说，实际物体绘制的颜色，是根据环境光 和这个属性的乘积决定的， 如果环境光和ambient属性都是「0xFFFFFF」的话，那么物体将把环境光都反射出去而看起来为白色。

---

欢迎光临 纳金网 (http://go.narkii.com/club/)

Powered by Discuz! X2.5