three-mesh-ui

a library on top of three.js to help in creating 3D user interfaces

Usage no npm install needed!

<script type="module">
  import threeMeshUi from 'https://cdn.skypack.dev/three-mesh-ui';
</script>

README

three-mesh-ui

buttons example tuto example big text example big text example

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