Encountered a Three.js error while attempting to import additional components

Currently, I am working on a project that requires the development of a basic HTML web application with 3D graphics. My choice for implementing this is using Three.js. However, I have encountered a problem - importing dependencies. While experimenting with various examples, everything seems to be functioning correctly. Yet, when I try to incorporate the same concepts into my own codebase, I encounter multiple errors.

The primary issue revolves around my reluctance to use an abundance of different frameworks and additional libraries. I prefer keeping things straightforward by utilizing only Node.js and Express for the web server, along with pure HTML, CSS, and JS (accompanied by Three.js) for the front end. For Three.js, I stumbled upon this public CDN: link.

The problem arises when I attempt to import Three.js components in my code like so:

import * as THREE from "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6d2ced4c3c3e6968897979f8896">[email protected]</a>/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67130f15020227574956565e4957">[email protected]</a>/examples/jsm/controls/OrbitControls.js";

Everything works perfectly fine with older versions (< 0.128.0). However, post the release of 0.127.0, imports seem to no longer be relative:

Older version (0.127.0):

// https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5c1ddc7d0d0f5859b8487829b85">[email protected]</a>/examples/jsm/controls/OrbitControls.js
import {
  ...
} from '../../../build/three.module.js';

Newest version (0.130.0):

// https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44302c36212104746a7577746a74">[email protected]</a>/examples/jsm/controls/OrbitControls.js
import {
  ...
} from 'three';

With the latest versions, the following error occurs:

TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

What am I missing? And can these new versions be used with a CDN?

Complete code can be found here

Answer №1

Check out the latest migration guide for three.js here

  • If you're using NPM, note that ES6 modules in examples/jsm now import using the bare specifier three. This change may impact working with modules on CDNs like jsdelivr and unpkg. Consider switching to skypack instead.

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

What is the best way to create a mock URL in axios for unit testing purposes?

Scenario In this application, the URL is only accessible in production and cannot be accessed locally. During unit testing, it becomes necessary to mock the response from that URL. Solution Refer to this helpful tutorial for guidance. Current Implement ...

JavaScript curry - invoking

Although I'm new to JavaScript, I find myself in a situation where I have to analyze someone else's code. I'm struggling to grasp the concept behind the following function and how to invoke it in node. const invoke = method => object =&g ...

Navigating on Blogger can be a tricky task when it comes to searching and

I recently added a Table to my blogger post, along with an input form for readers to easily search data. After finding the code on W3Schools (link here), I implemented it successfully. However, I am looking to make some improvements. Here is my question: ...

Uncertainty surrounding $q and commitments

After spending several hours researching Kris Kowal's Q library and the angularjs $q variable, I am still struggling to comprehend how it all works. Currently, my service contains the following code: resetpassword: function (email, oldPassword, newP ...

What is the best way to format specific text as bold within an input text field?

I am attempting to make certain text bold within an input text field. However, I'm uncertain about how to achieve this because HTML code is not recognized inside a text field. Therefore, using <b> will not be effective. Is there a way to bold sp ...

Is there a way to implement a directive wrapper for ng-grid that allows the grid options to be specified using a directive attribute?

My goal is to create a reusable directive wrapper for ng-grid, where I can dynamically apply the ng-grid options through the use of an attribute. Below is the basic structure of the code that almost achieves what I am looking for: angular.module('my ...

Verification and Email Blacklisting Services

I am a beginner in Angular and I am attempting to create a simple blacklist check. Currently, I have two texts that I can toggle between showing and hiding using ng-show. The first text should be displayed when the email pattern is incorrect, and hidden wh ...

Arranging a map by its keys results in a sorted Map object with the initial key located at the end of

I have a function that creates a Map object from two arrays and then attempts to sort the map by key. Despite following the sort method as outlined in Mozilla Docs, the sorting is not working as expected; it places the first key at the last index when usin ...

Storybook/vue causing issues with aliases not functioning as intended

I'm currently utilizing Storybook for Vue and I am endeavoring to integrate aliases into the webpack config within storybook/main.js: resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.resolve ...

The designated origin in JavaScript is not displaying in the Django template

Sorry for the possibly silly question, but as I delve into Javascript and Django, I'm struggling with a specific issue. Despite spending hours on it, I can't seem to figure out why my image isn't displaying in my Django HTML template. Here ...

Presentation with multi-directional animations

Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...

My goal is to manage components asynchronously in Nuxt.js while also showcasing alert messages

My Desired Outcome I am hoping to implement a notification system that notifies the user based on the response from the server. However, since notifications are handled by a separate component, I need to asynchronously call this component in my code. The ...

Slideshow of table rows in HTML

On a webpage, I am populating an HTML table with a random number of rows ranging from 1 to 100. Regardless of the total number of rows, the requirement is to display only 10 rows at a time on the screen and then shift to the next set of 10 rows every 5 sec ...

Is there a way to verify an email address and transfer form data to a different HTML page for printing?

How do I troubleshoot email validity checking issues in my form? It works fine when no characters are entered, but fails when characters are inputted. What could be causing this problem? Additionally, I want to open a new HTML sub-file after form submissi ...

Utilizing VueJS to transfer information for constructing a pricing plan chart

This is my first experience with VueJS, so I would greatly appreciate any advice or alternative methods to solve the issue. You can view my progress so far here. I am working on creating a pricing plan table where users can explore four different payment ...

Is it possible for a kraken.js backend to manipulate the content of a webpage?

Currently using kraken.js, which is an express.js framework, to construct a localized website. Within the header section, there are 3 language options provided as links. FR | EN | DE My goal is to have the link corresponding to the currently set locale ( ...

Tips for obtaining JSON data within jQuery's sortable feature

Here is the structure of my code : HTML Code : <form action="example3_action.php" name="example3" method="POST"> <input type="hidden" id='serialize_output' name="serialize_output"> <div class='span4'> ...

Editing the app.js file can cause it to malfunction and stop working

As I work on designing a webpage for a construction company using a template, I face an issue with the js file named app.js. Whenever I make edits to the script, the entire HTML page loses its responsiveness as if the js file was never included in the firs ...

A beginner's guide to manipulating glTF node rotations in three.js

I am currently using the THREE.glTF loader to import glTF files into a web environment. I have successfully loaded the file and animations are functioning as expected. Below is the code snippet: /*gltf loader*/ var loader = new THREE.GLTFLoader(manager); ...

The AJAX request is not successful because it is encountering a ReferenceError due to attempting to assign a value to an

My attempt to trigger a modal using dynamic data from the database with an AJAX function is encountering issues. Upon clicking the button to open the modal, I encounter this error: ReferenceError: assignment to undeclared variable PostRPC in category.ph ...