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

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)
            }