Installation

JSM

via NPM

npm install three-mesh-ui ⚠️ It requires three as peer dependency

ES6

(codesandbox demo)

import ThreeMeshUI from 'three-mesh-ui'

CommonJS

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

via HTML <script> tag

(codesandbox demo)

 <!-- Defines the import map -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three@0.132.2/build/three.module.js",
        "three-mesh-ui": "https://unpkg.com/three-mesh-ui@6.4.0/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)

JS

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/three@0.132.2/build/three.js"></script>

<script src="https://unpkg.com/three-mesh-ui@6.4.1/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)
⚠️ Although this would theorically allows you to build 'something', loading js libraries instead of using jsm, might restrict the global features you would have. This is true for both three and three-mesh-ui libraries.