3.js - 灯光与阴影

3.js - 灯光与阴影 - 聚光灯

在这里插入图片描述


// @ts-nocheckimport * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'const scence = new THREE.Scene()const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(15, 2.4, 0.4) // 设置相机位置
camera.lookAt(0, 0, 0)const renderer = new THREE.WebGLRenderer({antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器的大小renderer.shadowMap.enabled = true `【灯光与阴影 - 设置渲染器允许投射阴影】`renderer.outputColorSpace = THREE.SRGBColorSpace // 设置输出颜色空间
renderer.toneMapping = THREE.ACESFilmicToneMapping // 设置色调映射，此处为`电影色调映射算法`
renderer.toneMappingExposure = 1 // 设置色调映射的曝光度，值越大，图像越亮
document.body.appendChild(renderer.domElement)// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 设置带阻尼的惯性
controls.dampingFactor = 0.05 // 设置阻尼系数
controls.addEventListener('change', () => {renderer.render(scence, camera)
})// 每一帧根据控制器更新画面
function render() {// 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`controls.update()renderer.render(scence, camera) // 渲染// `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染requestAnimationFrame(render)
}
render()// --------------------------------------------------------------------------
// --------------------------------------------------------------------------const rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Video_Copilot-Back Light_0007_4k.hdr', envMap => {envMap.mapping = THREE.EquirectangularReflectionMappingscence.background = envMap// scence.environment = envMap
})'创建 - 环形结'const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16)const material = new THREE.MeshPhysicalMaterial({color: 0xccccff})const torusKnot = new THREE.Mesh(geometry, material)scence.add(torusKnot)'创建 - 球'const sphereGeometry = new THREE.SphereGeometry(1, 32, 32)const material_1 = new THREE.MeshPhysicalMaterial({color: 0xffffff})const sphere = new THREE.Mesh(sphereGeometry, material_1)sphere.position.set(4, 0, 0)scence.add(sphere)sphere.receiveShadow = truesphere.castShadow = true'创建 - 立方体'const boxGeometry = new THREE.BoxGeometry(1, 1, 1)const material_2 = new THREE.MeshPhysicalMaterial({color: 0xffcccc})const box = new THREE.Mesh(boxGeometry, material_2)box.position.set(-4, 0, 0)scence.add(box)'创建 - 平面'const planeGeometry = new THREE.PlaneGeometry(24, 24, 1, 1)const planeMaterial = new THREE.MeshPhysicalMaterial({color: 0x999999})const plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.rotation.x = -Math.PI / 2plane.position.set(0, -3, 0)scence.add(plane)plane.receiveShadow = trueplane.castShadow = true'添加环境光'
let ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
scence.add(ambientLight)`添加聚光灯`（手电筒那种锥形的光）const spotLight = new THREE.SpotLight(0xffffff, 2)spotLight.position.set(0, 10, 0) // 聚光灯的位置spotLight.target.position.set(0, 0, 0) // 光朝那打spotLight.castShadow = true // 添加投射阴影scence.add(spotLight)`锥形张开的角度`spotLight.angle = Math.PI / 8`光照射的距离（手电筒打光，不可能无限远不是）`spotLight.distance = 20`光照射，边缘部分的衰减`spotLight.penumbra = 0.5`光线强度的衰减程度，值越大，边缘部分就更加没光了`spotLight.decay = 2'添加聚光灯辅助器'let spotLightHelper = new THREE.SpotLightHelper(spotLight)scence.add(spotLightHelper)spotLight.shadow.mapSize.width = 2048spotLight.shadow.mapSize.height = 2048