个人简介
👀个人主页： 前端杂货铺
🙋♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧
| 内容 | 参考链接 |
|---|---|
| WebGL专栏 | WebGL 入门 |
| Three.js（一） | 创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化 |
| Three.js（二） | scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机 |
文章目录
- 前言
- GUI 图形用户界面
- 一、聚光灯
- 二、环境光
- 三、点光源
- 四、平行光
- 五、半球光
- 总结
前言
大家好，这里是前端杂货铺。
上篇文章我们学习了 scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机。接下来，我们继续我们 three.js 的学习！
在学习的过程中，如若需要深入了解或扩展某些知识，可以自行查阅 => three.js官方文档。
GUI 图形用户界面
GUI （图形用户界面）是一种用户界面形式，它允许用户通过图形元素（如窗口、菜单、按钮）与电子设备（如计算机、智能手机和平板电脑）进行交互。
如 three.js 官网中，我们可以通过鼠标拖动红框内的任意线条进行修改属性，从而达到修改属性并实时呈现效果的目的。
对于以下光源，我们封装一下，使用 GUI 进行操作，总体代码如下：
./controls/index.js
// 定义基础类型，这里面存放的是光源的参数
const basicType = {
// 颜色。默认为一个白色（0xffffff）的 Color 对象。
color: {
method: 'addColor',
getValue: item => item.color.getStyle(),
setValue: (item, value) => item.color.setStyle(value),
},
//
skyColor: {
method: 'addColor',
getValue: item => item.skyColor.getStyle(),
setValue: (item, value) => item.skyColor.setStyle(value),
},
// 光照强度。默认值为 1
intensity: {
method: 'add',
extends: [0, 2],
getValue: item => item.intensity,
setValue: (item, value) => item.intensity = +value,
},
// 光源照射的最大距离。默认值为 0（无限远）
distance: {
method: 'add',
extends: [0, 1],
getValue: item => item.distance,
setValue: (item, value) => item.distance = +value,
},
// 光线照射范围的角度。默认值为 Math.PI/3
angle: {
method: 'add',
extends: [0, Math.PI / 2],
getValue: item => item.angle,
setValue: (item, value) => item.angle = +value,
},
// 决定了光线强度递减的速度。
exponent: {
method: 'add',
extends: [0, 20],
getValue: item => item.exponent,
setValue: (item, value) => item.exponent = +value,
}
}
// 存放光源类型及光源对应的属性
const itemType = {
SpotLight: ['color', 'intensity', 'distance', 'angle', 'exponent'], // 聚光灯
AmbientLight: ['color'], // 环境光
PointLight: ['color', 'intensity', 'distance'], // 点光源
DirectionalLight: ['color', 'intensity'], // 平行光
HemisphereLight: ['groundColor', 'intensity'] // 半球光
}
function initControls(item) {
const typeList = itemType[item.type];
const controls = {};
if (!typeList || !typeList.length) {
return;
}
// 创建 gui 实例
const gui = new dat.GUI();
for (let i = 0; i < typeList.length; i++) {
const child = basicType[typeList[i]];
if (child) {
controls[typeList[i]] = child.getValue(item);
const childExtends = child.extends || [];
// 监听变化，设置 value
gui[child.method || 'add'](controls, typeList[i], ...childExtends).onChange((value) => {
child.setValue(item, value);
})
}
}
}
一、聚光灯
光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。
聚光灯产生的是锥形效果，可以想象一下手电筒、路灯等光源。它需要设置光源的位置，以便产生我们需要的阴影效果。
new THREE.SpotLight(color, intensity, distance, angle, exponent)
| 参数名称 | 描述 | 默认值 |
|---|---|---|
| color | 光源颜色 | 无 |
| intensity | 光照强度 | 1 |
| distance | 光源到光源结束的距离 | 0（不会随着距离衰减） |
| angle | 光源颜色 | Math.PI / 3 |
| exponent | 沿着光照距离的衰退量 | 10 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/three/three.js"></script>
<script src="../lib/three/dat.gui.js"></script>
<script src="../controls/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机 视野角度FOV、长宽比、近截面、远截面
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机位置
camera.position.set(0, 0, 20);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 创建立方体材质
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
wireframe: false
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);
// 添加球体
const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
// 创建球体材质
const sphereMatrial = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: false
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);
sphere.position.x = 3;
sphere.position.y = 1;
// 添加到场景
scene.add(sphere);
// 添加平面，用来接收阴影
const planeGeometry = new THREE.PlaneGeometry(20, 30);
const planeMaterial = new THREE.MeshBasicMaterial({
color: 0x999999
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateZ(20);
plane.position.z = -10;
plane.position.x = 3;
scene.add(plane);
// 添加灯光
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10, 10, 90);
scene.add(spotLight);
spotLight.shadowMapWidth = 3456; // 分辨率宽度
spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能
// 产生阴影
cube.castShadow = true;
sphere.castShadow = true;
// 接收阴影
plane.receiveShadow = true;
// 设置灯光开启阴影
spotLight.castShadow = true;
renderer.shadowMapEnabled = true;
initControls(spotLight);
const animation = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html>
聚光灯
二、环境光
环境光不需要设置位置，对整个场景内的对象都生效。
它没有特定的来源，也不会影响阴影的形成。
它不能作为场景内的唯一光源，需要配合其他光源使用。
它的作用是用来 减弱阴影，或者给物体添加一些颜色。
new THREE.AmbientLight(0x000000);
| 参数名称 | 描述 | 默认值 |
|---|---|---|
| color | 光源颜色 | 白色（0xffffff） |
| intensity | 光照强度 | 1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/three/three.js"></script>
<script src="../lib/three/dat.gui.js"></script>
<script src="../controls/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机 视野角度FOV、长宽比、近截面、远截面
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机位置
camera.position.set(0, 0, 20);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 创建立方体材质
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
wireframe: false
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);
// 添加球体
const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
// 创建球体材质
const sphereMatrial = new THREE.MeshLambertMaterial({
color: 0x00ff00,
wireframe: false
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);
sphere.position.x = 3;
sphere.position.y = 1;
// 添加到场景
scene.add(sphere);
// 添加平面，用来接收阴影
const planeGeometry = new THREE.PlaneGeometry(20, 30);
const planeMaterial = new THREE.MeshBasicMaterial({
color: 0x999999
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateZ(20);
plane.position.z = -10;
plane.position.x = 3;
scene.add(plane);
// 添加环境光
const ambientLight = new THREE.AmbientLight(0x000000);
scene.add(ambientLight);
// 添加灯光
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10, 10, 90);
scene.add(spotLight);
// 产生阴影
cube.castShadow = true;
sphere.castShadow = true;
// 接收阴影
plane.receiveShadow = true;
// 设置灯光开启阴影
spotLight.castShadow = true;
renderer.shadowMapEnabled = true;
initControls(ambientLight);
const animation = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html>
环境光
三、点光源
单点发光，照射所有方向的光源（需要设置光源位置），它也不会生成阴影。
new THREE.PointLight(color, intensity, distance, decay);
| 参数名称 | 描述 | 默认值 |
|---|---|---|
| color | 光源颜色 | 白色（0xffffff） |
| intensity | 光照强度 | 1 |
| distance | 光源照射的最大距离 | 0（无限远） |
| decay | 沿着光照距离的衰退量 | 2 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/three/three.js"></script>
<script src="../lib/three/dat.gui.js"></script>
<script src="../controls/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机 视野角度FOV、长宽比、近截面、远截面
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机位置
camera.position.set(0, 0, 20);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 创建立方体材质
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
wireframe: false
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);
// 添加球体
const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
// 创建球体材质
const sphereMatrial = new THREE.MeshLambertMaterial({
color: 0x00ff00,
wireframe: false
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);
sphere.position.x = 3;
sphere.position.y = 1;
// 添加到场景
scene.add(sphere);
// 添加平面，用来接收阴影
const planeGeometry = new THREE.PlaneGeometry(20, 30);
const planeMaterial = new THREE.MeshBasicMaterial({
color: 0x999999
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateZ(20);
plane.position.z = -10;
plane.position.x = 3;
scene.add(plane);
// 添加环境光
const ambientLight = new THREE.AmbientLight(0x000000);
scene.add(ambientLight);
// 添加灯光
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(-10, 10, 90);
scene.add(pointLight);
// 产生阴影
cube.castShadow = true;
sphere.castShadow = true;
// 接收阴影
plane.receiveShadow = true;
renderer.shadowMapEnabled = true;
initControls(pointLight);
const animation = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html>
点光源
四、平行光
平行光，即太阳光，会生成阴影。
new THREE.DirectionalLight(0xffffff);
| 参数名称 | 描述 | 默认值 |
|---|---|---|
| color | 光源颜色 | 白色（0xffffff） |
| intensity | 光照强度 | 1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/three/three.js"></script>
<script src="../lib/three/dat.gui.js"></script>
<script src="../controls/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机 视野角度FOV、长宽比、近截面、远截面
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机位置
camera.position.set(0, 0, 20);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 创建立方体材质
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
wireframe: false
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);
// 添加球体
const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
// 创建球体材质
const sphereMatrial = new THREE.MeshLambertMaterial({
color: 0x00ff00,
wireframe: false
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);
sphere.position.x = 3;
sphere.position.y = 1;
// 添加到场景
scene.add(sphere);
// 添加平面，用来接收阴影
const planeGeometry = new THREE.PlaneGeometry(20, 30);
const planeMaterial = new THREE.MeshBasicMaterial({
color: 0x999999
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateZ(20);
plane.position.z = -10;
plane.position.x = 3;
scene.add(plane);
// 添加环境光
const ambientLight = new THREE.AmbientLight(0x000000);
scene.add(ambientLight);
// 添加灯光
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(-10, 10, 90);
scene.add(directionalLight);
// 产生阴影
cube.castShadow = true;
sphere.castShadow = true;
// 接收阴影
plane.receiveShadow = true;
directionalLight.castShadow = true;
renderer.shadowMapEnabled = true;
// 定义阴影相机的投影范围，用于平行光的阴影渲染，确定在场景中的覆盖范围
directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 50;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50;
directionalLight.shadowCameraNear = 2;
directionalLight.shadowCameraFar = 200;
directionalLight.shadowMapWidth = 4096;
directionalLight.shadowMapHeight = 4096;
initControls(directionalLight);
const animation = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html>
平行光
五、半球光
半球光模拟室外自然光照，不会生成阴影。
// skyColor groundColor intensity
new THREE.HemisphereLight(0xff00ff, 0x00ff00, 1);
| 参数名称 | 描述 | 默认值 |
|---|---|---|
| skyColor | 模拟天空光源颜色 | 白色（0xffffff） |
| groundColor | 模拟地面光源颜色 | 白色（0xffffff） |
| intensity | 光照强度 | 1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/three/three.js"></script>
<script src="../lib/three/dat.gui.js"></script>
<script src="../controls/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机 视野角度FOV、长宽比、近截面、远截面
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机位置
camera.position.set(0, 0, 20);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 创建立方体材质
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
wireframe: false
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);
// 添加球体
const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
// 创建球体材质
const sphereMatrial = new THREE.MeshLambertMaterial({
color: 0x00ff00,
wireframe: false
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);
sphere.position.x = 3;
sphere.position.y = 1;
// 添加到场景
scene.add(sphere);
// 添加平面，用来接收阴影
const planeGeometry = new THREE.PlaneGeometry(20, 30);
const planeMaterial = new THREE.MeshBasicMaterial({
color: 0x999999
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateZ(20);
plane.position.z = -10;
plane.position.x = 3;
scene.add(plane);
// 添加环境光
const ambientLight = new THREE.AmbientLight(0x000000);
scene.add(ambientLight);
// 添加灯光
const hemisphereLight = new THREE.HemisphereLight(0xff00ff, 0x00ff00);
hemisphereLight.position.set(-10, 10, 30);
scene.add(hemisphereLight);
// 产生阴影
cube.castShadow = true;
sphere.castShadow = true;
// 接收阴影
plane.receiveShadow = true;
renderer.shadowMapEnabled = true;
initControls(hemisphereLight);
const animation = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
hemisphereLight.position.z -= 0.1;
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html>
半球光
总结
本篇文章我们讲解了光源的基本使用，包括聚光灯、环境光、点光源、平行光和半球光。我们首先熟悉了GUI工具，然后经过逻辑封装使用在这一些列光源中。
更多内容扩展请大家自行查阅 => three.js官方文档，真心推荐读一读！！
好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！
参考资料：
- Three.js 官方文档
- WebGL+Three.js 入门与实战【作者：慕课网_yancy】
![BugkuCTF：overflow2[WriteUP]](https://img-blog.csdnimg.cn/direct/511800f3066e459eb08b544632fd46ab.png)
