three图形控制页面

安装

npm i dat.gui

引入 

import * as dat from 'dat.gui'

 实例化

this.gui = new dat.GUI()

使用代码

this.gui.add(this.camera.position, 'x', -5, 5, 0.1).name('相机位置x')
this.gui.add(this.camera.position, 'y', -5, 5, 0.1).name('相机位置y')
this.gui.add(this.camera.position, 'z', -5, 5, 0.1).name('相机位置z')

使用参数说明 

参数一： 控制的对象（注意第一个参数只能放对象 ）

参数二：控制对象里面的属性

参数三： 属性的最低取值

参数四： 属性的最高取值

参数五： 属性每次增加(减少)的值

.name(a): a是控制属性的名吧

效果如图 

上面可以把相机都放到一个文件下 

const folder1 = this.gui.addFolder('相机位置')
            
folder1.add(this.camera.position, 'x', -5, 5).name('相机位置x')
folder1.add(this.camera.position, 'y', -5, 5).name('相机位置y')
folder1.add(this.camera.position, 'z', -5, 5).name('相机位置z')

效果如图 

如果this.gui.add()只给两个参数 就会显示一个选框    选中为true  反之false

const geometry1 = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1)
const material1 = new THREE.MeshBasicMaterial({ color: 0xff00ff})
material1.wireframe = true
this.cube1 = new THREE.Mesh(geometry1, material1)
            
this.gui.add(this.cube1.position, 'x', -5, 5).name('物体位置-x')
this.gui.add(this.cube1.position, 'y', -5, 5).name('物体位置-y')
this.gui.add(this.cube1.position, 'z', -5, 5).name('物体位置-z')
this.gui.add(material1, 'wireframe')

图片

给物体选择颜色this.gui.addColor()

// 物体
const cubeControls = { color: 0xff0000 }
const geometry1 = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1)
const material1 = new THREE.MeshBasicMaterial({ color: cubeControls.color})
material1.wireframe = true
this.cube1 = new THREE.Mesh(geometry1, material1)
            
this.gui.addColor(cubeControls, 'color').onChange(() => {
    material1 = cubeControls.color
})

效果如图所示

 按钮操作