threejs学习之dat.gui，辅助调参工具

旅行中的伊蕾娜

于 2024-05-02 16:30:56 发布

阅读量928

点赞数 24

分类专栏： threejs学习笔记文章标签：学习

本文链接：https://blog.csdn.net/zzz18789/article/details/138394254

版权

threejs学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Three.js项目中利用Dat.GUI库创建一个可交互的配置面板，通过控制对象实现参数的动态调整，如旋转速度、颜色选择和布尔开关等。

摘要由CSDN通过智能技术生成

文档地址：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>