文档地址：https://github.com/dataarts/dat.gui/blob/master/API.md
基本使用方法
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
<script>
// dat相关
// 创建实例对象
const gui = new dat.GUI();
// 创建控制对象
const controlData = {
rotaionSpeed: 0.02,
color: '#66ccff',
wireframe: false,
envMap: '无'
}
const f = gui.addFolder('配置')
// 可拖动步进器，写法一（不写参数则只有输入框，没有步进器）
f.add(controlData, 'rotaionSpeed', 0.01, 0.1, 0.01)
// 写法二
// f.add(controlData, 'rotaionSpeed').min(0.01).max(0.1).step(0.01)
// 颜色选择器
f.addColor(controlData, 'color')
// 勾选框
f.add(controlData, 'wireframe')
// 下拉列表
f.add(controlData, 'envMap', ['无', '全反射', '漫反射'])
f.domElement.id = 'gui'
f.open()
</script>
绑定参数
cube.rotation.x += controlData.rotaionSpeed
cube.rotation.y += controlData.rotaionSpeed
cube.rotation.z += controlData.rotaionSpeed
cube.material.color = new THREE.Color(controlData.color)
cube.material.wireframe = controlData.wireframe
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>threejs-demo1</title>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.149.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.149.0/examples/jsm/"
}
}
</script>
<style>
#gui {
position: absolute;
right: 0;
width: 300px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
<script>
// dat相关
// 创建实例对象
const gui = new dat.GUI();
// 创建控制对象
const controlData = {
rotaionSpeed: 0.02,
color: '#66ccff',
wireframe: false,
envMap: '无'
}
const f = gui.addFolder('配置')
// 可拖动步进器，写法一（不写参数则只有输入框，没有步进器）
f.add(controlData, 'rotaionSpeed', 0.01, 0.1, 0.01)
// 写法二
// f.add(controlData, 'rotaionSpeed').min(0.01).max(0.1).step(0.01)
// 颜色选择器
f.addColor(controlData, 'color')
// 勾选框
f.add(controlData, 'wireframe')
// 下拉列表
f.add(controlData, 'envMap', ['无', '全反射', '漫反射'])
f.domElement.id = 'gui'
f.open()
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 创建场景
const scene = new THREE.Scene();
// 设置背景图片
scene.background = new THREE.CubeTextureLoader().setPath('./img/').load(['5.png', '5.png', '5.png', '5.png', '5.png', '5.png'])
// 创建透视相机
const camera = new THREE.PerspectiveCamera(75);
// 移动相机位置
camera.position.z = 10;
camera.position.y = 5;
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 颜色
// 创建网格
const cube = new THREE.Mesh(geometry);
cube.position.set(0, 3, 0) // 移动位置（x,y,z）
scene.add(cube);
// 控制相机看向哪个位置，不可和轨道控制器一块用
camera.lookAt(cube.position)
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 调整渲染器窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(f.domElement);
document.getElementById('container').appendChild(renderer.domElement);
// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
axesHelper.position.y = 3
scene.add(axesHelper);
// 添加网格地面
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
// 立方体动画
function animate() {
requestAnimationFrame(animate);
// 绑定dat参数
cube.rotation.x += controlData.rotaionSpeed
cube.rotation.y += controlData.rotaionSpeed
cube.rotation.z += controlData.rotaionSpeed
cube.material.color = new THREE.Color(controlData.color)
cube.material.wireframe = controlData.wireframe
// 进行渲染
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
