How to create a basic UI button in three-mesh-ui?

Use the Block class for the container and Text for the label, then add interactivity handlers. The README's API example shows a simple setup with padding and font configuration for buttons.

three-mesh-ui vs using HTML panels in VR – which is better?

three-mesh-ui is better for native 3D integration in immersive VR, as HTML panels are limited to 2D overlays and can't be part of the 3D scene. For seamless VR experiences, three-mesh-ui avoids HTML/CSS limitations.

Can I use three-mesh-ui with React Three Fiber?

Yes, the README provides a codesandbox demo for integration with React Three Fiber, allowing you to incorporate it into React-based Three.js projects without issues.

What fonts does three-mesh-ui support?

It supports custom MSDF font files only. You can use the provided Roboto files or create your own using tools like MSDF font generators, as detailed in the wiki for font creation.

Is three-mesh-ui suitable for augmented reality (AR) projects?

While primarily designed for VR, it can be used in AR if you need 3D UI elements in a Three.js scene, but it lacks AR-specific features like plane detection or occlusion handling.

How to update UI elements dynamically in three-mesh-ui?

Call ThreeMeshUI.update() in the render loop to refresh the UI. Changes to properties like content or style will be reflected after this update, as shown in the quick start example.

Open-Awesome

three-mesh-ui

MITJavaScriptv6.5.4

A lightweight library for creating VR user interfaces as Three.js Object3Ds, enabling immersive UI directly in 3D scenes.

Visit Website GitHub

1.5k stars154 forks0 contributors

What is three-mesh-ui?

three-mesh-ui is a library for creating user interfaces in virtual reality environments using Three.js. It solves the problem of building UI in immersive VR where HTML/CSS cannot be used by generating UI elements as Three.js Object3Ds that integrate directly into 3D scenes.

Target Audience

Three.js developers building VR applications who need to add interactive user interfaces within their 3D scenes.

Value Proposition

It provides a native Three.js solution for VR UI, avoiding the limitations of HTML/CSS in immersive environments while keeping the library lightweight and framework-free.

Overview

⏹ Make VR user interfaces for Three.js

Use Cases

Best For

Building interactive menus and HUDs for WebXR experiences
Creating VR applications with Three.js that require in-scene UI
Developing immersive VR interfaces where HTML/CSS is not an option
Adding buttons, keyboards, and text blocks to Three.js VR scenes
Prototyping VR user interfaces quickly with Three.js integration
Creating nested and flexible UI layouts within 3D environments

Not Ideal For

Projects building 2D web or mobile interfaces without VR components
Teams that rely heavily on HTML/CSS for rapid UI prototyping and styling
Applications requiring a vast library of pre-designed, out-of-the-box UI components like datagrids or complex forms
Projects where minimizing dependencies is critical, as it requires Three.js and custom font files

Pros & Cons

Pros

VR-Optimized UI

Specifically designed for immersive VR where HTML/CSS fails, enabling direct integration into 3D scenes without workarounds, as highlighted in the README's philosophy.

Native Three.js Objects

Outputs Three.js Object3D instances, making it seamless to add UI elements to any Three.js scene, with no compatibility layers needed.

Minimalist and Lightweight

Has no dependencies beyond Three.js, keeping the library small and focused, which avoids framework bloat and simplifies integration.

Flexible Layout System

Supports nested blocks, padding, and custom font rendering, allowing for complex VR UI designs, as shown in the examples with nested layouts and hidden overflow.

Cons

Font File Setup Required

Requires users to provide or create MSDF font files, adding an extra configuration step compared to libraries with built-in typography, as noted in the 'Font files' section.

Limited Pre-Built Components

Offers basic interactive elements like buttons and keyboards, but lacks a comprehensive suite of UI components, which may require custom development for complex applications.

Documentation Gaps

Relies on a wiki for documentation, which may not be as detailed or frequently updated as official docs, potentially slowing down onboarding and troubleshooting.

Frequently Asked Questions

Related Projects

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars209,881

Forks33,861

Last commit1 year ago

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Stars121,570

Forks17,247