当前位置：首页 > news >正文

12.Three.js 中的 DirectionalLight（平行光）详解指南

news 2025/5/1 7:46:55

本文深入解析 Three.js 中的 THREE.DirectionalLight，全面讲解其使用方式、特性、参数、阴影设置及 Vue 3 Composition API 案例。

🌟 什么是 DirectionalLight？

THREE.DirectionalLight 是一种平行光源，模拟类似太阳的光线。它拥有方向但没有位置衰减，所有照射点光线方向一致，适合表现大范围自然光照。

✅ 特点总结

特性	描述
是否有方向	✅ 有
是否有位置影响	❌ 无位置衰减（方向决定照射方向）
是否投影（阴影）	✅ 支持阴影
光照是否均匀	✅ 所有物体被照射方向一致
常见用途	太阳光、日照效果等

🧪 创建语法

const light = new THREE.DirectionalLight(color, intensity); 
light.position.set(x, y, z); 
scene.add(light);

⚙️ 构造函数参数

参数名	类型	默认值	描述
`color`	`Color` / `String` / `Number`	`0xffffff`	光源颜色
`intensity`	`Number`	`1`	光强，越大越亮

✍️ 主要属性与方法

1. `position`

决定光线的方向（不是位置衰减），光从该点“看向原点”。

2. `target`

默认照向 (0, 0, 0)，可以通过设置 light.target.position 改变照射目标。

3. `castShadow`

是否开启阴影投射：

light.castShadow = true;

4. `shadow` 对象

控制阴影细节，如：

light.shadow.mapSize.width = 1024; // 阴影贴图尺寸 
light.shadow.camera.near = 0.5; 
light.shadow.camera.far = 500; 
light.shadow.camera.left = -10; 
light.shadow.camera.right = 10; 
light.shadow.camera.top = 10; 
light.shadow.camera.bottom = -10;

🖼️ 阴影效果图

🧠 使用技巧

常与 AmbientLight 搭配使用：环境光负责整体提亮，平行光提供方向性光照和阴影。
注意光照方向（位置）对模型效果影响大，建议反复调整。
如果出现阴影锯齿或显示不清，增加 shadow.mapSize 或调整摄像机视锥体参数。

📄 示例代码（Three.js 原生）

const scene = new THREE.Scene();
const light = new THREE.DirectionalLight(0xffffff, 1.2);
light.position.set(5, 10, 7.5);
light.castShadow = true;light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 50;
scene.add(light);// 照射目标
scene.add(light.target);

🧩 Vue 3 Composition API 实例

📁 依赖准备

npm install three

📄 Vue 文件：`DirectionalLightScene.vue`

<template><div ref="container" class="w-full h-full"></div>
</template><script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'const container = ref(null)onMounted(() => {const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75,container.value.clientWidth / container.value.clientHeight,0.1,1000)camera.position.set(5, 5, 10)const renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(container.value.clientWidth, container.value.clientHeight)renderer.shadowMap.enabled = truecontainer.value.appendChild(renderer.domElement)// 添加地面const groundGeometry = new THREE.PlaneGeometry(20, 20)const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 })const ground = new THREE.Mesh(groundGeometry, groundMaterial)ground.rotation.x = -Math.PI / 2ground.receiveShadow = truescene.add(ground)// 添加立方体const boxGeometry = new THREE.BoxGeometry(2, 2, 2)const boxMaterial = new THREE.MeshStandardMaterial({ color: 0x007bff })const cube = new THREE.Mesh(boxGeometry, boxMaterial)cube.position.y = 1cube.castShadow = truescene.add(cube)// 环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.3)scene.add(ambientLight)// 平行光const dirLight = new THREE.DirectionalLight(0xffffff, 1)dirLight.position.set(5, 10, 5)dirLight.castShadow = truedirLight.shadow.mapSize.set(1024, 1024)dirLight.shadow.camera.left = -10dirLight.shadow.camera.right = 10dirLight.shadow.camera.top = 10dirLight.shadow.camera.bottom = -10scene.add(dirLight)// 动画const animate = () => {requestAnimationFrame(animate)cube.rotation.y += 0.01renderer.render(scene, camera)}animate()
})
</script><style scoped>
div {width: 100%;height: 100vh;background: #000;
}
</style>