@0b5vr/tweakpane-plugin-rotation 中文文档教程

发布于 3年前 浏览 24 更新于 3年前

@0b5vr/tweakpane-plugin-rotation

npm

Tweakpane 的旋转输入插件

@0b5vr/tweakpane-plugin-rotation,tweakpane 的旋转输入插件。右边是插件的工作截图

沙盒

<script src="https://unpkg.com/tweakpane@3.0.5/dist/tweakpane.js"></script>
<script src="./tweakpane-plugin-rotation.js"></script>
<script>
  const pane = new Tweakpane.Pane();

  pane.registerPlugin(TweakpaneRotationInputPlugin);

  const params = {
    euler: { x: 0.0, y: 0.0, z: 0.0 },
    quat: { x: 0.0, y: 0.0, z: 0.0, w: 1.0 },
  }

  // euler
  const guiEuler = pane.addInput(params, 'euler', {
    view: 'rotation',
    rotationMode: 'euler',
    order: 'XYZ', // Extrinsic rotation order. optional, 'XYZ' by default
    unit: 'deg', // or 'rad' or 'turn'. optional, 'rad' by default
  });

  // quaternion
  const guiQuat = pane.addInput(params, 'quat', {
    view: 'rotation',
    rotationMode: 'quaternion', // optional, 'quaternion' by default
    picker: 'inline', // or 'popup'. optional, 'popup' by default
    expanded: true, // optional, false by default
  });

  guiEuler.on('change', ({ value }) => {
    console.log(value); // do something
  });
</script>

@0b5vr/tweakpane-plugin-rotation

npm

Rotation input plugin for Tweakpane

@0b5vr/tweakpane-plugin-rotation, Rotation input plugin for tweakpane. A working screenshot of the plugin on the right

Sandbox

<script src="https://unpkg.com/tweakpane@3.0.5/dist/tweakpane.js"></script>
<script src="./tweakpane-plugin-rotation.js"></script>
<script>
  const pane = new Tweakpane.Pane();

  pane.registerPlugin(TweakpaneRotationInputPlugin);

  const params = {
    euler: { x: 0.0, y: 0.0, z: 0.0 },
    quat: { x: 0.0, y: 0.0, z: 0.0, w: 1.0 },
  }

  // euler
  const guiEuler = pane.addInput(params, 'euler', {
    view: 'rotation',
    rotationMode: 'euler',
    order: 'XYZ', // Extrinsic rotation order. optional, 'XYZ' by default
    unit: 'deg', // or 'rad' or 'turn'. optional, 'rad' by default
  });

  // quaternion
  const guiQuat = pane.addInput(params, 'quat', {
    view: 'rotation',
    rotationMode: 'quaternion', // optional, 'quaternion' by default
    picker: 'inline', // or 'popup'. optional, 'popup' by default
    expanded: true, // optional, false by default
  });

  guiEuler.on('change', ({ value }) => {
    console.log(value); // do something
  });
</script>
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文