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

Question

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

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

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

想法是显示-180 和 180

Answer 1

您将必须创建一个占位符对象来保存以度为单位的值，然后 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.

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

Three.js How to convert values to degrees in the control panel using dat.GUI?

javascript

three.js

degrees

dat.gui

radians