@motifdev/three-mesh-ui
v1.0.1
Published
a library on top of three.js to help in creating 3D user interfaces
Downloads
4
Readme
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 user interfaces with HTML/CSS.
In immersive VR, it is impossible, therefore this library was created.
Quick Start
Try it now
Give it a try in this jsFiddle
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 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 render loop :
ThreeMeshUI.update();