【Vue3+Tres 三维开发】02-Debug

预览

介绍

Debug 这里主要是讲在三维中的调试，同以前threejs中使用的lil-gui类似，TRESJS也提供了一套可视化参数调试的插件。使用方式和之前的组件相似。

使用

• 通过导入useTweakPane 即可

  import { useTweakPane, OrbitControls } from "@tresjs/cientos"
  
  const { pane } = useTweakPane();
  1
  2
  3

• 创建分组和参数设置项

  const cameraFolder = pane.addFolder({ title: "Camera" });
  const cameraState = reactive({
    ...
    fov: 75,
    ...
  });
  
  const cameraFolder = pane.addFolder({ title: "Camera" });
  cameraFolder.addBinding(cameraState, "fov", {
    label: "fov",
    step: 1,
    min: 45,
    max: 85,
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

• 设置debug参数ÿ