光相信大家都熟悉吧!我们每天都能看见各种各样的光,如:太阳光(平行光)以及等灯泡/蜡烛(点光源)。 在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();
},