Switch camera position between hotspots

Hello Needle,

I saw his great scene in the post by Simeon | blendFX on 7.11.23 called “Hotspot improvements/bug”: Minimal.

I’m now wondering how to make the camera move from hotspot to hotspot?
In Unity I would have done this with the Cinemachine, but since I’m a Typescript beginner, I’m having a hard time coming up with the solution.

They don’t have to be hotspots like those from the Hotspots Sample Scene. Normal World Space UI would be good enough for me.

I would really appreciate any tips!

Original Post on Discord

by user 344207471457337345

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

Here is what I found for you :brain: Discord

Hello TomAir,

To create a camera movement from one hotspot to another in Needle Engine using TypeScript, you can animate the camera’s position and look-at target between the hotspots. I’ll outline a simple component that you can attach to a camera to achieve this:

  1. Define a CameraHotspot type with position and look-at target.
  2. Create an array to hold your hotspots.
  3. Define a method to smoothly transition the camera from its current position to a target hotspot.
  4. Use interpolation functions like Lerp or Slerp to calculate the in-between positions and rotations during the transition.
  5. Call the transition method when you want to move the camera to a new hotspot.

Here’s the TypeScript pseudocode for the component:

*thread_esMa81XFdiMN7JAvEWReCd5o*

typescript
import { Vector3, Quaternion } from “three”;
import { Behaviour, serializable, AssetReference } from “@needle-tools/engine”;
import { UIComponent } from “./path-to-your-ui-component”; // Adjust the import path to your World Space UI component script

export class CameraHotspotBehaviour extends Behaviour {
@serializable(AssetReference)
private hotspots: AssetReference; // Assuming you have pre-declared AssetReferences to your hotspots in the editor

private currentHotspotIndex: number = 0;
private isMoving: boolean = false;

update(deltaTime: number) {
    if (this.isMoving) {
        this.moveCamera(deltaTime);
    }
}

moveToNextHotspot() {
    this.currentHotspotIndex++;
    if (this.currentHotspotIndex >= this.hotspots.length) {
        this.currentHotspotIndex = 0;
    }
    this.startMoving();
}

startMoving() {
    // Set isMoving to true when you start the movement
    this.isMoving = true;
}

moveCamera(deltaTime: number) {
    let targetHotspot = this.hotspots[this.currentHotspotIndex].instantiate();
    // Perform your Lerp/Slerp logic here to smoothly move to the targetHotspot's position
    // and adjust camera's look-at direction.
    // Once reached, stop moving by setting isMoving to false
}

// Implement your UI interaction logic here to trigger moveToNextHotspot when required

}

*thread_esMa81XFdiMN7JAvEWReCd5o*

In this example, you have to replace path-to-your-ui-component with the actual path to your World Space UI component script and implement LERP/SLERP logic within the moveCamera function. This simplistic component gives you a starting point. You can expand upon it by using tweens or more complex animation systems for smoother transitions and better control over the camera motion. Also consider attaching this script to your camera and invoking the moveToNextHotspot method through UI interactions to move the camera between your hotspots.

Remember to check the Needle Engine documentation for more details on component creation and script usage.

4 messages left GPT 4
thread_esMa81XFdiMN7JAvEWReCd5o

One no code solution would be a scene with worldspace buttons and on button click (assigned via Unity events) you call setCameraTargetAndLookAt on the Orbitcontrols component and give it a transform from which it should look (with z being the look direction)

Thank you very much! I will try that.

by user 344207471457337345

Thats the thread you mean right? Discord

It was this thread: Discord But this one is also very interesting! Thank you! I will also have a look at the Spatial Audio Samplescene.

by user 344207471457337345