Menu button interface Settings

Hello, How to change the position of the buttons in this interface, for example, when there are only two buttons, I want the buttons to be distributed at the bottom of the screen. (Or how can I get layout information so that when I use the Unity button I can align it with the needle button)


In addition, how to change the name of the button? Is it a code change to find the button in workspace? I see that the button code seems to be linked to several codes, and I’m not sure which one

Hi Josh! I’m an AI-powered assistant here to help you with questions about Needle Engine, three.js, and basic Unity or Blender support. Please reply with your question, along with your OS, Needle Engine version, and Unity or Blender version (if applicable) so I can assist you better!

2 replies left - GPT 4O
thread_PicVaBl80RHxZ5YHYUl8cQvu
Reply to this message to continue the conversation

Hey :wave: You seem to be using older Needle version, make sure to update if you want the latest behavior.


You can add your own buttons to the needle menu quite easily :slight_smile: Have you considered that? Will that work for you case?

this.context.menu.appendChild({
  label: 'My button',
  icon: 'public',
  onClick: function () {
    console.log("Button clicked");
  }
});

You can find the strings for the icons here:
Material Symbols and Icons - Google Fonts
Select an icon and then scroll down to the “Icon name”, copy that.


If you want to observe if the needle menu gets collapsed or unpacked, you can observe this class right here:

this.context.menu

Lastly, can you share more about your use case? :cactus:

Yes, I want to bring Unity’s button directly into the Needle menu, can you tell me where this code is located? I can’t seem to find it, and how does this example you wrote work? Can you give me a small example?For example, write a button in unity but add the Needle menu,thank you a lot!

18
19
For example, the two user interfaces, one is the needle button and the other is the unity button, I would like to use the same format, either needle or unity ui, but some of the needle functions (such as the front and back pages) are already built in, so I can access them directly

In your script, writing this.contex allows you to access needle specific systems.
this.context.menu is refering to the needle menu. There you have the function appendChild that accepts HTML elements OR a data representation of a button.

So here is the full example how to add a button. Add this to a start function for example.

this.context.menu.appendChild({
  label: 'My button',
  icon: 'public',
  onClick: function () {
    console.log("Button clicked");
  }
});

I’m unsure if understand correctly. If you wish to have all buttons in NeedleMenu, you can do that with the snipped above.

Otherwise, you can call all respective functions from unity ui as well, but you will need to hide and show certain buttons based on platform/feature support.

You can check the Custom XR buttons sample for that.

Let me know if you have further questions :cactus:

import { Behaviour, Rigidbody, serializable } from “@needle-tools/engine”;
import { Vector3, Euler } from “three”;

export class ResetPosition4 extends Behaviour {

@serializable()
resetPosition: boolean = true;

@serializable()
resetRotation: boolean = false;

@serializable()
resetVelocity: boolean = false;

private pos: Vector3 = new Vector3();
private rot: Euler = new Euler();
private rb: Rigidbody | null = null;

start() {
   
    this.pos.copy(this.gameObject.position);
    this.rot.copy(this.gameObject.rotation);
    this.rb = this.gameObject.getComponent(Rigidbody);
    this.context.menu.appendChild({
        label: 'Reset Object',  
        icon: 'reset',  
        onClick: () => {
            this.reset();  
        }
    });
}


public reset() {
    if (this.resetPosition) {
        this.gameObject.position.copy(this.pos);
    }

    if (this.resetRotation) {
        this.gameObject.rotation.copy(this.rot);
    }

    if (this.rb && this.resetVelocity) {
        this.rb.resetVelocities();
    }
}

}

Is this the correct way to code the reset button?


21
22
I also tried to test with the simplest button function, and attached the code to the menu, but the web page is still not seen

Hey :wave: it would be good to not name your class Button since there’s already a class called Button. Rename it to MyButton or something else unique and try again.

If that doesn’t work, then please see if you have any errors or warns in the unity console and the browser console.

Let me know if you have any further questions :cactus:


I changed the class callded MyButton, not working, this is error in browser related to menu-button

Hi Josh, the screenshot is not readable and shows seemingly unrelated information. It just shows some of your browser extension logs and the link to this forum entry.

Please show the logs of your website and perhaps log in the Unity console.