fontloader and textgeometry not working in threejs

Question

I need to render some text in my threejs project, but every time I add the module

import { FontLoader } from 'https://threejs.org/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'https://threejs.org/examples/jsm/geometries/TextGeometry.js';

this error is thrown

Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”. FontLoader.js:5:7

Which is coming from FontLoader.js. If I don't include any of it three js render the scene and works fine. In my network log, it runs flawless and all modules are 200 OK.

Answer 1

You have to use an import map with latest three.js releases. Besides, never import modules directly from https://threejs.org. Always use a CDN like below:

<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"
        }
    }
</script>

<script type="module">

    import * as THREE from 'three';

    import { FontLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/FontLoader.js';
    import { TextGeometry } from 'https://unpkg.com/[email protected]/examples/jsm/geometries/TextGeometry.js';

The polyfill es-module-shims.js is currently required in Firefox and Safari.