THREE.js +dat.gui 应用图形用户页面改变变量

安装dat.gui

npm install dat.gui

使用

import *as dat form 'dat.gui'

const gui = new  dat.Gui()

gui.add(cube.position,"x").min(0).max(5).step(0.01).name('移动X轴').onChange((value)=>{

        console.log('值被修改'，value)

}).onFinishChange((value)=>{

        console.log('修改完成', value)

}) // 最小值、最大值、每一步多少、名字、

改变物体颜色

const params = {

        color:'#FFFF00'

}

gui.addColor(params, 'color').onChange((value)=>{

        console.log('颜色修改完成', value);

        cube.material.color.set(value)

})

// 设置选项框

gui.add(cube,'visible').name('是否显示')；

// 设置按钮触发某个事件

gui.add(param,'fn').name('立方体运动')；

var folder = gui.addFolder('设置线条')

folder.add(cube.material, 'wireframe')

创建几何体

const geometry = new THREE.BufferGeometry();

const vertices = new Ffloat32Array([

        -1.0,-1.0,1.0,

        1.0,-1.0,1.0,

        1.0,1.0,1.0,

        1.0,1.0,1.0,

        -1.0,1.0,1.0,

        -1.0,-1.0,1.0

])

geometry.setAttribute(position , new THREE.BufferAttribute(vertices , 3))

const material = new THREE.MeshBasicMaterial({color: '0xFFFF00'})

const mesh = new THREE.Mesh(geometry, material)