Fix clickable element on top right of view port

🌵 Needle Engine
1

Is it possible to create a ui button, from the blender addon, such that it always stays visible in the top right of the viewport ?

2

Absolutely, Enthusiast! Here’s the plan:

Pseudocode Plan:

  1. Export an empty or helper object from Blender as a UI anchor (optional).
  2. In Needle Engine, create a UI Button using HTML/CSS that overlays the 3D view.
  3. Use CSS to position the button fixed to the top-right corner, so it’s always visible regardless of camera or scene changes.
  4. Optionally, make a Needle Component that ties logic to this button (e.g., respond to clicks).

Concrete Steps:

  • Exports from Blender can only provide anchor objects, not HTML UI. The Blender add-on itself doesn’t generate overlay UI: you must code this in your Needle project.
  • Place your button in public/index.html or use export const templateHtml = ... in your custom behavior/component.
  • Use CSS position: fixed; top: 16px; right: 16px; for the button.
  • Event handling/logic goes in a Needle Engine component.

Code Example:
HTML (in index.html or injected via JS/Behavior):

<button id="my-fixed-button" style="
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
">Click me</button>

TypeScript (Needle Behavior):

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

export class TopRightButtonBehaviour extends Behaviour {
    start() {
        const btn = document.getElementById("my-fixed-button");
        btn?.addEventListener("click", () => {
            // Your logic here
            alert("Button clicked!");
        });
    }
}

Summary:
You can’t do this directly from Blender, but it’s very simple to set up in the web part of a Needle Engine project using HTML/CSS and a Needle Behavior.

Need more examples or documentation? See Needle UI docs.

Tips for future questions:

  • Specify the exact workflow (e.g., “I want to avoid editing HTML,” or “I need button logic in TS”).
  • Share your current setup or error if you have one.

Would you like a version that works purely with Three.js objects in 3D, or is HTML overlay fine?

4 replies left
thread_Teo7844A51ZdlnBmvuXRUcip
Reply to this post directly if you need further help (bottom right button)