@0b5vr/tweakpane-plugin-rotation 中文文档教程
@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
Rotation input plugin for 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>