首页 > 其他分享 >Threejs教程-06-光源和材质

Threejs教程-06-光源和材质

时间:2022-12-02 23:32:28浏览次数:37  
标签:环境光 Threejs 06 光源 物体 教程 THREE 颜色 材质

接上节,讲了 Threejs05”。本节具体讲解一些Threejs的知识点。

Threejs教程-06-光源和材质_环境光

首先有条件的话搞个服务器,这里还是用的三丰云免费云服务器,免费虚拟主机在这里不适用就不介绍了,安装的Centos7版本,相关内容丢到服务器即可,其他教程已经讲过,不多说了。


1、 光源基类

在Threejs中,光源用Light表示,它是所有光源的基类。它的构造函数是:

THREE.Light ( hex )

它有一个参数hex,接受一个16进制的颜色值。例如要定义一种红色的光源,我们可以这样来定义:

Var redLight = new THREE.Light(0xFF0000);

2、 由基类派生出来的其他种类光源


3 环境光

环境光是经过多次反射而来的光称为环境光,无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。因此,当你仅为场景指定环境光时,所有的物体无论法向量如何,都将表现为同样的明暗程度。

环境光用THREE.AmbientLight来表示,它的构造函数如下所示:

THREE.AmbientLight( hex )

它仍然接受一个16进制的颜色值,作为光源的颜色。环境光将照射场景中的所有物体,让物体显示出某种颜色。环境光的使用例子如下所示:

var light = new THREE.AmbientLight( 0xff0000 );

scene.add( light );

只需要将光源加入场景,场景就能够通过光源渲染出好的效果来了。

4 点光源

点光源:由这种光源放出的光线来自同一点,且方向辐射自四面八方。例如蜡烛放出的光,萤火虫放出的光。

点光源用PointLight来表示,它的构造函数如下所示:

PointLight( color, intensity, distance )

这个类的参数稍微复杂一些,我们花点时间来解释一下:

Color:光的颜色

Intensity:光的强度,默认是1.0,就是说是100%强度的灯光,

distance:光的距离,从光源所在的位置,经过distance这段距离之后,光的强度将从Intensity衰减为0。 默认情况下,这个值为0.0,表示光源强度不衰减。

5 聚光灯

聚光灯:这种光源的光线从一个锥体中射出,在被照射的物体上产生聚光的效果。使用这种光源需要指定光的射出方向以及锥体的顶角α。聚光灯示例如图所示:


聚光灯的构造函数是:

THREE.SpotLight( hex, intensity, distance, angle, exponent )

函数的参数如下所示:

Hex:聚光灯发出的颜色,如0xFFFFFF

Intensity:光源的强度,默认是1.0,如果为0.5,则强度是一半,意思是颜色会淡一些。和上面点光源一样。

Distance:光线的强度,从最大值衰减到0,需要的距离。 默认为0,表示光不衰减,如果非0,则表示从光源的位置到Distance的距离,光都在线性衰减。到离光源距离Distance时,光源强度为0.

Angle:聚光灯着色的角度,用弧度作为单位,这个角度是和光源的方向形成的角度。

exponent:光源模型中,衰减的一个参数,越大衰减约快。

6 材质与光源的关系

1、 材质的真相

材质就是材料和质感的完美结合

在渲染程序中,它是表面各可视属性的结合,这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。正是有了这些属性,才能让我们识别三维中的模型是什么做成的,也正是有了这些属性,我们计算机三维的虚拟世界才会和真实世界一样缤纷多彩。

在不同的光源下,材质可能很难辨别。

脚印一:不带任何光源的物体

我们首先在屏幕上画一个物体,不带任何的光源,定义物体的颜色为黑色,其值为0x000000,定义材质如下:

var material = new THREE.MeshLambertMaterial( { color:0x000000} ); // 这是兰伯特材质,材质中的一种。

当没有任何光源的时候,最终的颜色将是黑色,无论材质是什么颜色。

8 脚印二:兰伯特材质与光源

最常见的材质之一就是Lambert材质,这是在灰暗的或不光滑的表面产生均匀散射而形成的材质类型。比如一张纸就是Lambert表面。 首先它粗糙不均匀,不会产生镜面效果。我们在阅读书籍的时候,没有发现书上一处亮,一处不亮吧,它非常均匀,这就是兰伯特材质。

有的朋友觉得纸不粗糙啊,你怎么说它粗糙吗?人的肉眼是不好分辨出来,它粗不粗糙的。

