Issues with fontloader and textgeometry functionality have arisen within the threejs framework

While working on my threejs project, I encountered an issue when trying to render text. Every time I add the following modules:

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

I keep getting this error message:

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

The error seems to originate from FontLoader.js. Interestingly, when I exclude these modules, three js is able to render the scene without any issues. When checking my network log, all modules appear to be loading correctly with status 200 OK.

javascriptimportmodulethree.js

Answer №1

To ensure compatibility with the latest three.js releases, it is recommended to utilize an import map. Avoid direct imports from https://threejs.org and opt for a CDN instead:

<script async src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6306104e0e0c07160f064e100b0a0e1023524d504d55">[email protected]</a>/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f2b372d3a3a1f6f716e6c67716c">[email protected]</a>/build/three.module.js"
        }
    }
</script>

<script type="module">

    import * as THREE from 'three';

    import { FontLoader } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20544852454560100e1113180e13">[email protected]</a>/examples/jsm/loaders/FontLoader.js';
    import { TextGeometry } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f08498829595b0c0dec1c3c8dec3">[email protected]</a>/examples/jsm/geometries/TextGeometry.js';

The use of the polyfill es-module-shims.js is essential for proper functionality in Firefox and Safari.

Answer №2

The reason for the error message you're seeing is due to importing JS example files that are actually ESM modules containing imports from three which cannot be resolved.

In ThreeJS, both FontLoader and TextGeometry are exported, so all you need to do is import an EcmaScript Module (ESM) from a CDN like this:

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

By doing this, they will be accessible in Chrome without any issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Data-binding between X and Y axes in several grouped bar charts using d3.js

Check out this Fiddle Example I've been exploring different approaches for creating multiple grouped bar charts on a single page. I came across two examples (Example 1) and (Example 2), but I'm facing an issue with setting the X and Y domains co ...

javascriptjsonsvgd3.js

Using jQuery to transfer the selected value from one radio button to another

I am attempting to transfer all input data from one div to another div containing the same inputs, triggered by a checkbox selection. This is the structure of my HTML Form: <div id="0">Name* <input type="textbox" name="name0" required/>S ...

javascriptjqueryhtml

Switching from Ldapsearch to ldapjs transformation

I've been experimenting with converting a ldapsearch query from ldapsearch to an ldapjs script: ldapsearch -H ldap://ldap.berkeley.edu -x -b 'ou=people,dc=berkeley,dc=edu' objectclass=* Here is the ldapjs script I have been working on: va ...

javascriptnode.jsshellldap

When configuring three.js and node.js on a live server, encountered a SyntaxError due to an unexpected string while importing './style.css'

Having trouble getting a simple three.js website up and running on a live server (a2 shared hosting). Node.js is installed, but the start up file main.js doesn't seem to be reading properly. Completely new to Node. Starting the server results in an er ...

javascripthtmlcssnode.jsthree.js

Executing a function within a PHP script and transferring variables from JavaScript

I am currently working with a file called file.php which contains a function. On the Javascript side, I am using Ajax. $.ajax({ type: "POST", url: "file.php", data: {param1: params1, param2: params2...}, complete: function(data){ /* code */ } ...

javascriptphpjqueryajax

Guide to implementing the HttpOnly flag in a Node.js and Express.js application

Hey there! I'm currently working on a project using node.js and I need to ensure that the HttpOnly flag is set to true for the header response. I've written this code snippet in my app.js file but it doesn't seem to be affecting the respons ...

javascriptnode.jsexpress

Determining the completion of multiple asynchronous calls in AngularJS: A guide

I have a SQLService running on my PhoneGap/AngularJS app that processes a long array of Guidelines with DB transactions. How can I indicate when the final transaction is completed? I envision a flow like this: In the controller, call `SQLService.ParseJS ...

javascriptangularjsasynchronous

What is the best way to locate the final text node within the <p> element?

Looking at the code below, my goal is to identify and retrieve the text node that serves as the last child element. <p class="western" style="margin-bottom: 0.14in"> <font color="#000000"> <font face="Arial, serif"> <font ...

javascriptjqueryhtmlcss

How to convert SVG paths to canvas shapes

I'm curious about combining SVG paths and div elements into one image. How can this be achieved? For example: <div class="objects ui-droppable ui-sortable"> <div class="b_s _jsPlumb_endpoint_anchor _jsPlumb_connected" id="start_bloc ...

javascriptphpjquerycanvassvg

Calculating the Product of Two Arrays

I'm attempting to multiply two arrays that are the same length and generate a third array from it. After experimenting with loops, I believe using a nested loop is the most effective approach. Here is my initial implementation, which unfortunately m ...

javascriptarrays

Communication between parent and child elements in jQuery

I am developing a plugin that focuses on the manipulation of checkboxes. However, I am currently facing an issue. After retrieving JSON data, I need to establish connections between children and parents. Each child contains a "data-parent" attribute with a ...

javascriptjqueryjson

Executing Passport.js for Authentication

I've been trying to understand passport.js by watching tutorials online, but I'm still confused. Can someone clarify my doubts below? Please read the paragraph at the bottom first. If everything is set up correctly, this is how the login strateg ...

javascriptnode.jsexpresspassport.jspassport-local

Angular: handling dynamic value problems

I am currently working on a feature that involves displaying different data from a large object based on user selections made through a dropdown menu. The code snippet I am using to populate the data is as follows: $scope.displayData = $scope.dataObj[$sco ...

javascriptangularjs

Error: The request does not have the 'Access-Control-Allow-Origin' header

As a beginner in post requests, I've been encountering an error when attempting to make a post request. Despite searching for solutions, the answers are too complex for me to grasp how to adjust my code to resolve it. var url = 'http://unturnedb ...

javascriptajaxpostxmlhttprequest

Tips for changing the page URL upon click in a Vue.js application

I am currently developing a post board application using Vue.js and I am facing an issue with redirecting the page when a user clicks on each post. To handle this, I have made use of vue-route and axios in my project. Here is a snippet from index.js, ex ...

javascriptvue.jsvuejs2vuexvue-router

tips on utilizing the JSON information transmitted from the backend

$.ajax({ url: '{{ URL('reports/groupsUsersGet') }}', dataType: "json", data: { group_id : $('#group').val(), }, success: function(data) { <li>"i need to insert variable here"</li> }, error: function (data) ...

javascriptjqueryjsonlaravellaravel-5

Utilizing JavaScript as an alternative to PHP in this specific scenario

Hey everyone, I'm looking to pass data from PHP to JavaScript. Below is my PHP code that I need to adapt for use in JavaScript: $result = dbMySql::Exec('SELECT Latitude,Longitude FROM data'); while ($row = mysqli_fetch_assoc($result)) $ ...

phpjavascriptajaximplode

Using the `after()` method in jQuery, you can append an additional element after the

I am facing a challenge where I need to dynamically add multiple tr elements using the after() function to a tr variable in jQuery and then return the entire element. However, when I try to return the tr variable, it only includes the original tr without t ...

javascriptjquerydomappend

Tips on creating a POST request in ReactJS

Hey there! I'm a student developer working with ReactJS and currently learning how to code using the Reactjs Context API. I've encountered an issue when trying to send data from my form for categories, resulting in the following error: Unhandl ...

javascriptreactjs

Toggling Legends in D3.js interactivity

My line graph displays nested data with user-selected keys. Each key has 4 child values, each represented by a line on the graph. If 2 keys are selected, there will be a total of 8 lines on the graph. I've created a legend that shows the child value ...

javascriptjqueryd3.js