最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - fontloader and textgeometry not working in threejs - Stack Overflow

programmeradmin0浏览0评论

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

import { FontLoader } from '.js';
import { TextGeometry } from '.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 ing 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.

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

import { FontLoader } from 'https://threejs/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'https://threejs/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 ing 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.

Share Improve this question asked Mar 21, 2022 at 12:15 Luke DelrayLuke Delray 651 silver badge10 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

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

<script async src="https://unpkg./[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg./[email protected]/build/three.module.js"
        }
    }
</script>

<script type="module">

    import * as THREE from 'three';

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

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

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./ajax/libs/three.js/r128/three.module.js';

By that way they will be available in Chrome.

发布评论

评论列表(0)

  1. 暂无评论