Lambert材质表面会在所有方向上均匀地散射灯光,这就会使颜色看上去比较均匀。想想一张纸,无论什么颜色,是不是纸的各个部分颜色都比较均匀呢。

Lambert材质会受环境光的影响,呈现环境光的颜色,与材质本身颜色关系不大。

长方体显示红色,是因为长方体反射了红色的光,长方体本身的颜色是0x880000,光源的颜色是0xFF0000,红色的光照在物体上,物体反射了红色的光,所以呈现红色。

9 脚印三:环境光对物体的影响

环境光就是在场景中无处不在的光,它对物体的影响是均匀的,也就是无论你从物体的那个角度观察,物体的颜色都是一样的,这就是伟大的环境光。

你可以把环境光放在任何一个位置,它的光线是不会衰减的,是永恒的某个强度的一种光源。

5 脚印四:方向光(平行光)

平行光又称为方向光(Directional Light),是一组没有衰减的平行的光线,类似太阳光的效果。


方向光的构造函数如下所示:

THREE.DirectionalLight = function ( hex, intensity )

其参数如下:

Hex:关系的颜色,用16进制表示

Intensity:光线的强度,默认为1。因为RGB的三个值均在0~255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。它的取值范围是0到1。如果为0,表示光线基本没什么作用,那么物体就会显示为黑色。



标签:环境光,Threejs,06,光源,物体,教程,THREE,颜色,材质
From: https://blog.51cto.com/u_15835650/5907706

相关文章

  • 博客园页面定制CSS代码 教程
    花了一点时间修改自己的博客背景设置,现在分享一下代码。希望对大家有帮助。我的比较简单,主要代码模板来源于另外一个博主,然后我在基础上进行了部分修改。博主的连接:h......
  • asp教程:ASP开发中存储过程应用详解
    ASP开发中存储过程应用详解|调用,参数,存储,数据库,输出,编译,mycomm,输入,userid,代码ASP与存储过程(StoredProcedures)的文章不少,但是我怀疑作者们是否真正实践过。......
  • 全栈性能测试教程之性能测试相关知识(二) Jmeter的应用
     1、性能测试的方法1.1验收负载测试:在QA的环境模拟生产运行的业务压力和使用场景组合,测试系统的性能是否满足生产环境的性能诉求。1.2负载测试在被测系统上持续不断的增加......
  • 全栈性能测试教程之性能测试理论(一) mockserver应用
    性能测试理论(一)mockserver应用1、mockServer1.1什么是mockServermoco=替代   Server=服务mocoServer即为测试替身的服务主要针对于单元测试的应用,主要应用于解除单元......
  • 【干货】超详细!TPC7062封装MQTT协议教程
    【干货】超详细!TPC7062封装MQTT协议教程一.功能简介通过将报文分解为16进制格式的字符串(比如:101C00044D51545404C2),再通过TPC-7062进行组包,利用串口服务器的TCP/IP协议栈连接......
  • 【JAVA】基于SpringSecurity登录的详细教程
    不知道抽起哪根筋,花了一周的时间终于写了个基于springsecurity的登录的样例,4、5年前在学springboot时曾经按书上的例子却怎么也写不出来,算是了却自己的一桩心愿吧。当然,我不......
  • 如何使用 Docker 私有化部署 GitLab 教程 All In One
    如何使用Docker私有化部署GitLab教程AllInOneCI/CDGitLabInstallself-managedGitLabSelf-managed–installonyourowninfrastructurehttps://abou......
  • PS新手教程-如何使用PS制作一幅水晶球里的梦幻世界图片
    如何使用PS制作一幅水晶球里的梦幻世界图片?给大家介绍如何使用PS制作一幅水晶球里的梦幻世界图片,一起来看看吧。1.打开ps,打开水晶球素材图片编辑​2.执行选择-主体......
  • IDEA 2021版新建Maven、TomCat工程的详细教程
    这篇文章主要介绍了IDEA2021版新建Maven、TomCat工程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下目录......
  • KBL406-ASEMI插件整流桥KBL406
    编辑:llKBL406-ASEMI插件整流桥KBL406型号:KBL406品牌:ASEMI封装:KBL-4特性:整流桥正向电流:4A反向耐压:600V恢复时间:>2000ns引脚数量:4芯片个数:4芯片尺寸:84MIL浪涌电流:120A 漏电流:>......