Three.js (二) 光源、投影、光晕

2020-03-05  本文已影响0人  李霖弢

光源

var helper = new THREE.HemisphereLightHelper(hemiLight);
scene.add(helper);
环境光

THREE.AmbientLight( fex )
环境光是经过多次反射而来的光,无处不在,会照射到场景内的任何一个物体的任何一面,且具有相同的明暗程度,因此不会产生阴影。(这是因为,反射光可以从各个方向进入您的眼睛)

点光源

PointLight( fex, intensity, distance, decay )
由这种光源放出的光线来自同一点,且方向辐射自四面八方,光强度可随着距离衰减。例如萤火虫放出的光。

平行光

DirectionalLight( hex, intensity )
平行光又称为方向光,是一组来自无限远处的没有衰减的平行光线,类似太阳光的效果(太阳是如此遥远,所有的阳光照射到物体上都几乎来自同一个角度)。

平行光的方向总是为从光的位置position照向target的一个向量(因此对平行光实例做旋转没有效果),其效果只与方向有关,与离物体的远近无关,其位置仅用于决定方向。

var targetObject =  new THREE.Object3D(); 
targetObject.position.set(8, 0, 5);
scene.add(targetObject); 
light.target = targetObject;
聚光灯

THREE.SpotLight( color, intensity, distance, angle, penumbra, decay )
从一个方向上的一个点发出,覆盖一个圆锥体范围,它离光越远,它的尺寸就越大。

半球光

HemisphereLight( skyColor , groundColor , intensity )
光源具有上下两种不同的颜色,从天空光线颜色颜色渐变到地面光线颜色。 通常用于模拟户外光照,比起THREE.DirectionalLight模拟太阳光+THREE.AmbientLight为场景提供基础色的方案,HemisphereLight更为自然(因为在户外,并不是所有的光源都来自上方,很多是来自大气散射和地面以及其他物体的反射)。


投影

投影需要以下配置

  1. 为渲染器开启投影 renderer.shadowMap.enabled = true;
  2. 存在允许投影的光源 light.castShadow = true;
  3. 存在允许投影的物体 cube.castShadow = true;
  4. 存在允许显示投影的物体 floor.receiveShadow= true;

可以配置渲染器的shadowMap.type属性变更投影样式

配置以下属性限制阴影质量,默认值为512,512

开启投影辅助线

scene.add(new THREE.CameraHelper( light.shadow.camera ))

光晕

LensflareElement( texture : Texture, size : Float, distance : Float, color : Color )

  1. 要使用光晕,首先需要设置渲染器允许透明
  2. 光晕必须和一个已有光源绑定
  3. 同一光源的其他光晕/光斑可以通过.add(texture,size,distance,blendingType)添加到已有光晕上
var renderer = new THREE.WebGLRenderer({
  alpha: true
});
var loader = new THREE.TextureLoader()
var textureFlare0 = loader.load("./lensflare/lensflare0.png");
var textureFlare3 = loader.load("./lensflare/lensflare3.png");
var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0, 170, 0.0, THREE.AdditiveBlending,
  flareColor);
lensFlare.add(textureFlare3, 60/2, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120/2, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 1.0, THREE.AdditiveBlending);
lensFlare.position.copy(light.position);
scene.add(lensFlare);

上一篇 下一篇

猜你喜欢

热点阅读