Three.js 如何使用 dat.GUI 在控制面板中将值转换为度数？

Question

我在控制面板中做了一个简单的 slider 来修改 position 和 object 的旋转。 我对 position 没有问题，因为这些值是相对的，但我想以度为单位显示旋转值。 这是我在旋转控件中的内容：

gui
  .add(mesh.rotation, "x")
  .min(Math.PI * -1)
  .max(Math.PI)
  .step(0.01)
  .name("Rotar en X");

这就是它在控制面板中的显示方式：

这个想法是显示 -180 和 180

Answer 1

您将不得不创建一个占位符 object 以度为单位保存值，然后使用.onChange()事件来了解值何时更改。 那时您可以将度数转换为弧度以分配给网格旋转。

// Placeholder holds values in degrees
var degrees = {
    x: 0,
    y: 0,
    z: 0
};

gui
    .add(degrees, "x")
    .min(-180)
    .max(180)
    .step(1)
    // This function is called each time the value is changed
    .onChange(() => {
        console.log(degrees.x);

        // Convert the degrees to radians, then assign to mesh rotation
        mesh.rotation.x = THREE.MathUtils.degToRad(degrees.x);
    });

我正在使用THREE.MathUtils.degToRad()将度数转换为弧度。