How to use addons in Threejs

In some code I will see:

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

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

Addons is just an alias of the examples directory (ie. this one.)

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

The official examples run in the browser without being bundled first, so use an 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.


See Using Import Maps - Three.js Tutorials 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.jsonexports option, (see line 8 and 15)

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.


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


<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