three.js lensare光源
程序员文章站
2022-05-23 13:25:59
...
一般用来模拟太阳光光晕
效果:
其实从调用的逻辑来推测(没看过源码),就是贴图,将太阳、光线、光晕分别沿 点光源起点和target这条直线贴
核心逻辑,由于示例中的光线贴出来是横向的,因此直接抹去
// 添加 lens flares
const textureLoader = new THREE.TextureLoader();
textureLoader.load("../images/lensflare0.png",textureFlare0=> {
textureLoader.load("../images/lensflare2.png", textureFlare2 => {
const flareColor = new THREE.Color(0xffffff);
flareColor.setHSL(0.55, 0.9, 1.0);
// var lensFlare =new THREE.LensFlare( texture, size, distance, blending, color )
//参数 描述
// texture (可选) THREE.Texture 纹理用来决定光晕的形状及样式
// size (可选) 尺寸(以像素为单位) (如果将它指定为-1,将使用纹理本身的尺寸)
// distance (可选)从光源(0)到摄像机(1),将光晕放置在正确的位置
// blending (可选) 混合模式,光晕默认是THREE.NormalBlending
// color (可选) 光晕的颜色
const lensFlare = new THREE.Lensflare();
lensFlare.addElement(new THREE.LensflareElement(textureFlare0, 500, 0.0, flareColor));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 60, 0.6));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 0.7));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 120, 0.9));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 1.0));
lensFlare.position.copy(pointLight.position);
scene.add(lensFlare)
})
})
使用的图片
完整代码
let el=document.getElementById('box')
let app=new THREE.inithree(el,{
axes:true,
})
let scene=app.scene
let renderer=app.renderer
let camera=app.camera
let controls=app.controls
camera.position.set(400, -600, 100)
camera.lookAt(new THREE.Vector3(-400, 600, -100))
//球体
const sphereGeometry = new THREE.SphereGeometry(10,30,30);
const sphereMaterial = new THREE.MeshStandardMaterial({color:0xff00ff});
const sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(-20,20,0);
sphere.castShadow = true;
scene.add(sphere);
//立方体
const cubeGeometry = new THREE.CubeGeometry(10,10,10);
const cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(30,5,-5)
//告诉立方体需要投射阴影
scene.add(cube);
//底部平面
const planeGeometry = new THREE.PlaneGeometry(5000, 5000, 20, 20);
const planeMaterial = new THREE.MeshStandardMaterial({color: 0xaaaaaa});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -0;
//告诉底部平面需要接收阴影
plane.receiveShadow = true;
scene.add(plane);
//灯光和光晕
const 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)
// 添加 lens flares
const textureLoader = new THREE.TextureLoader();
textureLoader.load("../images/lensflare0.png",textureFlare0=> {
textureLoader.load("../images/lensflare2.png", textureFlare2 => {
const flareColor = new THREE.Color(0xffffff);
flareColor.setHSL(0.55, 0.9, 1.0);
// var lensFlare =new THREE.LensFlare( texture, size, distance, blending, color )
//参数 描述
// texture (可选) THREE.Texture 纹理用来决定光晕的形状及样式
// size (可选) 尺寸(以像素为单位) (如果将它指定为-1,将使用纹理本身的尺寸)
// distance (可选)从光源(0)到摄像机(1),将光晕放置在正确的位置
// blending (可选) 混合模式,光晕默认是THREE.NormalBlending
// color (可选) 光晕的颜色
const lensFlare = new THREE.Lensflare();
lensFlare.addElement(new THREE.LensflareElement(textureFlare0, 500, 0.0, flareColor));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 60, 0.6));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 0.7));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 120, 0.9));
lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 1.0));
lensFlare.position.copy(pointLight.position);
scene.add(lensFlare)
})
})
function animate() {
controls.update()
renderer.render(scene, camera)
requestAnimationFrame(animate)
}
animate()
推荐阅读
-
Three.js使用TWEEN插件实现动画(代码教程)
-
Three.js使用canvas样式化粒子(代码实例)
-
WebGL three.js学习笔记之阴影与实现物体的动画效果
-
unity3d中四种光源有什么区别?
-
three.js快速入门【推荐】
-
Three.js使用THREE.TextGeometry创建三维文本中文乱码的问题如何解决?
-
Three.js使用THREE.ParametricGeometry生成平面图形、波浪图形、和克莱因瓶
-
使用three.js开发全景漫游视角问题全景漫游视角
-
使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)
-
【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)