Installation
The installation section is divided into 2 sections. The first is for the ECMAScript modules system with the NPM registry. The second is the CDN system. With the second method, you must download files and set up the file system by yourself.
Install with NPM
Just like other libraries, you can use your package manager tool to install it like below.
For npm
npm i three
npm i three-manga
For npm
yarn add three
yarn add three-manga
Install with CDN
You can use these files for CDN installation with various styles. read more details below.
Common JS (cjs)
In this case, you want to develop your project with the CommonJS module system (you may also know it as a “require” statement module system). you can just require the module index file directly. example below.
const threeManga = require('./dist/cjs/index.js')
Brownserified ECMAScript Modules (brownser)
In modern static web development, the browser already supports module systems with “import” statements. you can place this folder in the served public directory.
<!-- index.html -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@<version>/build/three.module.js",
"three-manga": "http://localhost:8080/dist/browser/three-manga.bundle.js"
}
}
</script>
The code above demostrate how to import three manga module with file being served on port 8080 localhost
Then you can import it like this.
<!-- index.html -->
<script type="module">
import * as THREE from 'three'
import { MangaShaderManager } from 'three-manga'
// ...
</script>
ECMAScript Modules (esm)
Just like Brownserified ECMAScript Modules. You can serve this folder and can import it as well.
<!-- index.html -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@<version>/build/three.module.js",
"three-manga": "http://localhost:8080/dist/esm/index.js"
}
}
</script>
And, import it like this.
<!-- index.html -->
<script type="module">
import * as THREE from 'three'
import { MangaShaderManager } from 'three-manga'
// ...
</script>
For folder
types
, it contains Typescript type definition files. You can use it to apply type to your project.