光相信大家都熟悉吧！我们每天都能看见各种各样的光，如：太阳光(平行光)以及等灯泡/蜡烛(点光源)。 在Three.js中也为我们封装了许多的光类
文章目录
前言
光类也比较简单，主要是需要调整光的位置。官方文档：灯光
当然为了更方便更快捷我们需要可以学习一下dat.GUI这个工具库，它可以帮助我们快速更改灯光的效果。我这里也有一篇写了一些dat.GUI常用的代码
一、AmbientLight（环境光）
说明： 创建环境光，它会均匀的照亮场景中的所有物体。环境光不能用来投射阴影，因为它没有方向。
相关代码：
将demo-2中的HelloWorld.vue created函数替换成以下代码
created() {
const threeObj = new threeUtil({
modelUrl: "/static/3d/koala_con_flor/scene.gltf",
camera: {
x: 3,
y: 3,
},
});
this.Three = threeObj;
const THREE = threeObj.THREE2;
threeObj.init({
setLight: true });
/**
* 创建一个地板
*/
let planeGeomerty = new THREE.PlaneGeometry(5, 2, 1, 1);
let planeMaterial = new THREE.MeshLambertMaterial({
color: 0x996600,
});
let plane = new THREE.Mesh(planeGeomerty, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.receiveShadow = true;
threeObj.scene.add(plane);
/**
* 创建新的灯光
*/
const light = new THREE.AmbientLight(0x66ff33); // soft white light
threeObj.scene.add(light);
/**
* 使用dat.gui工具
*/
const gui = new dat.GUI({
name: "lightGui", //GUI的名称
});
//设置交互界面位置
gui.domElement.style = "position:absolute;top:50px;right:10px";
/**
* 控件对象
* 属性值：
* Number类型——slider、下拉菜单...
Boolean类型——复选框
Function类型——按钮
String——文本输入框、下拉菜单
*/
let guiControls = {
lightColir: '#ffffff',
};
gui
.addColor(guiControls, "lightColir")
.name("灯光颜色")
.onChange((e) => {
light.color = new THREE.Color(e);
});
// 创建辅助线
// (() => {
// const THREE = threeObj.THREE2;
// const spotLight = new THREE.SpotLight(0x009900);
// spotLight.position.set(1, 1, 1);
// threeObj.scene.add(spotLight);
// const spotLightHelper = new THREE.SpotLightHelper(spotLight);
// threeObj.scene.add(spotLightHelper);
// })();
// threeObj.autoRotation();
},
二、DirectionalLight（平行光）
说明： 平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。默认该平行光是从上到下
相关代码：
将demo-2中的HelloWorld.vue created函数替换成以下代码
created() {
const threeObj = new threeUtil({
modelUrl: "/static/3d/koala_con_flor/scene.gltf",
camera: {
x: 3,
y: 3,
},
});
this.Three = threeObj;
const THREE = threeObj.THREE2;
threeObj.init({
setLight: true });
/**
* 创建一个地板
*/
let planeGeomerty = new THREE.PlaneGeometry(5, 2, 1, 1);
let planeMaterial = new THREE.MeshLambertMaterial({
color: 0x996600,
});
let plane = new THREE.Mesh(planeGeomerty, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.receiveShadow = true;
threeObj.scene.add(plane);
/**
* 创建新的灯光
*/
const light = new THREE.DirectionalLight( 0xffffff, 1 );
threeObj.scene.add(light);
/**
* 使用dat.gui工具
*/
const gui = new dat.GUI({
name: "lightGui", //GUI的名称
});
//设置交互界面位置
gui.domElement.style = "position:absolute;top:50px;right:10px";
/**
* 控件对象
* 属性值：
* Number类型——slider、下拉菜单...
Boolean类型——复选框
Function类型——按钮
String——文本输入框、下拉菜单
*/
let guiControls = {
lightColir: '#ffffff',
intensity:1
};
gui
.addColor(guiControls, "lightColir")
.name("灯光颜色")
.onChange((e) => {
light.color = new THREE.Color(e);
});
gui
.add(guiControls, "intensity",0,1)
.name("光照强度")
.onChange((e) => {
light.intensity = e;
});
// 创建辅助线
// (() => {
// const THREE = threeObj.THREE2;
// const spotLight = new THREE.SpotLight(0x009900);
// spotLight.position.set(1, 1, 1);
// threeObj.scene.add(spotLight);
// const spotLightHelper = new THREE.SpotLightHelper(spotLight);
// threeObj.scene.add(spotLightHelper);
// })();
// threeObj.autoRotation();
},
三、HemisphereLight（半球光）
说明： 光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。半球光不能投射阴影
四、PointLight（点光源）
说明：从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。该光源可以投射阴影
五、RectAreaLight（平面光光源）
说明：平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
六、SpotLight（聚光灯）
说明：光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。该光源可以投射阴影