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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With