Installation - michal-repo/three-mesh-ui GitHub Wiki

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/[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)

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/[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)
⚠️ 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.

⚠️ **GitHub.com Fallback** ⚠️