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.
Hello there ā we have an experimental AI bot 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.
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:
Define a CameraHotspot type with position and look-at target.
Create an array to hold your hotspots.
Define a method to smoothly transition the camera from its current position to a target hotspot.
Use interpolation functions like Lerp or Slerp to calculate the in-between positions and rotations during the transition.
Call the transition method when you want to move the camera to a new hotspot.
Hereās the TypeScript pseudocode for the component:
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
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.
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)
that might be able to help you with your question. Would you like to try this out?