Multiple objects placements in AR Scene

🌵 Needle Engine
1

Hello,
i want to be able to add multiple objects on tap or using UI.
So basically, place an object in AR scene, keep it then add another next to it or in another place in the same AR Scene.
add as much as i want Location based webAR.
can i do that in unity with needle?

2

Hi Astuce, yes, you can absolutely place multiple objects dynamically in your AR scene using Needle Engine with Unity. The approach involves writing a Needle Engine component that listens for tap events (via IPointerClickHandler) or accepts UI calls. When an event occurs, you can clone your reference prefab (an Object3D) and add it to your AR scene’s hierarchy so it remains in place even after new objects are placed.

Below is a simple example illustrating the concept:

Plan:
• Import the required classes from “@needle-tools/engine” and “three”.
• Create a component (e.g., ARObjectSpawner) that implements IPointerClickHandler for tap events.
• Define a serializable field for a prefab (Object3D) of your content.
• In the onPointerClick method, clone the prefab, position it (using event data or a default position), and add it to the scene.
• Include a public method for UI-triggered object placements that accepts a position.

The code sample demonstrates how you can support both input types:

import { Behaviour, serializable, IPointerClickHandler, PointerEventData } from "@needle-tools/engine";
import { Object3D, Vector3 } from "three";

export class ARObjectSpawner extends Behaviour implements IPointerClickHandler {
    // Assign your prefab in the Unity Inspector
    @serializable(Object3D)
    public objectPrefab: Object3D | null = null;

    // Called on tap/click events in the AR scene
    onPointerClick(event: PointerEventData): void {
        if (!this.objectPrefab) return;
        // Clone the prefab instance
        const newObject = this.objectPrefab.clone();
        // Optionally, if the event contains a world position (for example, using a raycast hit point), use it:
        const targetPos = (event as any).hitPoint || new Vector3(0, 0, 0);
        newObject.position.copy(targetPos);
        // Add the new object as a child to this gameObject to keep it in the scene
        this.gameObject.add(newObject);
    }
    
    // Method to allow UI button to place an object at a given position
    public placeObjectAtPosition(position: Vector3): void {
        if (!this.objectPrefab) return;
        const newObject = this.objectPrefab.clone();
        newObject.position.copy(position);
        this.gameObject.add(newObject);
    }
}

To integrate this:
• Attach the ARObjectSpawner component to a game object that is part of your AR scene.
• Make sure to add an ObjectRaycaster to your scene hierarchy for pointer events (see the ClickExample sample in the Needle Engine docs ).
• For UI, simply call the placeObjectAtPosition method with your chosen coordinates.

This setup allows you to place as many objects as you need, creating a dynamic, location-based webAR experience with Needle Engine in Unity. Let me know if you need more details!

1 replies left - Become PRO for more replies.
thread_0gTZ6NG0qYXtmiYAalLdUzSp
Reply to this post directly if you need further help (bottom right button)