# How to use addons in Threejs

**URL:** <https://discourse.threejs.org/t/how-to-use-addons-in-threejs/57514>\
**Category:** Questions\
**Tags:** modules\
**Created:** [October 28, 2023, 6:28pm UTC](https://discourse.threejs.org/t/how-to-use-addons-in-threejs/57514 "2023-10-28T18:28:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wreewan\_Morhee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wreewan_morhee/32/41389_2.png) [@Wreewan\_Morhee](https://discourse.threejs.org/u/Wreewan_Morhee)\
**Post date:** [October 28, 2023, 6:28pm UTC](https://discourse.threejs.org/t/how-to-use-addons-in-threejs/57514/1 "2023-10-28T18:28:09Z")

</div>

In some code I will see:

```javascript
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';

```

from ‘three/addons/…’  
but  
there is no three/addons in my Threejs (^0.158.0)  
so how can I use those addons tools ??

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [October 28, 2023, 7:50pm UTC](https://discourse.threejs.org/t/how-to-use-addons-in-threejs/57514/2 "2023-10-28T19:50:04Z")

</div>

Addons is just an alias of the `examples` directory (ie. [this one](https://github.com/mrdoob/three.js/tree/dev/examples).)

---

<div class="post-metadata">

**Author:** ![Wreewan\_Morhee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wreewan_morhee/32/41389_2.png) [@Wreewan\_Morhee](https://discourse.threejs.org/u/Wreewan_Morhee)\
**Post date:** [October 29, 2023, 8:32am UTC](https://discourse.threejs.org/t/how-to-use-addons-in-threejs/57514/3 "2023-10-29T08:32:38Z")

</div>

you means:  
addons is not the tool in threejs package but just some tool in those example ?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 29, 2023, 10:29am UTC](https://discourse.threejs.org/t/how-to-use-addons-in-threejs/57514/4 "2023-10-29T10:29:32Z")

</div>

The official examples run in the browser without being bundled first, so use an [importmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to tell your browser what `three/addons/` means when it encounters it in an import statement. It’s an alias pointing to a resource.

E.g.,

> <https://github.com/mrdoob/three.js/blob/4527c3e8498ebdc42e7eb40fcfa90435b9c95514/examples/misc_controls_orbit.html#L25-L32>

See [Using Import Maps - Three.js Tutorials](https://sbcode.net/threejs/importmap/) for the many ways of using importmaps.

If you are importing using npm and using a build tool, then depending on whether your environment understands the `package.json` → `exports` option, (see line 8 and 15)

> <https://github.com/mrdoob/three.js/blob/e8ad12d2fa4611665713e4a984c5b00374613159/package.json#L8-L15>

then it will internally redirect any import statement containing the word `addons` to the `./examples/jsm/Addons.js` script, which then contains more information about how your environment can resolve the resource you are referencing.

or,

If your development environment doesn’t understand the `package.json` → `exports` option, then you can continue to use `three/examples/jsm/...`

eg,

```javascript
<script type="module">
    import * as THREE from 'three'
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
    import Stats from 'three/examples/jsm/libs/stats.module.js'

    // ... etc

```