Move my camera to POI

🌵 Needle Engine
1

I want to create a marker at a POI. On clicking the marker I want the camera to move to that position. I couldnt see anything like this in the samples.

2

To create a marker at a Point of Interest (POI) and move the camera to that position when clicking the marker using Needle Engine with Three.js, you can use the existing components and functionality. Here’s how you can implement this:

Step-by-step Plan

  1. Create a Marker Object: This will represent your POI that the user can click on.

  2. Set Up Camera Movement: Utilize the OrbitControls to adjust the camera position smoothly toward the POI.

  3. Handle Click Event: Attach a click event handler to the marker that triggers the camera movement when clicked.

  4. Animate Camera Movement: Use interpolation (lerping) to animate the camera’s movement to the target position.

Pseudocode

  1. Create an Object3D for the marker at the desired POI position.
  2. Add a click event listener to the marker.
  3. Define a function to interpolate the camera position from its current location to the marker’s position.
  4. Utilize existing OrbitControls methods to smoothly move and rotate the camera to look at the marker.

Sample Implementation

import { Object3D, Vector3, Raycaster, Camera, Scene } from 'three';
import { OrbitControls } from '@needle-tools/engine';
import { NEPointerEvent } from '../engine/engine_input';

class MoveCameraToPoi {
  private scene: Scene;
  private camera: Camera;
  private controls: OrbitControls;
  private marker: Object3D;
  private raycaster: Raycaster;

  constructor(scene: Scene, camera: Camera, controls: OrbitControls) {
    this.scene = scene;
    this.camera = camera;
    this.controls = controls;
    this.raycaster = new Raycaster();
    this.createMarker();
    this.addPointerClickListener();
  }

  createMarker() {
    this.marker = new Object3D();
    // Set position to POI
    this.marker.position.set(0, 0, 5);  // Example position
    this.scene.add(this.marker);
  }

  addPointerClickListener() {
    // Assuming the engine has a way to intercept pointer events, equivalent to IPointerClickHandler in Unity
    this.marker.addEventListener('click', (event: NEPointerEvent) => {
      this.moveCameraToMarker();
    });
  }

  moveCameraToMarker() {
    const targetPosition = this.marker.position.clone();
    const duration = 1;  // Duration of the camera move in seconds
    this.controls.setCameraTargetPosition(targetPosition, duration);
  }
}

// Usage
const cameraController = new MoveCameraToPoi(scene, camera, new OrbitControls(camera, renderer.domElement));

Tips

  • Make sure your OrbitControls are properly configured and updated.
  • Consider the duration and lerp technique for smoother transitions (see the documentation).

By following these steps, you’ll create an interactive marker that moves the camera to a POI when clicked.

24 replies left
thread_Y3fAk5OZzjz7SfM192rizLbD
Reply to this message to continue the conversation