three-mesh-ui

Examples (live)  |  NPM  |  Documentation  |  Contributing

What is it ?

three-mesh-ui is a small library for building VR user interfaces. The objects it creates are three.object3Ds, usable directly in a three.js scene like any other Object3D.

It is not a framework, but a minimalist library to be used with the last version of three.js. It has no dependency but three.js.

Why ?

In a normal three.js workflow, the common practice is to build the user interfaces with HTML/CSS.

In immersive VR, this is not possible. The purpose of three-mesh-ui is to offer a tool similar to HTML/CSS to build genuine meshes that can be used the normal way inside a three.js scene rendered with WebGLRenderer.

Quick Start

Try it now

Give it a try in this jdFiddle

Using react-three-fiber ? Here is a codesandbox to get started.

Import

With NPM and ES6 :
In your console : npm install three-mesh-ui

import ThreeMeshUI from 'three-mesh-ui'

With NPM and CommonJS :
In your console : npm install three-mesh-ui

const ThreeMeshUI = require('three-mesh-ui');

With HTML <script> tag :

<script src='https://unpkg.com/three-mesh-ui'></script>

Font files

In order to display some text with three-mesh-ui, you will need to provide font files.
You can use the two files named Roboto-msdf in this directory, or create your own font files

API

Here is an example of basic three-mesh-ui usage :

const container = new ThreeMeshUI.Block({
 width: 1.2,
 height: 0.7,
 padding: 0.2,
 fontFamily: './assets/Roboto-msdf.json',
 fontTexture: './assets/Roboto-msdf.png',
});

//

const text = new ThreeMeshUI.Text({
 content: "Some text to be displayed"
});

container.add( text );

// scene is a THREE.Scene (see three.js)
scene.add( container );

// This is typically done in the loop :
ThreeMeshUI.update();