返回介绍

threejs 光源

发布于 2021-07-10 20:14:15 字数 2179 浏览 978 评论 0 收藏 0

为了更好的渲染场景,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); //点光源添加到场景中

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文