为了更好的渲染场景,threejs提供了生活中常见的一些光源的API。
你可以测试前面几节课案例中的光源代码,比如全部删除所有的光源代码,你会发现场景中的物体是黑色的,就像生活中一样没有光,物体是黑色的。

常见光源类型

本节课不会对threejs各类光源进行深入介绍,主要是简单展示下,对于初学者有一个印象就可以。

光源 简介
AmbientLight 环境光
PointLight 点光源
DirectionalLight 平行光,比如太阳光
SpotLight 聚光源

环境光源创建:

之前写的demo中,为了展示其实都做了环境光源或者点光源才能看到对应的模型,没有光源,场景中的物体将是黑色的,调用THREE.AmbientLight构造函数来实现

  1. //环境光
  2. var ambient = new THREE.AmbientLight(0x444444);
  3. scene.add(ambient);

点光源创建:

  1. //点光源
  2. var point = new THREE.PointLight(0xffffff);
  3. point.position.set(400, 200, 300); //点光源位置
  4. scene.add(point); //点光源添加到场景中

立体效果

仅仅使用环境光的情况下,你会发现整个立方体没有任何棱角感,这是因为环境光知识设置整个空间的明暗效果。如果需要立方体渲染要想有立体效果,需要使用具有方向性的点光源、平行光源等。

光源光照强度

通过光源构造函数的参数可以设置光源的颜色,一般设置明暗程度不同的白光RGB三个分量值是一样的。如果把THREE.AmbientLight(0x444444);的光照参数0x444444改为0xffffff,你会发现场景中的立方体渲染效果更明亮。

光源位置

获取点光源实例对象后,客运通过position属性进行设置点光源位置

  1. //点光源
  2. var point = new THREE.PointLight(0xffffff);
  3. point.position.set(400, 200, 300); //点光源位置
  4. scene.add(point); //点光源添加到场景中