首先安装

pnpm add dat.gui @types/dat.gui

引入 dat.gui

添加代码

import * as dat from 'dat.gui';

const gui = new dat.GUI()
const options = {
    message: 'dat.gui',
    //   旋转速度
    rotationSpeed: 0.01,
}

gui.add(options, 'rotationSpeed', 0.01, 0.10, 0.01).name('旋转')

这时候已经可以看到效果

下面是完整代码

import * as THREE from 'three';

import * as dat from 'dat.gui';

const gui = new dat.GUI()
const options = {
    message: 'dat.gui',
    //   旋转速度
    rotationSpeed: 0.01,
}

gui.add(options, 'rotationSpeed', 0.01, 0.10, 0.01).name('旋转速度')

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
// 创建一个正方形
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 正方形面上添加颜色
const cube = new THREE.Mesh(geometry, material);

// 把渲染好的正方形添加到场景中
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += options.rotationSpeed;
    cube.rotation.y += options.rotationSpeed;
    // 重新渲染
    renderer.render(scene, camera);
}

// 执行动画
animate();