threejs 光源
优质
小牛编辑
127浏览
2023-12-01
为了更好的渲染场景,threejs提供了生活中常见的一些光源的API。
你可以测试前面几节课案例中的光源代码,比如全部删除所有的光源代码,你会发现场景中的物体是黑色的,就像生活中一样没有光,物体是黑色的。
常见光源类型
本节课不会对threejs各类光源进行深入介绍,主要是简单展示下,对于初学者有一个印象就可以。
光源 | 简介 |
---|---|
AmbientLight | 环境光 |
PointLight | 点光源 |
DirectionalLight | 平行光,比如太阳光 |
SpotLight | 聚光源 |
环境光创建
//环境光 环境光颜色与网格模型的颜色进行RGB进行乘法运算
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
点光源创建
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
// 通过add方法插入场景中,不插入的话,渲染的时候不会获取光源的信息进行光照计算
scene.add(point); //点光源添加到场景中
光源通过add
方法插入场景中,不插入的话,渲染的时候不会获取光源的信息进行光照计算
立体效果
仅仅使用环境光的情况下,你会发现整个立方体没有任何棱角感,这是因为环境光知识设置整个空间的明暗效果。如果需要立方体渲染要想有立体效果,需要使用具有方向性的点光源、平行光源等。
光源光照强度
通过光源构造函数的参数可以设置光源的颜色,一般设置明暗程度不同的白光RGB三个分量值是一样的。如果把THREE.AmbientLight(0x444444);
的光照参数0x444444
改为0xffffff
,你会发现场景中的立方体渲染效果更明亮。
光源位置
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
你可以把点光源的位置设置为(0,0,0)
,然后不使用其它任何光源,这时候你会发现场景中立方体渲染效果是黑色。其实原因很简单,立方体是有大小占,用一定空间的,如果光源位于立方体里面,而不是外部,自然无法照射到立方体外表面。
point.position.set(0, 0, 0);
如果只设置一个点光源的情况下,你通过鼠标旋转操作整个三维场景,你会发现立方体点光源无法照射的地方相对其他位置会比较暗,你可以通过下面的代码在新的位置插入一个新的光源对象。点光源设置的位置是(-400, -200, -300),相当于把立方体夹在两个点光源之间。
// 点光源2 位置和point关于原点对称
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-400, -200, -300); //点光源位置
scene.add(point2); //点光源添加到场景中