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

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

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

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

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

这个想法是显示 -180 和 180

解决方法

您将不得不创建一个以度为单位保存值的占位符对象，然后 use the .onChange() event 才能知道值何时发生变化。那时您可以将度数转换为弧度以分配给您的网格旋转。

// 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() to convert from degrees to radians.