【Three.js基础学习】10. Light

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

  课堂笔记

    ambientLight : 环境光   参数 ： 颜色  ， 强度

        光在接触物体时 ，会反弹，因此在物体背面也会有反弹的光

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)

        scene.add(ambientLight)

    PointLight : 点光源 参数 同上  新的两个参数 距离和衰减

        const pointLight = new THREE.PointLight(0xffffff, 0.5)

        pointLight.position.x = 2

        pointLight.position.y = 3

        pointLight.position.z = 4

        scene.add(pointLight)

 

    DriectionaLight : 定向光

        光源是来自同一个方向的 如上方 ，因此在物体背面 还是环境光 而不是设置的定向光

        在直面光的一方更加明显的看出变化

        const driectionaLight = new THREE.DirectionalLight(0xffffff)

        directionaLight.position.set(1,0.25,0)  // 设置灯光的位置

 

    HemisphereLight : 半球光

        const hemisphereLight = new THREE.HemisphereLight(0xff0000,0x0000ff,0.3) // 上放颜色 ，下方颜色 ，光的强度

        可以看到上下方光的颜色不同

        光来自四面八方

    RectAreaLight : 矩形区域光   //参数  颜色 强度 宽度 高度

        会在某个矩形区域向某个方向发散光

    SpotLight 聚光灯  参数 颜色 强度 距离 角度 边缘 衰减

        像手电筒  更加消耗性能

backing  烘培  

    结合纹理做一些光的效果

   

    HemishpereLightHelper : 半球光助手

    DirectionaLightHelper : 定向光助手

    PointLightHelper : 点光源助手

    SpotLightHelper : 聚光灯助手

    // 矩形区域光和上面方式不同 需要引入

    RectAreaLightHelper : 区域矩形框

---

一、代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'lil-gui'
import { DirectionalLightHelper } from 'three'
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper'
console.log(RectAreaLightHelper)

/**
 * Base
 */
// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

const colorFormats = {
	directionaLight: '#00ff00',
    hemisphereLightTopColor:'#ff0000',
    hemisphereLightBottomColor:'#0000ff',
    pointLightColor:'#ff9000',
    rectAreaLightColor:'#4e00ff'
};


/**
 * Lights
 */
const ambientLight = new THREE.AmbientLight()
ambientLight.color = new THREE.Color(0xffffff)
ambientLight.intensity = 0.5
scene.add(ambientLight)

const directionaLight = new THREE.DirectionalLight(colorFormats.directionaLight,0.3)
directionaLight.position.set(1,0.25,0)
scene.add(directionaLight)

const hemisphereLight = new THREE.HemisphereLight(colorFormats.hemisphereLightTopColor,colorFormats.hemisphereLightBottomColor,0.3)
scene.add(hemisphereLight)

const pointLight = new THREE.PointLight(colorFormats.pointLightColor,0.3,3,2) // 距离: 过了3个单位就没有作用 
pointLight.position.set(1, - 0.5 , 1)
scene.add(pointLight)

const rectAreaLight = new THREE.RectAreaLight(colorFormats.rectAreaLightColor,2,1,1)
rectAreaLight.position.set(-0.5,0,1.3)
rectAreaLight.lookAt(new THREE.Vector3()) // 看向场景中间
scene.add(rectAreaLight)

const spotLight = new THREE.SpotLight(0x78ff00,0.5,6,Math.PI*0.1,0.25,1)
spotLight.position.set(0,2,3) // 设置初始位置
scene.add(spotLight)

spotLight.target.position.x = -0.75 // 移动位置  由于spotLight不是Vector3 而是3D对象 所以 要移动位置就要让聚光灯知道移动场景，因此要添加到场景中
scene.add(spotLight.target)

// Helpers
const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight,0.2)
scene.add(hemisphereLightHelper)

const directionaLightHelper = new THREE.DirectionalLightHelper(directionaLight,0.2)
scene.add(directionaLightHelper)

const pointLightHelper = new THREE.PointLightHelper(pointLight,0.2)
scene.add(pointLightHelper)

const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)

window.requestAnimationFrame(()=>{
    spotLightHelper.update()
})

const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)

gui.add(ambientLight,'intensity').min(0).max(1).step(0.01).name('环境光强度')
gui.add(directionaLight,'intensity').min(0).max(1).step(0.01).name('定向光强度')
gui.addColor(colorFormats,'directionaLight').onChange(()=>{
    directionaLight.color.set(colorFormats.directionaLight)
})
gui.add(hemisphereLight,'intensity').min(0).max(1).step(0.01).name('半球光强度')
gui.addColor(colorFormats,'hemisphereLightTopColor').onChange(()=>{
    hemisphereLight.color.set(colorFormats.hemisphereLightTopColor)
})
gui.addColor(colorFormats,'hemisphereLightBottomColor').onChange(()=>{
    hemisphereLight.color.set(colorFormats.hemisphereLightBottomColor)
})

