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