three.js实践-聚光灯和阴影

原创于 2025-05-14 21:08:53 发布 · 300 阅读

CC 4.0 BY-SA版权

尝试使用聚光灯THREE.SpotLight，将聚光灯下物体阴影显现出来

创建聚光灯，这个强度设置为1有点看不清阴影

//聚光灯1
	const sportLight = new THREE.SpotLight(0xffffff, 1)
	sportLight.position.set(-200, 350, 0)
	sportLight.penumbra = 0.2 //边缘羽化
	sportLight.lookAt(0, 0, 0); 
	scene.add(sportLight)

three.js实践-聚光灯和阴影_物体阴影

调整为90000

three.js实践-聚光灯和阴影_物体阴影_02

效果

three.js实践-聚光灯和阴影_聚光灯_03

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		<meta charset="utf-8">
	</head>
<body>
<script type="importmap">
	{
		"imports": {
			"three": "../build/three.module.js",
			"three/addons/": "./jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
	//console.log(THREE.REVISION);
	//场景
	const scene = new THREE.Scene()
	//相机
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000)
	camera.position.set(0, 400, 600)
	//渲染器
	const renderer = new THREE.WebGLRenderer()
	renderer.setPixelRatio(window.devicePixelRatio) //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
	renderer.setSize(window.innerWidth, window.innerHeight)
	
	//环境光
	const ambient = new THREE.AmbientLight(0xffffff, 0.3)	
	scene.add(ambient)
		
	//辅助轴
	const axesHelper = new THREE.AxesHelper(200)
	scene.add(axesHelper)
		
	//平面几何体
	const planGeometry = new THREE.PlaneGeometry(1000, 1000)
	//平面几何材质
	const planMaterial = new THREE.MeshPhongMaterial({
		color: 0x808080
	})
	
	//平面
	const plan = new THREE.Mesh(planGeometry, planMaterial)
	plan.position.set(0, 0, 0)
	plan.rotation.x = -Math.PI / 2
	scene.add(plan)
	
	//球体
	const sphereGeometry = new THREE.SphereGeometry(50, 32, 16)
	const sphereMaterial = new THREE.MeshPhongMaterial({
		color: 0x87CEEB
	})
	const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial)
	sphereMesh.position.set(0, 60, 0)
	scene.add(sphereMesh)


	//聚光灯1
	const sportLight = new THREE.SpotLight(0xffffff, 1)
	sportLight.position.set(-200, 350, 0)
	sportLight.penumbra = 0.2 //边缘羽化
	sportLight.lookAt(0, 0, 0);
	//这个聚光灯在three166默认值的情况跟没有差不多，像看不到一般
	//sportLight.intensity=10000;//光源强度
	sportLight.intensity = 900000; //光源强度
	scene.add(sportLight)

	//光源辅助类1
	const sportLightCameraHelper = new THREE.CameraHelper(sportLight.shadow.camera)
	scene.add(sportLightCameraHelper)

	//聚光灯2	
	const sportLight2 = new THREE.SpotLight(0x4396D2, 1)
	sportLight2.position.set(200, 350, 0)	
	sportLight2.angle = Math.PI / 6
	sportLight2.penumbra = 0.2 //边缘羽化
	sportLight2.lookAt(0, 0, 0);
	//这个聚光灯在three166默认值的情况跟没有差不多，像看不到一般
	//sportLight2.intensity=10000;//光源强度
	sportLight2.intensity = 900000; //光源强度
	scene.add(sportLight2)
	//当源辅助类2
	const sportLight2CameraHelper = new THREE.CameraHelper(sportLight2.shadow.camera)
	scene.add(sportLight2CameraHelper)
	
	//阴影
	//需要投射阴影的物体要开启是否被渲染到阴影贴图中 castShadow属性
	sphereMesh.castShadow = true //对象是否被渲染到阴影贴图中。默认值为false。
	//接收阴影的物体要开启材质是否接收阴影 receiveShadow属性
	plan.receiveShadow = true //材质是否接收阴影。默认值为false。
	//灯光开启投射阴影
	sportLight.castShadow = true //此属性设置为 true 聚光灯将投射阴影。警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确。
	sportLight2.castShadow = true
	//渲染器显示阴影设置为enabled = true 允许在场景中使用阴影贴图
	renderer.shadowMap.enabled = true //如果设置开启，允许在场景中使用阴影贴图。默认是 false。
	document.body.appendChild(renderer.domElement)
	const control = new OrbitControls(camera, renderer.domElement)

	animation()
	function animation() {
		requestAnimationFrame(animation)
		renderer.render(scene, camera)
	}
</script>

</body>
</html>