Three.js - 调试和统计

使用 Dat.GUI

很难不断尝试变量的值，例如立方体的位置。在这种情况下，假设直到你得到你喜欢的东西。这是一个缓慢而繁琐的过程。幸运的是，已经有一个很好的解决方案可以与 Three.js 完美集成，那就是 dat.GUI。它允许您创建一个可以在代码中更改变量的基本用户界面组件。

安装

要在项目中使用 dat.GUI，请从此处下载并添加 <script>标记到 HTML 文件中。

<script type='text/javascript' src='path/to/dat.gui.min.js'></script>

或者您可以使用 CDN，在 HTML 中添加以下 <script> 标记。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>

如果您在节点应用程序中使用 Three.js，请安装 npm 包 - dat.GUI 并将其导入到您的 JavaScript 文件中。

npm install dat.gui

或

yarn add dat.gui
import * as dat from 'dat.gui'

用法

首先，您应该初始化对象本身。它会创建一个小部件并将其显示在屏幕右上角。

const gui = new dat.GUI()

然后，您可以添加要控制的参数和变量。例如，以下代码用于控制立方体的 y 位置。

gui.add(cube.position, 'y')

示例

尝试添加其他位置变量。请参阅此工作代码示例。

cube.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - Position GUI</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
            Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // Adding UI to debug and experimenting different values
         // UI
         const gui = new dat.GUI()
         // 尺寸
         let width = window.innerWidth
         let height = window.innerHeight
         // 场景
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // 相机
         const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         // cube
         const geometry = new THREE.BoxGeometry(2, 2, 2)
         const material = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            wireframe: true
         })
         gui.add(material, 'wireframe')
         const cube = new THREE.Mesh(geometry, material)
         scene.add(cube)
         gui.add(cube.position, 'x')
         gui.add(cube.position, 'y')
         gui.add(cube.position, 'z')
         // 响应性
         window.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // 渲染器
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // 动画
         function animate() {
            requestAnimationFrame(animate)
            cube.rotation.x += 0.005
            cube.rotation.y += 0.01
            renderer.render(scene, camera)
         }
         // 渲染场景
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

输出

您可以使用 name 属性自定义显示的标签。要更改变量行上的标签，请使用 .name("your label")。

gui.add(cube.position, 'y').name('cube-y')

您可以设置获取滑块的最小/最大限制和步骤。以下行允许从 1 到 10 的值，每次将值增加 1。

gui.add(cube.position, 'y').min(1).max(10).step(1)
// 或
gui.add(cube.position, 'y', 1, 10, 1)

如果有许多同名的变量，您可能会发现很难区分它们。在这种情况下，您可以为每个对象添加文件夹。所有与对象相关的变量都放在一个文件夹中。

// 创建一个文件夹
const cube1 = gui.addFolder('Cube 1')
cube1.add(redCube.position, 'y').min(1).max(10).step(1)
cube1.add(redCube.position, 'x').min(1).max(10).step(1)
cube1.add(redCube.position, 'z').min(1).max(10).step(1)
// 另一个文件夹
const cube2 = gui.addFolder('Cube 2')
cube2.add(greenCube.position, 'y').min(1).max(10).step(1)
cube2.add(greenCube.position, 'x').min(1).max(10).step(1)
cube2.add(greenCube.position, 'z').min(1).max(10).step(1)

示例

现在，检查以下示例。

gui-folders.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - More variables</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
               Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // 添加文件夹来区分变量

         // 控件
         const gui = new dat.GUI()
         // 尺寸
         let width = window.innerWidth
         let height = window.innerHeight
         // 场景
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // 相机
         const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         const camFolder = gui.addFolder('Camera')
         camFolder.add(camera.position, 'z').min(10).max(60).step(10)
         // cube
         const geometry = new THREE.BoxGeometry(2, 2, 2)
         const material = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            wireframe: true
         })
         const cubeColor = {
            color: 0xffffff
         }
         const materialFolder = gui.addFolder('Material')
         materialFolder.add(material, 'wireframe')
         materialFolder.addColor(cubeColor, 'color').onChange(() => {
            // callback
            material.color.set(cubeColor.color)
         })
         materialFolder.open()
         const cube = new THREE.Mesh(geometry, material)
         scene.add(cube)
         const cubeFolder = gui.addFolder('Cube')
         // for position
         const posFolder = cubeFolder.addFolder('position')
         posFolder.add(cube.position, 'x', 0, 5, 0.1)
         posFolder.add(cube.position, 'y', 0, 5, 0.1)
         posFolder.add(cube.position, 'z', 0, 5, 0.1)
         posFolder.open()
         // for scale
         const scaleFolder = cubeFolder.addFolder('Scale')
         scaleFolder.add(cube.scale, 'x', 0, 5, 0.1).name('Width')
         scaleFolder.add(cube.scale, 'y', 0, 5, 0.1).name('Height')
         scaleFolder.add(cube.scale, 'z', 0, 5, 0.1).name('Depth')
         scaleFolder.open()
         cubeFolder.open()
         // 响应性
         window.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // 渲染器
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // 动画
         function animate() {
         requestAnimationFrame(animate)
            cube.rotation.x += 0.005
            cube.rotation.y += 0.01
            renderer.render(scene, camera)
         }
         // 渲染场景
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

输出

您还可以添加一些回调函数。一旦值发生变化，就会触发 onChange。

gui.add(cube.position, 'y').onChange(function () {
    // 根据 y 的新值刷新
    console.log(cube.position.y)
})

让我们看另一个使用 dat.gui 和回调改变颜色的例子。

// 参数
const cubeColor = {
color: 0xff0000,
}
gui.addColor(cubeColor, 'color').onChange(() => {
    // 回调
    cube.color.set(cubeColor.color)
})

当 cubeColor 的颜色发生变化时，上述回调 onChange 会通知 Three.js 更改立方体颜色。

从现在开始，我们将大量使用这个 dat.gui。通过尝试"Hello Cube!"应用程序，确保您已经习惯了它。

• 统计数据 − 统计数据在大型应用程序中起着重要作用。