简介
当你直接朝着太阳或者一个非常明亮的灯光的时候就会出现镜头光晕效果。大多数情况会避免这种效果,但是如果对于游戏或者三维图形来说,它提供了一种很好的效果,让场景看上去更加真实。
案例查看地址:http://www.wjceo.com/blog/threejs/2018-02-12/33.html
创建镜头光晕方法
var lensFlare =new THREE.LensFlare(
texture, size,
distance, blending,
color );
实例化相关参数
参数描述
texture(可选) THREE.Texture 纹理用来决定光晕的形状及样式size(可选) 尺寸(以像素为单位) (如果将它指定为-1,将使用纹理本身的尺寸)distance(可选)从光源(0)到摄像机(1),将光晕放置在正确的位置blending(可选) 混合模式,光晕默认是THREE.NormalBlendingcolor(可选) 光晕的颜色
实例化对象的相关属性和方法
属性
.isLensFlare
是否是一个光晕对象,默认返回ture
.lensFlares
通过修改相关的对象来修改实例化函数时的相关传值。
{
texture: texture,
// texture passed
in the constructor
or add method
size: size,
// if not passed
in,
default is -
1
distance: distance,
// if not passed
in,
default is 0
x:
0,
y:
0,
z:
0,
// screen position (-
1 => 1) z =
0 is in front z =
1 is back
scale:
1,
rotation:
0,
opacity: opacity,
// if not passed
in,
default is 1
color: color,
// if not passed
in,
default is new Color(
0xffffff ) (white)
blending: blending
// if not passed
in,
default is NormalBlending
}
.positionScreen
返回在场景中的位置
.customUpdateCallback
自定义的更新回调函数,赋值一个function,默认是undefined,通过updateLensFlares()调用。
对象方法
.add ( texture, size, distance, blending, color )
添加一个光晕,和构造函数的配置一样
.clone ()
克隆一个对象
.copy ( source )
复制目标source的参数,进行配置
.updateLensFlares ()
LensFlares基于positionscreen属性更新。 可以通过设置customupdatecallback函数重写。
简单实现案例
首先,需要把渲染器的alpha设置为true,如果不设置,光晕效果将无法出现。
renderer =
new THREE.WebGLRenderer({antialias:
true, alpha:
true});
然后先加载光晕所需要的纹理,比如:
var textureLoader =
new THREE.TextureLoader();
var textureFlare0 = textureLoader.load(
"examples/textures/lensflare/lensflare0.png");
然后,实例化光晕对象,并把所需的要的光晕的对象添加进去。
var flareColor = new THREE
.Color(
0xffffff)
flareColor
.setHSL(
0.55,
0.9,
1.0)
var lensFlare = new THREE
.LensFlare( textureFlare0,
500,
0.0, THREE
.AdditiveBlending, flareColor )
lensFlare
.add( textureFlare2,
512,
0.0, THREE
.AdditiveBlending )
lensFlare
.add( textureFlare2,
512,
0.0, THREE
.AdditiveBlending )
lensFlare
.add( textureFlare2,
512,
0.0, THREE
.AdditiveBlending )
lensFlare
.add( textureFlare3,
60,
0.6, THREE
.AdditiveBlending )
lensFlare
.add( textureFlare3,
70,
0.7, THREE
.AdditiveBlending )
lensFlare
.add( textureFlare3,
120,
0.9, THREE
.AdditiveBlending )
lensFlare
.add( textureFlare3,
70,
1.0, THREE
.AdditiveBlending )
lensFlare
.position.copy(pointLight
.position)
最后,把光晕对象添加到场景当中。
scene
.add(lensFlare)
案例代码
效果截图,动图质量差点,凑合着看吧。
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/FlyControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setClearColor(0x111111);
renderer.gammaInput = true;
renderer.gammaOutput = true;
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 40, 0);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var ambientLight,pointLight;
function initLight() {
ambientLight = new THREE.AmbientLight("#111111");
scene.add(ambientLight);
pointLight = new THREE.PointLight("#ffffff");
pointLight.position.set(-400, 600, -100);
pointLight.castShadow = true;
scene.add(pointLight);
var textureLoader = new THREE.TextureLoader();
var textureFlare0 = textureLoader.load("examples/textures/lensflare/lensflare0.png");
var textureFlare2 = textureLoader.load("examples/textures/lensflare/lensflare2.png");
var textureFlare3 = textureLoader.load("examples/textures/lensflare/lensflare3.png");
var flareColor = new THREE.Color(0xffffff);
flareColor.setHSL(0.55, 0.9, 1.0);
var lensFlare = new THREE.LensFlare( textureFlare0, 500, 0.0, THREE.AdditiveBlending, flareColor );
lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
lensFlare.add( textureFlare3, 60, 0.6, THREE.AdditiveBlending );
lensFlare.add( textureFlare3, 70, 0.7, THREE.AdditiveBlending );
lensFlare.add( textureFlare3, 120, 0.9, THREE.AdditiveBlending );
lensFlare.add( textureFlare3, 70, 1.0, THREE.AdditiveBlending );
lensFlare.position.copy(pointLight.position);
scene.add(lensFlare);
}
var cube,plane;
function initModel() {
var helper = new THREE.AxisHelper(10);
scene.add(helper);
var sphereGeometry = new THREE.SphereGeometry(10,30,30);
var sphereMaterial = new THREE.MeshStandardMaterial({color:0xff00ff});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(-20,20,0);
sphere.castShadow = true;
scene.add(sphere);
var cubeGeometry = new THREE.CubeGeometry(10,10,10);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 30;
cube.position.y = 5;
cube.position.z = -5;
cube.castShadow = true;
scene.add(cube);
var planeGeometry = new THREE.PlaneGeometry(5000, 5000, 20, 20);
var planeMaterial = new THREE.MeshStandardMaterial({color: 0xaaaaaa});
plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -0;
plane.receiveShadow = true;
scene.add(plane);
}
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
var controls,clock;
function initControls() {
clock = new THREE.Clock();
controls = new THREE.FlyControls( camera );
controls.movementSpeed = 100;
controls.rollSpeed = Math.PI / 6;
controls.autoForward = false;
controls.dragToLook = false;
}
var param;
function initGui() {
}
function render() {
renderer.render(scene, camera);
var delta = clock.getDelta();
stats.update();
controls.update(delta);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
render();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
initGui();
animate();
window.onresize = onWindowResize;
}
</script>
</html>