threejs场景添加dat.GUI库控制场景

黄丫丫07

于 2024-08-22 14:34:46 发布

阅读量417

点赞数 9

分类专栏： threejs 文章标签： threejs dat.GUI GUI

本文链接：https://blog.csdn.net/m0_51495354/article/details/141426376

版权

threejs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、需求

我的需求是搭建一个园区，关于场景明暗的问题，每个人都有自己的想法，有的人就觉得亮一点好看，有的人觉得暗一点好看，但直接让客户修改代码是非常不现实的一件事，所以我就想有没有什么组件是可以让用户自己调节自己喜欢的光的强弱，于是就有了现在的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控件了，并且可以试着调节一下光的亮度，看看可不可以调节。