threejs的dat.gui辅助工具的使用

安装

npm i dat.gui -S

使用

import dat from 'dat.gui'
const controlData = {
    rotationSpeed: 0.01,
    color: '#66ccff',
    wireframe: false
}
const gui = new dat.GUI()
const f = gui.addFolder('配置')
f.add(controlData, 'rotationSpeed', 0.01, 0.1, 0.01)
f.addColor(controlData, 'color')
f.add(controlData, 'wireframe')
f.domElement.id = 'gui'
f.open()//open开启
...省略中间代码
//记住一定要在3d渲染前添加否则无效
dom.appendChild(f.domElement) //添加3d中
dom.appendChild(renderer.domElement)


//将gui与3d相关联起来controlData是gui的自定义对象属性

  function animate() {
                requestAnimationFrame(animate)
                cube.rotation.x += controlData.rotationSpeed
                // cube.rotation.x += 0.01
                cube.material.color = new THREE.Color(controlData.color)
                material.wireframe = controlData.wireframe
                controls.update()
                renderer.render(scene, camera)
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30