Test New Controls

[AndrewJSchoen]

• In the "More Controls" story, work through the logic of how the store is being updated, and how the relationship between the data and visuals produces the observable behavior.

  • Range Input
  • Scalar Input

• In a code sandbox with react-three/fiber, begin testing and developing the logic for how these types of widgets could be implemented.

  • Range/Scalar Input (mimic the behavior of the more controls example). Specifically we will try to remove the requirement for transform controls and just support direct drag
  • Angle Input Example.
  • Translation/Rotation/Scale Input Example, but we aren't using drei for this

Work out the following bugs/behaviors:

• Dragging "stuttering" when cursor goes over interactable
• Refactor to use refs/useFrame where relevant, can use useSpring for indicators
• Handle zoom interaction with drag (can ask on stack overflow or discord)
• Parameterize according to a data model like this:

widget1: {
    type: 'scalar', // range, transform, etc.
    frame: 'movingFrame',
    position: { x: 0, y: 1, z: 1 },
    rotation: { w: 1, x: 0, y: 0, z: 0 },
    color: { r: 10, g: 10, b: 255, a: 1 },
    value: 4.2,
    range: [3,6]
}

Other Useful Links:

• R3F examples
• Current Transform Controls
• Conversion (see rs2bp and bp2vis)