javascript - Not using node.js : Uncaught TypeError: Failed to resolve module specifier "three". Relative refe

i have this simple js sample which i test via visual studio code with live preview server build in: i don't use node.js in this sample all js files under js dir :

C:\Dev\my\javascript\ThreeJS\tests\js>ls -1
GLTFLoader.js
OrbitControls.js
main.js
three.js
three.min.js
three.module.js

HTML:

but i keep getting this general error :

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

<html>
    <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8" />
        <title>My first three.js app</title>
        <link href="main.css" rel="stylesheet" type="text/css">
        <script type="module" src="js/main.js"></script>
    </head>
    <body>
        <div id="scene-container">
            <canvas></canvas>
        </div>
    </body>
</html>

in js/main.js

import {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from 'three';

// Get a reference to the container element that will hold our scene
const container = document.querySelector('#scene-container');

// create a Scene
const scene = new Scene();

// Set the background color
scene.background = new Color('skyblue');

// Create a camera
const fov = 35; // AKA Field of View
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1; // the near clipping plane
const far = 100; // the far clipping plane

const camera = new PerspectiveCamera(fov, aspect, near, far);

// every object is initially created at ( 0, 0, 0 )
// move the camera back so we can view the scene
camera.position.set(0, 0, 10);

// create a geometry
const geometry = new BoxBufferGeometry(2, 2, 2);

// create a default (white) Basic material
const material = new MeshBasicMaterial();

// create a Mesh containing the geometry and material
const cube = new Mesh(geometry, material);

// add the mesh to the scene
scene.add(cube);

// create the renderer
const renderer = new WebGLRenderer();

// next, set the renderer to the same size as our container element
renderer.setSize(container.clientWidth, container.clientHeight);

// finally, set the pixel ratio so that our scene will look good on HiDPI displays
renderer.setPixelRatio(window.devicePixelRatio);

// add the automatically created <canvas> element to the page
container.append(renderer.domElement);

// render, or 'create a still image', of the scene
renderer.render(scene, camera);

i have this simple js sample which i test via visual studio code with live preview server build in: i don't use node.js in this sample all js files under js dir :

C:\Dev\my\javascript\ThreeJS\tests\js>ls -1
GLTFLoader.js
OrbitControls.js
main.js
three.js
three.min.js
three.module.js

HTML:

but i keep getting this general error :

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

<html>
    <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8" />
        <title>My first three.js app</title>
        <link href="main.css" rel="stylesheet" type="text/css">
        <script type="module" src="js/main.js"></script>
    </head>
    <body>
        <div id="scene-container">
            <canvas></canvas>
        </div>
    </body>
</html>

in js/main.js

import {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from 'three';

// Get a reference to the container element that will hold our scene
const container = document.querySelector('#scene-container');

// create a Scene
const scene = new Scene();

// Set the background color
scene.background = new Color('skyblue');

// Create a camera
const fov = 35; // AKA Field of View
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1; // the near clipping plane
const far = 100; // the far clipping plane

const camera = new PerspectiveCamera(fov, aspect, near, far);

// every object is initially created at ( 0, 0, 0 )
// move the camera back so we can view the scene
camera.position.set(0, 0, 10);

// create a geometry
const geometry = new BoxBufferGeometry(2, 2, 2);

// create a default (white) Basic material
const material = new MeshBasicMaterial();

// create a Mesh containing the geometry and material
const cube = new Mesh(geometry, material);

// add the mesh to the scene
scene.add(cube);

// create the renderer
const renderer = new WebGLRenderer();

// next, set the renderer to the same size as our container element
renderer.setSize(container.clientWidth, container.clientHeight);

// finally, set the pixel ratio so that our scene will look good on HiDPI displays
renderer.setPixelRatio(window.devicePixelRatio);

// add the automatically created <canvas> element to the page
container.append(renderer.domElement);

// render, or 'create a still image', of the scene
renderer.render(scene, camera);

Share Improve this question edited Jan 13, 2021 at 10:21 asked Jan 13, 2021 at 7:31 user63898 30.9k91 gold badges294 silver badges550 bronze badges

1 What do you expect the three module to resolve to? This module? three.js in the current folder? three.js in the project root folder? – FZs Commented Jan 13, 2021 at 7:35
you need to install three package. npm i -s three, or include it via a cdn in your html file. – Vahid Alimohamadi Commented Jan 13, 2021 at 7:37
1 but again i said i dont use node js all the tree.js files are in js folder see updated question – user63898 Commented Jan 13, 2021 at 10:19
Can you show an example of this on jsfiddle or codepen? – Joseph Astrahan Commented Apr 5, 2023 at 11:25

Add a comment |

8 Answers 8

Sorted by: Reset to default 18

The following is my code when using cdn without webpack/node.js.

#index.html

<head>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.js",
                "OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>
</head>
<body>
  <script type="module" src="js/test.js"></script>
</body>

#test.js

import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';

scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
controls = new OrbitControls(camera, renderer.domElement);

ref: https://jspm.org/import-map-cdn

This is because unlike other web resources, the JS modules specification for HTML reserved the space of these non-relative references (called "bare specifiers") exactly to allow custom package imports via import maps.

write namespace THREE and import like this.....

  import * as THREE from 'fileUrl';

for more info go to this link https://discoverthreejs.com/book/introduction/get-threejs/

Also since 26th of January this year three.js released r137 update and since r137 using ES6 modules like GLTFLoader in the browser requires an import map.

<script type="importmap">
{
    "imports": {
        "three": "../master/three.js-master/build/three.module.js"
    }
}

The three.js import statement in your scripts.js looks like so then:

import * as THREE from 'three'

https://github.com/Kramzin/threejs-task - Here you can see updated and previous code, after these changes everything is working.

Adding the below code to my HTML File worked for me.

<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three/build/three.module.js"
    }
}</script>

Credits: https://jsfiddle.net/2nyxkmco/

I understand your question as follows: You want to include the distributed three.js file into your HTML file without bundling your code (using e.g. webpack). If that's the case, you should not use import in your own code, but rather globally import the dependency (three) into your HTML file. This will expose the THREE object into the global namespace. Then, in your JavaScript file, you automatically have access to the global variables. You can directly access the module (without referencing to it).

Here is an example (taken and adapted from the official documentation):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
    <script src="js/three.js"></script>
    <script src="js/my-script.js"></script>
</body>

my-script.js:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

To reuse your existing code, you can use the spread operator and break down the global variable into your now imported ones:

const {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} = window.THREE;

if you are using 'three' package from npm thenyou need to install that pakage in terminal and import like this

import * as THREE from './js/three.module.js';

or
import {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from 'three';

The following worked for mee..

//import * as THREE from 'three'; // somehow this does not work    
import * as THREE from './node_modules/three/build/three.module.js';

with following directory structure and installation as per Three.js installation page...

/node_modules
index.html
main.js

My solution is to make a correct directory link to file three.module.js according to the solution from ThreeJS discourse for Mozilla Firefox case when importmap of script is not working by changing from:

import * as THREE from 'three';

to be the correct directory to file three.module.js according to this example depended upon the place of the html file or javascript file that cause the trouble :

import * as THREE from '../build/three.module.js';

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Not using node.js : Uncaught TypeError: Failed to resolve module specifier "three". Relative refe

8 Answers 8

与本文相关的文章

评论列表(0)