📢 7.x.x is in evaluation, check it out here #223
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.
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.
Give it a try in this jsFiddle
Using react-three-fiber ? Here is a codesandbox to get started.
npm install three-mesh-ui
ES6 (codesandbox demo)
import ThreeMeshUI from 'three-mesh-ui'
const ThreeMeshUI = require('three-mesh-ui');
HTML <script> tag (codesandbox demo)
<!-- Defines the import map -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three-mesh-ui": "https://unpkg.com/[email protected]/build/three-mesh-ui.module.js"
}
}
</script>
<!-- Then we can code our app -->
<script type="module">
import * as THREE from "three";
import * as ThreeMeshUI from "three-mesh-ui";
// code goes here ...
</script>
💪 You can use the minified version named three-mesh-ui.module.min.js (codesandbox demo)
HTML <script> tag (codesandbox demo)
<!-- As three-mesh-ui has a peer dependency on three.js -->
<!-- Be sure to load three before three-mesh-ui -->
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/build/three-mesh-ui.js"></script>
<!-- Then we can code our app -->
<script>
/* global THREE, ThreeMeshUI */
// code goes here ...
</script>
💪 You can use the minified version named three-mesh-ui.min.js (codesandbox demo)
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
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();