Interactive ViewHelper

Questions
1

Hi,

I added ViewHelper to my scene. Is it possible to change the camera position when clicking on an axis, as in the editor?

Captura de pantalla 2022-12-27 a les 0.45.50

Thanks,

TC

1 Like
2

Have you tried this plugin

3

Here is the enhanced fiddle from Implementing viewHelper to the project that makes the helper interactive like in the editor: Interactive view helper. - JSFiddle - Code Playground

I hope we can refactor the helper slightly so the integration of an interactive helper becomes a bit easier.

1 Like
4

Thank you! I’m trying to adapt. This code works when your canvas is full-width, but I have sidebars and it not working! :slight_smile: I will try to solve it and I will let you know the solution!

Thanks,

5

I gave it a shot and the result (codesandbox) look promising, I improved the integration, it require less code now, encapsulated most of the outside variables, you only need to call helper.render() or helper.update() in the animation loop, also added some hover effects for the points and the background sphere.

But I’m not there yet, I’m having some problems with the gizmo rotation, it’s completely off, the x and y axes seems to be switched.

     // Line 118
      this.rotation.y = rotationStart.y + mouseDelta.x;
      this.rotation.x = rotationStart.x + mouseDelta.y;

I can’t extract the camera position/rotation from the gizmo, first I tried with quaternions, got a mirrored rotation also tried to invert it, everything went sideways, now I’m using a dummyGimbal with a dummyCamera (null Object3Ds) to emulate the camera position/rotation, I’m getting the same mirrored effect at best.

I also need to add a clamp on the Y axis, just like the OrbitControls so the camera don’t get flipped, and finally rewrite everything with the Mrdoob's code style TM

1 Like
6

Hi

Thanks @Fennec, for sharing! :slight_smile: I’m trying to implement it! Looks easier to implement. I’m having some painting problems. It is confusing for me, because you are creating a Object3D (viewhelper) but I didn’t see when you add it! :slight_smile: I will keep investigating!

Thanks

TC

1 Like
7

maybe you can compare notes with this implementation. it can deal with any control (orbit, trackball, arcball, …), as well as damping.

8

With r149 the integration will be a bit easier since the helper works now with any controls. More information at GitHub:

1 Like
9

This is the closest I could get “codesandbox”, I’m trying to rotate the camera from the gizmo it self, without relaying on the orbitControls or any controls.

I’m stuck here at the drag method, I just can’t get it right.

onPointerDown(e) {
    const drag = (e) => {
      if (!this.dragging && isClick(e, mouseStart)) return;
      if (!this.dragging) {
        resetSpritesColor(this.spritePoints);
        this.dragging = true;
      }

      mouseAngle
        .set(e.clientX, e.clientY)
        .sub(mouseStart)
        .multiplyScalar((1 / this.domRect.width) * Math.PI);

      this.rotation.x = clamp(
        rotationStart.x + mouseAngle.y,
        Math.PI / -2 + 0.001,
        Math.PI / 2 - 0.001
      );
      this.rotation.y = rotationStart.y + mouseAngle.x;
      this.updateMatrixWorld();

      virtualSphere.quaternion.copy(this.quaternion).invert();

      virtualSphere.updateMatrixWorld();
      virtualCamera.updateMatrixWorld();

      virtualCamera.getWorldPosition(this.camera.position);
      this.camera.lookAt(this.center);

      this.update(false);
    };
    const endDrag = () => {
      document.removeEventListener("pointermove", drag, false);
      document.removeEventListener("pointerup", endDrag, false);

      if (!this.dragging) {
        this.handleClick(e);
        return;
      }

      this.update();
      this.dragging = false;
    };

    if (this.animating === true) return;
    e.preventDefault();

    mouseStart.set(e.clientX, e.clientY);

    virtualCamera.position.copy(this.camera.position);
    const rotationStart = euler.copy(this.rotation);

    document.addEventListener("pointermove", drag, false);
    document.addEventListener("pointerup", endDrag, false);
  }

Here is the github repo where you can run it with vite and typescript

I’m gonna step back at the moment, I’ll revise it in year or so :stuck_out_tongue:, in the mean while happy new year everyone :partying_face: :tada:

10

It is done … It’s perfectly working now, a standalone and fully interactive version of the viewHelper, you can run it with or without the orbitControls or trackballcontrols.

Here is the demo, also updated the github repo

@Mugen87, please tell me what you think and if I should commit a ThreeJS version, thanks.

1 Like