gui.add(pointLight,'intensity').min(0).max(1).step(0.01).name('点光源强度')
gui.addColor(colorFormats,'pointLightColor').onChange(()=>{
    pointLight.color.set(colorFormats.pointLightColor)
})

gui.add(rectAreaLight,'intensity').min(0).max(10).step(0.01).name('矩形区域光强度')
gui.add(rectAreaLight,'width').min(0).max(10).step(0.01).name('宽度')
gui.add(rectAreaLight,'height').min(0).max(10).step(0.01).name('宽度')
gui.addColor(colorFormats,'rectAreaLightColor').onChange(()=>{
    colorFormats.color.set(colorFormats.rectAreaLightColor)
})




/**
 * Objects
 */
// Material
const material = new THREE.MeshStandardMaterial()
material.roughness = 0.4

// Objects
const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(0.5, 32, 32),
    material
)
sphere.position.x = - 1.5

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(0.75, 0.75, 0.75),
    material
)

const torus = new THREE.Mesh(
    new THREE.TorusGeometry(0.3, 0.2, 32, 64),
    material
)
torus.position.x = 1.5

const plane = new THREE.Mesh(
    new THREE.PlaneGeometry(5, 5),
    material
)
plane.rotation.x = - Math.PI * 0.5
plane.position.y = - 0.65

scene.add(sphere, cube, torus, plane)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 2
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update objects
    sphere.rotation.y = 0.1 * elapsedTime
    cube.rotation.y = 0.1 * elapsedTime
    torus.rotation.y = 0.1 * elapsedTime

    sphere.rotation.x = 0.15 * elapsedTime
    cube.rotation.x = 0.15 * elapsedTime
    torus.rotation.x = 0.15 * elapsedTime

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

二、知识点

1.AmbientLight 环境光

const ambientLight = new THREE.AmbientLight()  // 参数：颜色 强度

 光在接触物体时 ，会反弹，因此在物体背面也会有反弹的光

ambientLight.color = new THREE.Color(0xffffff) // 颜色

intensity :强度

2.DirectionaLight 定向光

const directionaLight = new THREE.DriectionaLight(colorFormats.directionaLight,0.3)  // 参数同上

directionaLight.position.set(1,0.25,0) // 设置定向光的位置

scene.add(directionaLight)

   光源是来自同一个方向的 如上方 ，因此在物体背面 还是环境光 而不是设置的定向光

        在直面光的一方更加明显的看出变化

3.HemisphereLight 半球光

const hemisphereLight = new THREE.HemisphereLight(0xff0000,0x0000ff,0.3) // 上方颜色，下方颜色，光的强度

   可以看到上下方光的颜色不同

        光来自四面八方

4.pointLight 点光源

const pointLight = new THREE.PointLight(colorFormats.pointLightColor,0.3,3,2) // 颜色 强度 距离 衰弱

5.rectAreaLight 矩形区域光

会在某个矩形区域向某个方向发散光

import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper'

const rectAreaLight = new THREE.RectAreaLight(colorFormats.rectAreaLightColor,2,1,1)  //参数  颜色 强度 宽度 高度

rectAreaLight.position.set(-0.5,0,1.3)

rectAreaLight.lookAt(new THREE.Vector3()) // 看向场景中间

scene.add(rectAreaLight)

6.spotLight 聚光灯

const spotLight = new THREE.SpotLight(0x78ff00,0.5,6,Math.PI*0.1,0.25,1) // 参数 颜色 强度 距离 角度 边缘 衰减

像手电筒  更加消耗性能

spotLight.position.set(0,2,3) // 设置初始位置

scene.add(spotLight)

三,Helper

分别是 半球光助手 ，定向光助手，点光源助手，聚光灯助手

const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight,0.2)

// scene.add(hemisphereLightHelper)

const directionaLightHelper = new THREE.DirectionalLightHelper(directionaLight,0.2)

// scene.add(directionaLightHelper)

const pointLightHelper = new THREE.PointLightHelper(pointLight,0.2)

// scene.add(pointLightHelper)

const spotLightHelper = new THREE.SpotLightHelper(spotLight)

// scene.add(spotLightHelper)

    // 矩形区域光和上面方式不同 需要引入

    RectAreaLightHelper : 区域矩形框

const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)

// scene.add(rectAreaLightHelper)

下面是整体展示光发散的逻辑图

---

总结

光源酷酷的！