2020年6月14日(dat.gui)


因为我们公司主要是做三维这一块刚好要用到,于是学习了dat.gui,那么他到底是什么呢?

dat.GUI 是一个轻量级的图形用户界面库(GUI 组件),使用这个库可以很容易地创建出能够改变代码变量的界面组件。

简单来说,如果我希望页面改变,我需要修改参数,在保存进行运行,可是dat.gui可以在我们的页面上直接修改参数,并且页面立即发生变化,还是挺优秀的

案例展示

这是我们公司自己弄的第一个npm镜像,主要是把这些三维模型引入进来image-20200614195548279

其实都会有说明文档,参数我们要用dat.gui来配置,主要是一个demo展示,方便客户看了之后知道是干啥的

image-20200614195728408

第一步

首先需要创建一个对象,我使用的是react-dat-gui,需要把使用到的数据绑定到dat-gui中

image-20200614195926513

image-20200614200131126

最后在修改这个对象的数据就可以有一个实时的变化

image-20200614200329607

第二步

当然开始是需要webpack配置的,但是我之前做过proxy,有一个弊端就是我npm run eject的时候不会暴露配置项,

image-20200614200525324

但是react-app-rewired是可以有的,他自己做了封装

配置

最后做出来的效果就是这样,这只是一个基本的样子,还有地图引入进来的不同模式,刚刚开始做这方面的东西小白一个,需要学习的地方真的很多,每天进步一点点

demo


Author: wxy
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source wxy !
  TOC