一、需求
我的需求是搭建一个园区,关于场景明暗的问题,每个人都有自己的想法,有的人就觉得亮一点好看,有的人觉得暗一点好看,但直接让客户修改代码是非常不现实的一件事,所以我就想有没有什么组件是可以让用户自己调节自己喜欢的光的强弱,于是就有了现在的dat.GUI来实现调节场景光强弱的解决方式。
当然dat.GUI的强大并不只是用来调节光的强弱的,它可以做的事情还有很多,当前这篇文章只是就我的需求,对GUI引入和使用进行描述,各位如果有什么问题的话可以联系我:wx:19834349787
二、步骤
1.引入GUI(本人感觉这个最难)
关于GUI的引入,threejs中文文档里面有两种方式,一种是github上直接下载,放到自己项目里面进行使用,另一种是直接npm install dat.GUI下载下来,下载成功就可以使用了。
我使用的是npm下载的方式。
遇到的问题:
最开始的时候我采用的其实是第一种方法,因为我npm下载的时候,提示错误了
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: vite@3.2.10
npm ERR! node_modules/vite
npm ERR! dev vite@"^3.0.0" from the root project
npm ERR! peer vite@">=2.0.0" from vite-plugin-compression@0.5.1
npm ERR! node_modules/vite-plugin-compression
npm ERR! dev vite-plugin-compression@"0.5.1" from the root project
npm ERR! 3 more (vite-plugin-externals, vite-plugin-svg-icons, @vitejs/plugin-vue)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^5.0.0" from vite-plugin-static-copy@1.0.1
npm ERR! node_modules/vite-plugin-static-copy
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-08-22T03_23_20_157Z-debug.log
说是vite版本存在冲突问题,我就想着直接下载使用就可以了,反正使用的都是js库,无所谓,但是,直接下载放在src/utils下面使用的时候总是报错,样式文件总是报错。
之后才有了第二种npm下载方式的尝试,我直接npm install dat.GUI --force强制下载,虽然有很多warn警告,但好在下载下来了,看到下面这句话就是下载下来了。
added 30 packages, removed 304 packages, and changed 14 packages in 2m
接下来就是在vue文件当中引入GUI了
需要引入index.js里面的GUI,这个文件里面默认导出了
我们直接 import { GUI } from "dat.gui/src/dat"; 就可以引入了
2.创建GUI
创建GUI是非常简单的,但是!!!需要在我们自己的templete里面创建div,并且把创建的GUI放到自己的div里面
<div style="z-index: 99;">
<div id="gui-container"></div>
</div>
createGUI() {
//添加GUI库
const gui = new GUI()
document.getElementById('gui-container').appendChild(gui.domElement);
gui.domElement.style.zIndex = '99';
const lightFolder = gui.addFolder('directionalLight')
lightFolder.add(this.directionalLight, 'intensity', 0, 10).name('Intensity')
lightFolder.open()
}
这个方法需要在mounted当中调用一下哈。
3.结果验证(是否可以正常控制场景的光线强弱)
创建完成之后,我们就可以在场景当中看到我们创建的GUI控件了,并且可以试着调节一下光的亮度,看看可不可以调节。
三、BUG解决(遇到的问题)
1.第一个问题就是下载dat.GUI
解决:使用npm install dat.GUI --force强制下载就可以了
2.生成的GUI控件在threejs的canvs画布的后面,我只能点击到场景的画布,但是却点击不到我的GUI控件
解决:我在一篇文章当中看到GUI和three并不是一起的,dat.GUI是用于创建图形用户界面 (GUI) 控件,帮助开发者在 Web 应用中进行实时调试和参数调整。
重点是GUI跟threejs是分开的,不是绑定在一起的啊,友友们。
最开始我把生成GUI的代码写到了initthree方法里面了,这样生成的GUI在画布后面,无法点击。
后面我把这个GUI单独放在了一个zindex为99的盒子里面,把生成的GUI直接放在最高层,当然就可以点击到啦。就是代码的这里
这样点击不到GUI的问题就解决了。
文章至此就结束啦,有不懂的问题或者有错的地方可以加我微信哦