threejs光源的使用

最新推荐文章于 2024-03-13 09:45:41 发布

努力再努力奋斗再奋斗

最新推荐文章于 2024-03-13 09:45:41 发布

阅读量369

点赞数

分类专栏： threejs+vue3.0 文章标签： js

本文链接：https://blog.csdn.net/zlguaizhang/article/details/127941108

版权

threejs+vue3.0 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

threejs光源的使用

API	详情
AmbientLight（环境光源）	环境光会均匀的照亮场景中的所有物体。环境光不能用来投射阴影，因为它没有方向。
PointLight（点光源）	空间中一点向所有方向发射光源（不能创建阴影）
SpotLight（聚光灯）	有聚光效果，类似台灯，手电筒。可以投射阴影
DirectionalLight（方向光源）	也成无限光，光源发出的光线是平行的，类似太阳光
HemisphereLight（半球光）	创造自然室外光线，模拟反光和光线微弱的天空，模拟室外光线。（不提供与阴影相关的功能）
AreaLight（面光源）	可指定散发光线的平面，不是一个点。（不投射任何阴影）
LensFlare（镜头光晕）	这不是一种光源，给场景添加镜头光晕的效果

环境光 (AmbientLight)

const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

平行光（DirectionalLight）

平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

平行光可以投射阴影

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );

半球光（HemisphereLight）

光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。

半球光不能投射阴影。

const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );

点光源（PointLight）

从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。

该光源可以投射阴影

const light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

平面光光源（RectAreaLight）

平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。

注意事项:

不支持阴影。
只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
你必须在你的场景中加入 RectAreaLightUniformsLib ，并调用init()。

const width = 10;
const height = 10;
const intensity = 1;
const rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )
rectLightHelper = new RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );

聚光灯（SpotLight）

光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。

const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.map = new THREE.TextureLoader().load( url );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );