Dat.gui

Dat.gui

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

我们在浏览threejs官网文档时，往往可以看到右上角有一个ui界面可以对物体进行一些操作，实时看到物体的变化，例如下图就是改变颜色。当我们在写自己的项目中，也可以通过dat.gui实现这种效果，便于操作。

下载和引入

github地址:github.com/dataarts/da…

从 npm 安装

npm install --save dat.gui

引入

import * as dat from 'dat.gui';

使用

首先我们先初始化场景，相机，渲染器，控制器。 为了方便观察，我创建一个平面和坐标轴。

    //创建一个平面
    const geometry = new THREE.PlaneGeometry( 10, 10, 1, 1)
    const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
    const plane = new THREE.Mesh(geometry, material);
    plane.rotation.x=-Math.PI/2
    scene.add(plane);
    //辅助坐标轴
    const axesHelper = new THREE.AxesHelper( 5 );
    scene.add( axesHelper );

接下来我们console.log一下这个平面

我们可以看到该平面的position为(0,0,0),我们使用dat.gui来控制一下位置。

const gui = new dat.GUI();
    gui.add(plane.position,'x')
    .min(-10) //最小x位置
    .max(100)//最大x位置
    .step(0.1)//精度
    .name("x轴")//命名

在位置变更时和变更后也可执行函数方法。

    gui.add(plane.position,'x').
    min(-10).
    max(100).
    step(0.1).
    name("x轴")
    .onChange((value)=>{
      console.log(value);
    })
    .onFinishChange(()=>{
      console.log("完成")
      console.log(plane)
    })

同理我们创建y轴和z轴

    gui.add(plane.position,'y').
    min(-10).
    max(100).
    step(0.1).
    name("y轴")
    gui.add(plane.position,'z').
    min(-10).
    max(100).
    step(0.1).
    name("z轴")

为了方便分类整理，我们可以创建文件夹

    const console1={
        console1:()=>{
        console.log(1)
      }
    }
    //创建一个文件夹命名
    const folder=gui.addFolder("folder")
    //线框
    folder.add(plane.material,"wireframe");
    //透明
    folder.add(plane.material,"transparent").name("transparent")
    folder.add(plane.material,"side").name("side")
    folder.add(console1,"console1").name('console1')
    
    
    //另一个文件夹
    const color={
      color:"#ffff00",
    }
    const folder1=gui.addFolder("folder1")
    //颜色
    folder1.addColor(color,"color").onFinishChange((value)=>{
      plane.material.color.set(value)
      console.log(value)
    })

结果如下

实现其他效果可以查查api，没有深入去研究

API

github.com/dataarts/da…

萌新刚刚入门，有啥不足欢迎指出，如果文章对你有所帮助，会很开心捏🥰