Attaching Camera or Object Movement to Mouse Movement

🌵 Needle Engine
1

Could someone point me in the right direction regarding attaching camera or object movement to mouse movement. Would be greatly appreciated.

Original Post on Discord

by user 878313072312332348

2

Look for the OrbitControls script on the camera in the Needle Samples if that’s what you need

by user 103054507105067008

3

thanks for this - and how would i make an object follow the mouse movement.

by user 878313072312332348

4

Along a plane on the floor? There is a draggable example in the Collaborative Scene example scene in Needle Engine > Samples

by user 103054507105067008

5

by user 103054507105067008

6

thanks great examples, but what i am after is camera control based on mouse movement (without clicking) - same with objects, any suggestions.

by user 878313072312332348

7

You could use the code from whatever is inside draggable and put it on a mouse move listener

by user 300386587278049291

8

or just remove the click requirement within orbit controls so it’s always listening for mouse position without needing the mouse down event

by user 300386587278049291

9

(disclaimer: I haven’t looked at the code, just learning things around here myself :smile: )

by user 300386587278049291

10

thanks let me give that a shot

by user 878313072312332348

11

You can get clicks on objects by implementing IPointerClickHandler for example and then add a onPointerClick() { } function

12

for example:

import { Behaviour } from "@needle-tools/engine";
import { IPointerClickHandler } from "@needle-tools/engine/engine-components/ui/PointerEvents";


export class ReceiveClick extends Behaviour implements IPointerClickHandler {

    onPointerClick() {
        console.log("CLICK", this.name);
    }

}
13

There are more of them available:

export interface IPointerDownHandler {
    onPointerDown?(args: PointerEventData);
}

export interface IPointerUpHandler {
    onPointerUp?(args: PointerEventData);
}

export interface IPointerEnterHandler {
    onPointerEnter?(args: PointerEventData);
}

export interface IPointerExitHandler {
    onPointerExit?(args: PointerEventData);
}

export interface IPointerClickHandler {
    onPointerClick?(args: PointerEventData);
}

For it to work you just need an ObjectRaycaster component in the hierarchy above your object