为了更好的渲染场景,threejs提供了生活中常见的一些光源的API。
你可以测试前面几节课案例中的光源代码,比如全部删除所有的光源代码,你会发现场景中的物体是黑色的,就像生活中一样没有光,物体是黑色的。
常见光源类型
本节课不会对threejs各类光源进行深入介绍,主要是简单展示下,对于初学者有一个印象就可以。
光源 | 简介 |
---|---|
AmbientLight | 环境光 |
PointLight | 点光源 |
DirectionalLight | 平行光,比如太阳光 |
SpotLight | 聚光源 |
环境光源创建:
之前写的demo中,为了展示其实都做了环境光源或者点光源才能看到对应的模型,没有光源,场景中的物体将是黑色的,调用THREE.AmbientLight构造函数来实现
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
点光源创建:
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
立体效果
仅仅使用环境光的情况下,你会发现整个立方体没有任何棱角感,这是因为环境光知识设置整个空间的明暗效果。如果需要立方体渲染要想有立体效果,需要使用具有方向性的点光源、平行光源等。
光源光照强度
通过光源构造函数的参数可以设置光源的颜色,一般设置明暗程度不同的白光RGB三个分量值是一样的。如果把THREE.AmbientLight(0x444444);
的光照参数0x444444
改为0xffffff
,你会发现场景中的立方体渲染效果更明亮。
光源位置
获取点光源实例对象后,客运通过position属性进行设置点光源位置
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中