How to use addons in Threejs

Questions
1

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/…’
but
there is no three/addons in my Threejs (^0.158.0)
so how can I use those addons tools ??

2

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

3

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

4

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.

E.g.,

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.json → exports 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.

or,

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

eg,

<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