3.js - 灯光与阴影 - 平行光 directionalLight

// @ts-nocheck
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
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)

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()
	renderer.render(scence, camera)
	requestAnimationFrame(render)
}
render()

// --------------------------------------------------------------------------
// --------------------------------------------------------------------------

const rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Video_Copilot-Back Light_0007_4k.hdr', envMap => {
	envMap.mapping = THREE.EquirectangularReflectionMapping
	scence.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)
	`【灯光与阴影 - 设置接收阴影】`	
		 'receiveShadow' 为 true，
				意味着，这个球体(sphere)对象，能够接收来自其他光源投射的阴影，
				说白了就是：
					如果，场景中有其他物体(如：光源附近的墙壁或地面)投射了阴影，
					并且，这些阴影应该落在球体上，那么球体就会显示这些阴影。
	plane.receiveShadow = true
	
		'castShadow' 为 true，表示，球体能够投射自己的阴影到其他物体上
			如果，场景中有光源和可以接收阴影的物体(如：地面或墙壁)，
			球体就会在这些物体上投射出自己的阴影，
	plane.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 / 2
	plane.position.set(0, -3, 0)
	scence.add(plane)
	 `【灯光与阴影 - 设置接收阴影】`	
	 'receiveShadow' 为 true，
				意味着，这个球体(sphere)对象，能够接收来自其他光源投射的阴影，
				说白了就是：
					如果，场景中有其他物体(如：光源附近的墙壁或地面)投射了阴影，
					并且，这些阴影应该落在球体上，那么球体就会显示这些阴影。
	plane.receiveShadow = true
	
		'castShadow' 为 true，表示，球体能够投射自己的阴影到其他物体上
			如果，场景中有光源和可以接收阴影的物体(如：地面或墙壁)，
			球体就会在这些物体上投射出自己的阴影，
	plane.castShadow = true


'添加环境光'
	let ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
	scence.add(ambientLight)

'添加平行光'
	let directionalLight = new THREE.DirectionalLight(0xffffff, 0.6)
	// 平行光的位置
	directionalLight.position.set(4, 10, 0)
	// 默认情况下，平行光的目标是原点
	directionalLight.target.position.set(4, 0, 0)
	scence.add(directionalLight)

`【灯光与阴影 - 设置光投射阴影】`
	directionalLight.castShadow = true

// 添加平行光辅助器，让你看清楚平行光在哪
let directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight)
scence.add(directionalLightHelper)

`【产生阴影的范围】`
	console.log('directionalLight=', directionalLight)
	directionalLight.shadow.camera.left = -10
	directionalLight.shadow.camera.right = 10
	directionalLight.shadow.camera.top = 10
	directionalLight.shadow.camera.bottom = -10
	directionalLight.shadow.camera.near = 0.5
	directionalLight.shadow.camera.far = 50

	// 设置阴影的纹理大小（值越大，显示的越清晰）
	directionalLight.shadow.mapSize.width = 2048
	directionalLight.shadow.mapSize.height = 2048

const gui = new GUI()
gui.add(sphere.position, 'z', -10, 10).name('z')