fontloader and textgeometry not working in threejs

user_13475623 0
Viewed 418

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.

three.js import module javascript
2 Answers

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/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.138.3/build/three.module.js"
        }
    }
</script>

<script type="module">

    import * as THREE from 'three';

    import { FontLoader } from 'https://unpkg.com/three@0.138.3/examples/jsm/loaders/FontLoader.js';
    import { TextGeometry } from 'https://unpkg.com/three@0.138.3/examples/jsm/geometries/TextGeometry.js';

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

user_52508470

The error you are receiving is because you are importing JS example files whose are in fact ESM modules, but inside them they have imports from three that cannot be resolved.

ThreeJS exports FontLoader and TextGeometry so you just need to import a EcmaScript Module (ESM) from a CDN to import, for example:

import { FontLoader, TextGeometry } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';

By that way they will be available in Chrome.

user_29146380
Related