Press on screen to position 3D object Quicklook

🌵 Needle Engine
1

Hello, I have one question.
Is it possible to place a 3D object by tapping the screen in Quicklook similar to how it works on Android?

2

Yes, Tomislav Štefan, it is possible to place a 3D object by tapping the screen using Needle Engine with Quicklook capability, similar to how it’s done on Android. The relevant methods and components would typically involve:

  1. Pointer Handling: Capture touch or pointer events to detect screen taps.
  2. Raycasting: Use raycasting from the screen tap position to determine where in the 3D world to position the object. This involves using the camera’s perspective to project a ray into the scene.
  3. Object Placement: Move the 3D object to the intersection point found by the raycast.

Here is a brief code plan:

  • Initialize Pointer Handling: Implement onPointerClick to handle screen touches.
  • Perform Raycasting: Use a raycaster to translate the screen coordinates to a point in the 3D space.
  • Place Object: Update the 3D object’s position.
import { Vector3, Raycaster } from "three";
import { Behaviour, PointerEventData } from "@needle-tools/engine";

export class PlaceObjectOnTap extends Behaviour {

    object: Object3D; // The 3D object to be placed
    raycaster = new Raycaster();

    onPointerClick(event: PointerEventData) {
        const mouse = new Vector3();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        this.raycaster.setFromCamera(mouse, this.context.camera); // assumes 'context.camera' is the active camera
        const intersects = this.raycaster.intersectObjects(this.context.scene.children);

        if (intersects.length > 0) {
            this.object.position.copy(intersects[0].point);
        }
    }
}

Ensure you have the necessary components set up in your Needle Engine project such as input handling and active camera context (see the documentation) (see the documentation).

For more detailed examples and options, you might want to explore the Needle Engine documentation or the samples repository.

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

3

I have tried this and nothing happens in iOS when I touch screen, also if I move phone it places object automaticaly, I don’t want that.
Is there example how to do this?

I have placed script on MyScene object.

4

Hi,

you need to utilize EverywhereActions for this. Sorry the bot’s reply above is not correct.

If you haven’t already I’d highly recommend you read through the docs here: Everywhere Actions | Needle Engine Documentation

We have an API that allows you to create your own action:

You can also look at the source code for the builtin actions when you click on the blue link icon at the top of the eveywhere actions components:

image
image367×342 21.2 KB

image
image468×167 19.6 KB

Additional Links:

ActionBuilder API:

Here are samples for builtin actions:

5

Thanks, and how do I place an object in Quicklook with EverywhereActions, I don’t want Quicklook to place an object automatically.

6

You could hide all the objects at the start of the scene (also using Everywhere Actions / using the api as mentioned above).

Maybe this sample helps you: Voxel Editor | Needle Engine

7

I have one question about a feature we often need.
In the future will it be possible to have video playing in AR, we got a lot of inquiries from clients about that.

8

There are ways to achieve that - I think you’re mainly asking about Quicklook since video in AR works fine on Android. Would you mind creating a feature request on Needle Roadmap with a description of your usecase?

9

Yes, Quicklook is the problem.

1 Like