three.js添加gui参数调试工具

安装依赖

npm install --save dat.gui

在vue中使用

<template>
  <div id="canvas"></div>
</template>

<script>
    import dat from "dat.gui"

    // 创建gui调试面板
    // 创建控制对象
    const controlData = {
      color: "#2f3542"
    }
    // 创建实例
    const gui = new dat.GUI()
    const folder = gui.addFolder("参数调试")

    // 颜色选择器
    folder.addColor(controlData, "color")
    // 添加id选择器，方便后续进行样式控制
    folder.domElement.id = "gui"

    folder.open()

    onMounted(()=>{
        // 将gui面板元素放入app中
      document.getElementById("canvas").appendChild(folder.domElement)
        
      // 基础材质
      const material = new THREE.MeshBasicMaterial({
        color: controlData.color
      })
      
      // 在动画函数中进行
      function animate(time) {
        // 调试颜色
        mesh.material.color = new THREE.Color(controlData.color)
        }
       })
</script>