v3+three.js使用GUI调试器

<template>
  <div ref="threeRef"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 实时查看性能
import Stats from 'three/examples/jsm/libs/stats.module.js'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 性能检测
let stats = new Stats()
stats.setMode(0)
document.body.appendChild(stats.domElement)
let threeRef=ref()
const scene=new THREE.Scene()
scene.background=new THREE.Color('#2fa799')
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.y=200 // 40
camera.position.x=0
camera.position.z=100 // 30
// 相机朝向
camera.lookAt(scene.position)
// 坐标轴
const axes=new THREE.AxesHelper(50)
scene.add(axes)
// 渲染器
const renderer=new THREE.WebGLRenderer({antialias:true})
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.render( scene, camera );
renderer.outputEncoding=THREE.sRGBEncoding
// 监听窗口变化
window.addEventListener('resize',()=>{
  camera.aspect=window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth,window.innerHeight)
},false)
// 相机
const controls=new OrbitControls(camera,renderer.domElement)
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 点光源
const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.set(0, 3, 0);
scene.add(pointLight);

// GUI使用,其他功能一样,就不一一举例了,跟bigSize一样
let gui =new GUI()
let modelGui=ref({
  bigSize:8,
  shift:7,
  color0: "#ffae23",
  drop:'tow',
  FN:function (){
    console.log(this.bigSize)
  },
  show:true,
})
// 渲染一个GUI
if(document.querySelectorAll(".dg.ac>.dg.main.a").length===0){
  gui.add(modelGui.value,'bigSize').name('大小').min(1).max(10).step(1).onChange(function (val) {
    console.log('onchange',val)
  })
  gui.add(modelGui.value,'shift').name('平移').min(1).max(10).step(1).onFinishChange(function (val) {
    console.log('onFinishChange',val)
  })
  gui.addColor(modelGui.value,'color0').name('颜色')
  gui.addFolder('下拉框').add(modelGui.value,'drop',['one', 'two', '三']).name('框')
  gui.add(modelGui.value,'FN')
  gui.add(modelGui.value, 'show').name('是否显示')
}
// 随机颜色
let random='#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
const pieceJ=new THREE.BoxGeometry(80,80,80)
const pieceC=new THREE.MeshBasicMaterial({color:random})
const pieceW=new THREE.Mesh(kuaiJ,kuaiC)
pieceW.position.x=50
pieceW.position.y=50
pieceW.position.z=50
scene.add(pieceW)

const init=()=>{
pieceW.scale.set(modelGui.value.bigSize/10,modelGui.value.bigSize/10,modelGui.value.bigSize/10)
  threeRef.value?.appendChild(renderer.domElement)
  stats.update()
  controls.update()
  requestAnimationFrame(init)
  renderer.render( scene, camera );
}
onMounted(()=>{
  init()
})
</script>

<style scoped lang="less">

</style>

// 另一种方式
npm install dat.gui
import * as dat from 'dat.gui'
// 定义需要改变的变量
// 使用
let user={
	name:'路飞',
	age:18
}
const gui = new dat.GUI()
    gui.domElement.style.marginTop='100px'
    gui
      .add(user,'age')
      .min(1)
      .max(99)
      .step(1)
      .name('路飞')
      .onFinishChange((e) => {
        user.age=e
        console.log(user.age);
      });