JAVA、PHP、前端、APP、网站开发 - 开发技术学习

开发技术学习 » 前端设计 » Threejs系列-灯光

Threejs系列-灯光

此文被围观488日期: 2022-07-12 分类 : 前端设计  标签:  ········

光源


threejs提供了 Light对象以及其它子对象,可以使得我们非常方便的管理灯光效果。


Light是光源的基类,不要直接使用,我们应该使用其派生类。


//关于Light

Light( color : Integer, intensity : float )

color:16进制表示光的颜色,默认白色。

intensity:光照强度,默认1。


创造光源


环境光

使用AmbientLight,环境光将均匀照亮场景中所有物体,但是不能设置阴影,它没有方向。

//构造函数

AmbientLight( color : Integer, intensity : Float )

color:16进制表示光的颜色,默认白色。

intensity:光照强度,默认1。


//创建一个环境光

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

scene.add( light );



平行光

使用DirectionalLight,平行光是沿着特定方向,可以是无限远之处发射的光,我们常常用来模拟太阳。可以投射阴影。

//构造函数

DirectionalLight( color : Integer, intensity : Float )

color:16进制表示光的颜色,默认白色。

intensity:光照强度,默认1。

//创建一个平行光

var light  = new THREE.DirectionalLight( 0xffffff );

scene.add( light );


半球光

使用HemisphereLight,它的变化过程是颜色从天空颜色渐变到地面颜色。不能投射阴影。

//构造函数

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

skyColor:天空发出光线的颜色,默认白色。

groundColor:地面发出光线的颜色,默认白色。

intensity:光照强度,默认1。

//创建一个半球光

var light = new THREE.HemisphereLight( 0xff0000, 0x0000ff );

scene.add( light );


点光源

使用PointLight,从一个点向各个方向发出的光源,例如模拟灯泡。

//构造函数

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

color:光照颜色,默认白色。

intensity:光照强度,默认1。

distance: 从光源到光照强度为0的位置。 当设置为0时,光永远不会消失(距离无穷大),默认0。

decay:沿着光照距离的衰退量,默认1。


//创建一个点光源

var light = new THREE.PointLight( 0xff0000, 1, 200 );

light.position.set( 50, 50, 50 ); //设置光源在场景中的位置

scene.add( light );



平面光光源

使用RectAreaLight,从矩形平面均匀发出光线,用来模拟窗户的玻璃反光。不支持阴影。只支持MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。

//构造函数

RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )

color:光照颜色,默认白色。

intensity:光源强度/亮度 ,默认1。

width:光源宽度,默认10。

height:光源高度,默认10。

//创建一个平面光源

var light= new THREE.RectAreaLight( 0xff0000, 1,  500, 500 );

light.position.set( 50, 50, 50 ); //设置光源位置

scene.add( light)


聚光灯

使用SpotLight,从一个点发出,沿着圆锥体,向一个方向照射。支持投射阴影。

//构造函数

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

color:光照颜色默认白色。

intensity:光照强度,默认1。

distance:从光源发出光的最大距离,其强度根据光源的距离线性衰减。

angle:光线散射角度,最大为Math.PI/2。

penumbra:聚光锥的半影衰减百分比。在0和1之间的值。默认为0。

decay:沿着光照距离的衰减量。


//创建一个平面光源

var light= new THREE.SpotLight( 0xffffff );

light.position.set( 100, 1000, 100 ); //设置光源位置

scene.add( light);


来源:https://blog.csdn.net/weixin_45111820/article/details/118676532

站点声明:部分内容源自互联网,为传播信息之用,如有侵权,请联系我们删除。

© Copyright 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号