韩国美容网站模板,微信公众号二维码,263邮箱个人登录口,北京网站优化wyhseo前期文章中我们完成了创建第一个场景、添加轨道控制器的功能#xff0c;接下来我们继续阐述其他的功能#xff0c;本篇文章中主要讲述如何应用lil-GUI调试开发3D效果#xff0c;在开始具体流程和步骤之前#xff0c;请先查看之前的内容#xff0c;因为该功能必须在前期内容…前期文章中我们完成了创建第一个场景、添加轨道控制器的功能接下来我们继续阐述其他的功能本篇文章中主要讲述如何应用lil-GUI调试开发3D效果在开始具体流程和步骤之前请先查看之前的内容因为该功能必须在前期内容的基础上才可完成。
目录
一、GUI界面概述
二、GUI使用
1.导入GUI
2.创建一个对象
3.创建GUI
4.应用GUI
5.控制立方体位置
1直接显示法
2最大值、最小值法
3添加folder法
4添加change事件 一、GUI界面概述
GUI全称Graphical User Interface即图形化用户界面它是众多程序特别是上位机软件中不可或缺的一部分。通过GUI用户只需进行简单的点击和操作就能轻松调用底层的复杂代码极大地提升了使用的便捷性和结果的直观展示性。
当我们完成了底层代码的开发后接下来就可以着手构建一个GUI界面了。这个界面就像是一个精美的包装它能够将我们的程序功能以更加友好、直观的方式呈现给用户。用户通过GUI可以轻松地与程序进行交互无需深入了解底层的复杂逻辑。
二、GUI使用
本章中只阐述GUI的相关内容之前的代码就不在进行书写接下来我们在代码中使用GUI
1.导入GUI
//导入lil.gui
import { GUI } from three/examples/jsm/libs/lil-gui.module.min
2.创建一个对象
这里我们应用显示全屏和退出全屏的案例来展示如何使用改功能
//创建显示全屏和退出全屏对象
const eventObj ref({//显示全屏showFullScreen: function () {document.body.requestFullscreen()},//退出全屏exitFullScreen: function () {document.exitFullscreen()}
})
3.创建GUI
//创建guiconst gui new GUI()
4.应用GUI
这里使用刚刚创建的显示全屏退出全屏为例
//添加控制器--显示全屏gui.add(eventObj.value, showFullScreen).name(全屏)//添加控制器--退出全屏gui.add(eventObj.value, exitFullScreen).name(退出全屏)
以下是实现效果我们可以看见右上角有个controls控制按钮 5.控制立方体位置 在上面代码的基础上我们继续添加这里拿控制立方体为例我们具体的写法分了几种下面一一介绍
1直接显示法
//控制立方体的位置----20,20是范围--第一种写法// gui.add(cube.position, x, -20, 20).name(立方体x轴)
2最大值、最小值法
//第二种写法---移动范围最小值是-20最大值是20步长为1// gui.add(cube.position, x).min(-20).max(20).step(1).name(立方体x轴)
3添加folder法
添加folder写法可以将其作为一个文件夹能添加多个控制器
//添加folder写法const foldder gui.addFolder(立方体)foldder.add(cube.position, x).min(-20).max(20).step(1).name(x轴)//y轴位置foldder.add(cube.position, y).min(-20).max(20).step(1).name(y轴)//z轴位置foldder.add(cube.position, z).min(-20).max(20).step(1).name(z轴)
4添加change事件 这里还可以继续在后面添加change事件以便于实时更新立方体位置
//x轴位置---onChange事件是立即更新的onFinishChange事件是鼠标松开更新的foldder.add(cube.position, x).min(-20).max(20).step(1).name(x轴).onChange(val {console.log(立方体x轴位置改变, val)})//y轴位置foldder.add(cube.position, y).min(-20).max(20).step(1).name(y轴).onFinishChange(val {console.log(立方体y轴位置改变, val)})//z轴位置foldder.add(cube.position, z).min(-20).max(20).step(1).name(z轴) 5调节立方体颜色 根据上述的方法我们这里在做个能通过GUI面板快速调节立方体颜色的小功能首先我们先设置父元素材质为线框模式
//设置父元素材质为线框模式parentMaterial.wireframe true
然后利用gui改变改变父元素材质
//改变父元素材质--判断是布尔值gui.add(parentMaterial, wireframe).name(父元素材质)
如果也想要改变子元素的材质先定义一个颜色对象
//改变子元素材质let colorParams {cubeColor: #0x00ff00} 然后也是同样的利用GUI
//给立方体添加颜色gui.addColor(colorParams, cubeColor).name(立方体颜色).onChange(val {console.log(val, vvvv)//点击颜色修改cube的颜色cube.material.color.set(val)})
