Necesito renderizar algo de texto en mi proyecto threejs, pero cada vez que agrego el módulo
import { FontLoader } from 'https://threejs.org/examples/jsm/loaders/FontLoader.js'; import { TextGeometry } from 'https://threejs.org/examples/jsm/geometries/TextGeometry.js';este error es lanzado
Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”. FontLoader.js:5:7Que viene de FontLoader.js. Si no incluyo nada de eso, tres js renderizan la escena y funciona bien. En mi registro de red, funciona sin fallas y todos los módulos están 200 OK.
Debe usar un mapa de importación con las últimas versiones de three.js . Además, nunca importe módulos directamente desde https://threejs.org . Utilice siempre un CDN como el siguiente:
<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'; El polyfill es-module-shims.js se requiere actualmente en Firefox y Safari.
El error que está recibiendo se debe a que está importando archivos de ejemplo JS que en realidad son módulos ESM, pero dentro de ellos tienen importaciones de three que no se pueden resolver.
ThreeJS exporta FontLoader y TextGeometry , por lo que solo necesita importar un módulo EcmaScript (ESM) desde un CDN para importar, por ejemplo:
import { FontLoader, TextGeometry } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';De esa forma estarán disponibles en Chrome.