阅读 71

Three.js开发指南-阅读记录(第三章)

Three.js中的光源

基础光源

  1. THREE.AmbientLight
  • 作用:将颜色作用到全局。
  • 场景:配合其他光源使用,用来弱化阴影或者给场景添加额外的颜色。
  • 使用方式:
let ambientLight = new THREE.AmbientLight("#0c0c0c")
scene.add(ambientLight)
复制代码
  1. THREE.PointLight
  • 作用:从特定的一点向所有方向发射点光源
  • 属性:
属性说明
color颜色
distance光源照射的距离,默认0
intensity光源照射的强度,默认1
position光源在场景中的位置
visible设置光源是否可见true、false
  • 使用方式:
let pointLight = new THREE.PointLight("cfcfcf")
pointLight.position.set(x,y,z)
scene.add(pointLight)
复制代码
  1. THREE.SpotLight
  • 作用:聚光灯效果,适合构建阴影,具有方向和角度
  • 属性:
常用属性说明
angle发射角度,默认Math.PI/3
castShadow设置为true产生阴影
color颜色
exponent光强衰弱指数,随着值得增大而发射得越远
intensity光照强度默认为1
onlyShadow为true时,只添加阴影,不会在场景添加光源
position位置
shadowDarkness阴影暗度,模认0.5
shadowCameraFar投影远点
shadowCameraFov投影试场
shadowCameraNear投影近点
shadowCameraVisible投影方式可见
target投射目标
  • 使用方式:
let spotLight = new THREE.spotLight("cfcfcf")
spotLight.position.set(x,y,z)
spotLight.castShadow = true
spotLight.target = plane
scene.add(spotLight)
复制代码
  1. THREE.DirectionalLight
  • 作用:强度一样,类似于太阳光
  • 属性:和spotLight一样,区别在于不像聚光灯会因距离而产生变化

特殊光源

  1. THREE.HemisphereLight
  • 作用:可以创建出更加贴近自然的户外光照效果
  • 属性:
属性说明
groundColor从地面发出的光线的颜色
color从天空发出的光线的颜色
intensity光线照射的强度
  • 使用方式:
let hemiLight = new THREE.HemisphereLight(color,groundColor,intensity)
hemiLight.position.set(x,y,z)
scene.add(hemiLight)
复制代码
  1. THREE.AreaLight
  • 作用:定义一个长方形的发光区域,需要用到扩展库
  • 渲染器:使用THREE.WebGLDeferredRenderer对象来渲染复杂性光源
  • 扩展库:

image.png

  • 渲染器的使用:
//具体参数在第10章会深入学习
    let renderer = new THREE.WebGLDeferreRenderer({
        width:window.innerWidth,
        height:window.innerHeght,
        scale:1,
        antialias:true,
        tonemapping:THREE.FilmicOperator,
        brightness:2.5
    })
复制代码
  • 光源使用方式:
//和其他光源使用方式一样
let areaLight1 = new THREE.AreaLIGHT(0xff0000, 3)
areaLight1.poistion.set(-10, 10, -35)
areaLight1.rotation.set(-Math.PI / 2, 0, 0)
areaLight1.width = 4
areaLight1.height = 9.9
scene.add(areaLight1)
复制代码

创建镜头光晕

  • 创建方式:
    flare = new  THREE.LensFlare(texture, size, distance, blending, color, opacity)
    flare.position = spotLight.position
    scene.add(flare)
复制代码
  • 属性:
属性说明
texture纹理就是一张图片,用来决定光晕的形状
size光晕尺寸,单位是像素,如果为-1代表纹理本生的尺寸
distance光源0到摄像机1的距离
blending多种材质混合
color光晕的颜色
opacity透明度
  • 方法: add()
let textureFlare3  = THREE.ImageUtiles.loadTexture('../img.png')
flare.add(textureFlare3,60,0.6,THREE.AdditiveBlending) 
scene.add(flare)
复制代码
文章分类
前端
文章标签