How to use three-freeform-controls - 10 common examples

To help you get started, we’ve selected a few three-freeform-controls examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
controls.forEach((control, index) => {
      // cannot rely on the control.name being present or unique
      const key = name;
      if (this.contolsManagerMap[key] === undefined) {
        this.contolsManagerMap[key] = [];
      }
      if (this.contolsManagerMap[key].length !== controls.length) {
        const attachMode =
          control.orientation_mode ===
          INTERACTIVE_MARKER_ORIENTATION_MODES.FIXED
            ? ANCHOR_MODE.FIXED
            : ANCHOR_MODE.INHERIT;
        const controlsManager = freeformControls.anchor(object, {
          separationT: {
            x: 0.4,
            y: 0.4,
            z: 0.4,
          },
          orientation: control.orientation,
          mode: attachMode,
          hideOtherHandlesOnSelect: this.hideOtherHandlesOnSelect,
          hideOtherControlsInstancesOnSelect: this
            .hideOtherControlsInstancesOnSelect,
          showHelperPlane: true,
        });
        controlsManager.scale.set(scale, scale, scale);
        controlsManager.visible = visible;
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
controls.forEach((control, index) => {
      // cannot rely on the control.name being present or unique
      const key = name;
      if (this.contolsManagerMap[key] === undefined) {
        this.contolsManagerMap[key] = [];
      }
      if (this.contolsManagerMap[key].length !== controls.length) {
        const attachMode =
          control.orientation_mode ===
          INTERACTIVE_MARKER_ORIENTATION_MODES.FIXED
            ? ANCHOR_MODE.FIXED
            : ANCHOR_MODE.INHERIT;
        const controlsManager = freeformControls.anchor(object, {
          separationT: {
            x: 0.4,
            y: 0.4,
            z: 0.4,
          },
          orientation: control.orientation,
          mode: attachMode,
          hideOtherHandlesOnSelect: this.hideOtherHandlesOnSelect,
          hideOtherControlsInstancesOnSelect: this
            .hideOtherControlsInstancesOnSelect,
          showHelperPlane: true,
        });
        controlsManager.scale.set(scale, scale, scale);
        controlsManager.visible = visible;
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
) {
    controlsManager.showAll(false);

    // currently only ROTATE_AXIS is supported for VIEW_FACING mode
    // this is the most useful one
    if (
      UNSUPPORTED_INTERACTIVE_MARKER_ORIENTATION_MODES.indexOf(
        orientationMode,
      ) !== -1 &&
      interactionMode === INTERACTIVE_MARKER_INTERACTION_MODES.ROTATE_AXIS
    ) {
      object.userData.handlesControlsMap = {
        ...object.userData.handlesControlsMap,
        [DEFAULT_HANDLE_GROUP_NAME.ER]: controlName,
      };
      controlsManager.showByNames([DEFAULT_HANDLE_GROUP_NAME.ER], true);
      return;
    }

    let handles = [];

    switch (interactionMode) {
      case INTERACTIVE_MARKER_INTERACTION_MODES.NONE:
      case INTERACTIVE_MARKER_INTERACTION_MODES.MENU:
      case INTERACTIVE_MARKER_INTERACTION_MODES.BUTTON: {
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_AXIS: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XPT,
          DEFAULT_HANDLE_GROUP_NAME.XNT,
        ];
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
// these handles are currently commented out
        // because these overlap with the extra 6-DOF controls
        // that are available in the example and also in kompose
        // proper fix requires increasing the scale of the below
        // handles so that they don't overlap
        handles = [
          // DEFAULT_HANDLE_GROUP_NAME.XPT,
          // DEFAULT_HANDLE_GROUP_NAME.XNT,
          // DEFAULT_HANDLE_GROUP_NAME.YPT,
          // DEFAULT_HANDLE_GROUP_NAME.YNT,
          // DEFAULT_HANDLE_GROUP_NAME.ZPT,
          // DEFAULT_HANDLE_GROUP_NAME.ZNT,
          // DEFAULT_HANDLE_GROUP_NAME.XR,
          // DEFAULT_HANDLE_GROUP_NAME.YR,
          // DEFAULT_HANDLE_GROUP_NAME.ZR,
          DEFAULT_HANDLE_GROUP_NAME.PICK,
        ];
        break;
      }
    }

    handles.map(handle => {
      object.userData.handlesControlsMap[handle] = controlName;
    });
    controlsManager.showByNames(handles, true);
  }
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
DEFAULT_HANDLE_GROUP_NAME.PICK_PLANE_YZ,
        ];

        if (color !== undefined) {
          controlsManager.pickPlaneYZ.setColor(color);
          controlsManager.rotationX.setColor(color);
        }

        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XPT,
          DEFAULT_HANDLE_GROUP_NAME.XNT,
          DEFAULT_HANDLE_GROUP_NAME.YPT,
          DEFAULT_HANDLE_GROUP_NAME.YNT,
          DEFAULT_HANDLE_GROUP_NAME.ZPT,
          DEFAULT_HANDLE_GROUP_NAME.ZNT,
          DEFAULT_HANDLE_GROUP_NAME.PICK,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.ROTATE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XR,
          DEFAULT_HANDLE_GROUP_NAME.YR,
          DEFAULT_HANDLE_GROUP_NAME.ZR,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_ROTATE_3D: {
        // these handles are currently commented out
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XPT,
          DEFAULT_HANDLE_GROUP_NAME.XNT,
          DEFAULT_HANDLE_GROUP_NAME.YPT,
          DEFAULT_HANDLE_GROUP_NAME.YNT,
          DEFAULT_HANDLE_GROUP_NAME.ZPT,
          DEFAULT_HANDLE_GROUP_NAME.ZNT,
          DEFAULT_HANDLE_GROUP_NAME.PICK,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.ROTATE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XR,
          DEFAULT_HANDLE_GROUP_NAME.YR,
          DEFAULT_HANDLE_GROUP_NAME.ZR,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_ROTATE_3D: {
        // these handles are currently commented out
        // because these overlap with the extra 6-DOF controls
        // that are available in the example and also in kompose
        // proper fix requires increasing the scale of the below
        // handles so that they don't overlap
        handles = [
          // DEFAULT_HANDLE_GROUP_NAME.XPT,
          // DEFAULT_HANDLE_GROUP_NAME.XNT,
          // DEFAULT_HANDLE_GROUP_NAME.YPT,
          // DEFAULT_HANDLE_GROUP_NAME.YNT,
          // DEFAULT_HANDLE_GROUP_NAME.ZPT,
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
if (color !== undefined) {
          controlsManager.pickPlaneYZ.setColor(color);
          controlsManager.rotationX.setColor(color);
        }

        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XPT,
          DEFAULT_HANDLE_GROUP_NAME.XNT,
          DEFAULT_HANDLE_GROUP_NAME.YPT,
          DEFAULT_HANDLE_GROUP_NAME.YNT,
          DEFAULT_HANDLE_GROUP_NAME.ZPT,
          DEFAULT_HANDLE_GROUP_NAME.ZNT,
          DEFAULT_HANDLE_GROUP_NAME.PICK,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.ROTATE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XR,
          DEFAULT_HANDLE_GROUP_NAME.YR,
          DEFAULT_HANDLE_GROUP_NAME.ZR,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_ROTATE_3D: {
        // these handles are currently commented out
        // because these overlap with the extra 6-DOF controls
        // that are available in the example and also in kompose
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
];

        if (color !== undefined) {
          controlsManager.pickPlaneYZ.setColor(color);
          controlsManager.rotationX.setColor(color);
        }

        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XPT,
          DEFAULT_HANDLE_GROUP_NAME.XNT,
          DEFAULT_HANDLE_GROUP_NAME.YPT,
          DEFAULT_HANDLE_GROUP_NAME.YNT,
          DEFAULT_HANDLE_GROUP_NAME.ZPT,
          DEFAULT_HANDLE_GROUP_NAME.ZNT,
          DEFAULT_HANDLE_GROUP_NAME.PICK,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.ROTATE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XR,
          DEFAULT_HANDLE_GROUP_NAME.YR,
          DEFAULT_HANDLE_GROUP_NAME.ZR,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_ROTATE_3D: {
        // these handles are currently commented out
        // because these overlap with the extra 6-DOF controls
github rapyuta-robotics / amphion / src / utils / interactiveMarkerManager.js View on Github external
handles = [
          DEFAULT_HANDLE_GROUP_NAME.XPT,
          DEFAULT_HANDLE_GROUP_NAME.XNT,
          DEFAULT_HANDLE_GROUP_NAME.YPT,
          DEFAULT_HANDLE_GROUP_NAME.YNT,
          DEFAULT_HANDLE_GROUP_NAME.ZPT,
          DEFAULT_HANDLE_GROUP_NAME.ZNT,
          DEFAULT_HANDLE_GROUP_NAME.PICK,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.ROTATE_3D: {
        handles = [
          DEFAULT_HANDLE_GROUP_NAME.XR,
          DEFAULT_HANDLE_GROUP_NAME.YR,
          DEFAULT_HANDLE_GROUP_NAME.ZR,
        ];
        break;
      }
      case INTERACTIVE_MARKER_INTERACTION_MODES.MOVE_ROTATE_3D: {
        // these handles are currently commented out
        // because these overlap with the extra 6-DOF controls
        // that are available in the example and also in kompose
        // proper fix requires increasing the scale of the below
        // handles so that they don't overlap
        handles = [
          // DEFAULT_HANDLE_GROUP_NAME.XPT,
          // DEFAULT_HANDLE_GROUP_NAME.XNT,
          // DEFAULT_HANDLE_GROUP_NAME.YPT,
          // DEFAULT_HANDLE_GROUP_NAME.YNT,
          // DEFAULT_HANDLE_GROUP_NAME.ZPT,
          // DEFAULT_HANDLE_GROUP_NAME.ZNT,
github rapyuta-robotics / amphion / src / viz / InteractiveMarkers.js View on Github external
initFreeformControls() {
    const { camera, controls, renderer, scene } = this.viewer;
    this.freeformControls = new ControlsManager(camera, renderer.domElement);
    scene.add(this.freeformControls);

    this.freeformControls.listen(RAYCASTER_EVENTS.DRAG_START, () => {
      controls.enabled = false;
    });

    this.freeformControls.listen(RAYCASTER_EVENTS.DRAG, (object, handleName) =>
      this.debouncedPublish(object, handleName),
    );

    this.freeformControls.listen(
      RAYCASTER_EVENTS.DRAG_STOP,
      (object, handleName) => {
        this.debouncedPublish(object, handleName);
        controls.enabled = true;
      },