Need guidance for Everywhere Action

🌵 Needle Engine
1

Hi there! I’m new to Needle Engine. I’ve created a small town model in Blender. Now I want to add:

(Sorry for my English - it’s not my first language.)
Should I add these using Three.js? or Blender? or Unity?

My goal is to put this town model in AR where people can click on buildings to see animations. Something like the example in this link Everywhere Actions | Needle Engine Documentation

Any help to point me to correct path is highly appericiated. Thank you in advance to all discord members.

2

Hello Basiir Zulkifle,

Welcome to Needle Engine! To achieve the functionality you described, you’d be working primarily within Needle Engine, leveraging Three.js functionality for rendering and interaction in your AR application.

Here’s a step-by-step plan:

  1. Model Preparation:

    • Make sure your town model from Blender is exported in a compatible format (e.g., glTF or GLB) for Needle Engine.

  2. Setup Hotspots:

    • For each building, set up interactive hotspots using Plane or any geometry as a clickable area. You can create invisible clickable bounds in your scene.

  3. Popup Information:

    • When a hotspot is clicked, show a popup with information about the building. You can create a UI element (like a div or canvas overlay) that becomes visible upon clicking a hotspot.

  4. Text Buttons:

    • Create buttons within the popup to trigger actions or animations (like playing a specific animation of that building).

  5. Integration:

    • Use Needle Engine components and behaviors to bind the interactions and actions together. You would use the “Everywhere Actions” concept to configure your clickable elements.

Here’s a simplified pseudocode structure:

import { Hotspot, Popup, Button } from "@needle-tools/engine";

// Assuming you have a town loaded as 'townModel'
const townModel = loadTownModel();

// For each building in the model
townModel.buildings.forEach(building => {
    const hotspot = new Hotspot(building.position);
    
    hotspot.onClick(() => {
        const popup = new Popup(building.info);
        popup.show();
        
        // Add buttons to the popup
        const button = new Button('See Animation');
        button.onClick(() => {
            playAnimation(building.animation);
        });
        popup.addButton(button);
    });
});

To summarize:

  1. Use Needle Engine for the features you want (not Blender or Unity).
  2. Create hotspots for interactivity.
  3. Implement popups and buttons for information and actions.

For more detailed implementation, check the examples in the Needle Engine documentation.

If you need help with specific code implementations or have more details, feel free to ask!

1 replies left - Get a PRO license for more AI replies.
thread_FVPRubePcJRETxqsjsUHlToP
Reply to this message to continue the conversation

3

I am sorry. But I am a little bit lost after step 2. Do I need to add in the “Plane” inside blender for each building and export again?

4

Hello Basiir Zulkifle,

You don’t necessarily need to create planes for hotspots in Blender. Instead, you can do it directly in Needle Engine after you’ve imported your town model. Here’s how to proceed:

  1. Model Export:

    • First, export your town model from Blender without adding any planes. Use a format like glTF or GLB.

  2. Add Hotspots in Needle Engine:

    • After importing your town model into Needle Engine, create hotspots programmatically in your JavaScript code. You can define the position of each hotspot in relation to the buildings.

  3. Hotspot Creation Example:

    • You can add the hotspots in your scene by specifying their positions, which correspond to the locations of each building. This way, you keep your Blender model simple and lightweight.

Here’s an example of how to create a hotspot after importing your model:

import { Hotspot } from "@needle-tools/engine";

const townModel = loadTownModel(); // Function to load your town

const buildings = [
    { position: new THREE.Vector3(x1, y1, z1), info: 'Info about building 1', animation: 'anim1' },
    { position: new THREE.Vector3(x2, y2, z2), info: 'Info about building 2', animation: 'anim2' },
    // Add more buildings as needed
];

buildings.forEach(building => {
    const hotspot = new Hotspot(building.position);
    
    hotspot.onClick(() => {
        const popup = new Popup(building.info);
        popup.show();
        
        const button = new Button('See Animation');
        button.onClick(() => {
            playAnimation(building.animation);
        });
        popup.addButton(button);
    });
});

This way, you keep your Blender model clean and manage interactivity directly in Needle Engine.

Let me know if you need further clarification or assistance!

0 replies left - Get a PRO license for more AI replies.
thread_FVPRubePcJRETxqsjsUHlToP
Reply to this message to continue the conversation

5

Alright. I will try that. Do I need PRO Version to use this Needle Engine as Web Component? By the way, in my blender. I do not use Needle Engine Add On. Should I use that? Because right now my model is around 5mb after compression with third party. The model can be open in GLTF Report website and Google Model Viewer website. Sorry for asking such newbie question.

6

Hi dhbasiirzulkifle, I’m sorry but I can’t help you right now. You have reached the maximum number of replies. :books:. Please try again later or get a PRO license for more AI help.
**

7

Hi, you can use the web component with a free version as well.

What are you using for compression and what’s the size of your model? With our compression you can get up to 90% size reduction with our LOD generation for meshes and textures.

You can also use https://cloud.needle.tools with your uncompressed model to get the optimized version and also a direct link that you can then load in <needle-engine src="..."></needle-engine>