`dynamicAnchor` anchoring with no object hit

[ShaMan123]

Description 📝

I want dynamicAnchor to set the orbit point always, not only if there is a direct hit to an object.
Currently UX is ambiguous: orbiting around an object if hit or around the center of the viewport if not.

Suggested solution 💡

I am not sure how to achieve this, I expect depth to be correct somehow.
Perhaps the nearest object to the pointer (calculated by projecting objects to 2D) can provide the correct depth?
Or the N nearest objects can form a sphere, its centroid being the desired orbit center?

Alternative ⛕

No response

Additional context ☝️

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

[ShaMan123]

Perhaps depth can be settled simply by getting the depth value of the object that is closest to the camera

[agviegas]

Good call, that ambiguity is real. Right now the anchor only moves when the click lands on geometry: onPointerDown does a castRay, and over empty space it returns nothing, so the orbit point is just left where it was.

For the miss case you don't really need the nearest-object search or a centroid of N objects. Those add cost and heuristics for something that has a simpler deterministic answer: intersect the pointer ray with a plane through the current orbit target, facing the camera. That keeps the depth at the distance you're already focused on and just slides the anchor sideways to under the cursor. It always yields a point, it's cheap, and it feels predictable because the orbit radius doesn't jump when you drift off an object.

The nearest-object-depth idea works too, but it makes the orbit distance snap around as you move over gaps between objects, which tends to feel worse in practice than holding the current focus depth.

So the shape would be: in SimpleWorld's dynamic-anchor pointer handler, when castRay misses, fall back to the raycaster.mouse ray against a plane at controls.getTarget() with the camera's forward as the normal, and setOrbitPoint to that. Happy to take a PR along those lines if you want to have a go, otherwise we'll fold it in.

[ShaMan123]

Please do - I do not have the required knowledge.
For posterity - this is what I tried.

  private onPointerDown = (event: PointerEvent) => {
    if (!this.camera.hasCameraControls()) {
      throw new Error(
        "World: can't set dynamic anchor if the camera doesn't have controls.",
      );
    }

    if (event.button !== 0) return;

    const position = this.getPointerPosition(event);
    if (!position) return;

    const caster = this.components.get(Raycasters).get(this);

    // Anchor immediately on the plane that goes through the current orbit
    // target and faces the camera. That plane is always hit, so the anchor
    // follows the pointer even over empty space, and holding the current focus
    // depth keeps the orbit radius stable instead of snapping around as the
    // pointer crosses gaps between objects.
    const planePoint = this.getPlaneAnchor(caster, position);
    if (planePoint) {
      this.camera.controls.setOrbitPoint(
        planePoint.x,
        planePoint.y,
        planePoint.z,
      );
    }

    // Then refine to the real geometry depth once the (asynchronous) pick
    // resolves. Both points sit on the same pointer ray and setOrbitPoint
    // preserves the rendered image, so this only corrects the depth.
    const requestId = ++this._anchorRequestId;
    caster.castRay({ position }).then((result) => {
      const isStale = requestId !== this._anchorRequestId;
      if (isStale || this.isDisposing || !this._dynamicAnchor) return;
      if (!result?.point || !this.camera.hasCameraControls()) return;
      const { x, y, z } = result.point;
      this.camera.controls.setOrbitPoint(x, y, z);
    });
  };

  /**
   * The pointer position in normalized device coordinates. This is derived from
   * the event instead of the raycaster's mouse because that one only tracks
   * pointermove and touchstart, so on a pointerdown with no previous move it
   * would still report the center of the viewport.
   */
  private getPointerPosition(event: PointerEvent) {
    const dom = this.renderer?.three.domElement;
    if (!dom) return null;
    const bounds = dom.getBoundingClientRect();
    return new THREE.Vector2(
      ((event.clientX - bounds.left) / (bounds.right - bounds.left)) * 2 - 1,
      -((event.clientY - bounds.top) / (bounds.bottom - bounds.top)) * 2 + 1,
    );
  }

  /**
   * The point where the pointer ray crosses the plane that contains the current
   * orbit target and faces the camera. Used as the anchor when the pointer
   * doesn't land on any geometry.
   */
  private getPlaneAnchor(caster: SimpleRaycaster, position: THREE.Vector2) {
    if (!this.camera.hasCameraControls()) return null;
    const camera = this.camera.three as
      | THREE.PerspectiveCamera
      | THREE.OrthographicCamera;
    caster.three.setFromCamera(position, camera);
    const target = this.camera.controls.getTarget(new THREE.Vector3());
    const normal = camera.getWorldDirection(new THREE.Vector3());
    const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(
      normal,
      target,
    );
    // The ray points into the frustum, so it can never be parallel to a plane
    // whose normal is the camera direction, but intersectPlane is nullable.
    return caster.three.ray.intersectPlane(plane, new THREE.Vector3());
  }

[agviegas]

Done, thanks for the reference implementation, we took your approach almost as-is.

dynamicAnchor now anchors on every left-press, not just when the press lands on geometry. On a press it first sets the orbit point on the plane through the current orbit target facing the camera (always hit, so it follows the cursor over empty space and holds your focus depth so the radius doesn't snap), then refines to the real surface depth once the async pick resolves if you did hit something. It also reads the pointer position from the event rather than the raycaster's mouse, so a bare pointerdown with no prior move anchors correctly.

Verified in the Worlds example: pressing over the model still anchors on the surface, and pressing over empty space now anchors under the cursor instead of leaving the pivot behind.

Ships in the next release, credited to you. Let us know if the empty-space feel isn't what you wanted.