First I want to say that I'm very new to javascript and working with libraries. I'm trying to get some basic three.js code to work but it's not working and I'm not sure why. I have set up a basic scene using the Threejs documentation and I'm trying to get some basic orbit controls set up. Everything works fine until I try to import the orbit controls into my main script file. I then get an error:

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

I haven't tried much to solve my problem because I'm not even sure where to start. I've checked my spelling and made sure I had the correct relative path for my imports.

Here is the code that works:

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

// import { OrbitControls } from '/node_modules/three/examples/jsm/controls/OrbitControls.js';

// Construct basic scene elements
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,
    1000
);
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
// const controls = new OrbitControls(camera, renderer.domElement);

// Set parameters for scene elements
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

When I uncomment the second import for the orbit controls it breaks and gives me the error above. What is causing the error and how do I fix it?

Thanks in advance.

First I want to say that I'm very new to javascript and working with libraries. I'm trying to get some basic three.js code to work but it's not working and I'm not sure why. I have set up a basic scene using the Threejs.org documentation and I'm trying to get some basic orbit controls set up. Everything works fine until I try to import the orbit controls into my main script file. I then get an error:

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

I haven't tried much to solve my problem because I'm not even sure where to start. I've checked my spelling and made sure I had the correct relative path for my imports.

Here is the code that works:

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

// import { OrbitControls } from '/node_modules/three/examples/jsm/controls/OrbitControls.js';

// Construct basic scene elements
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,
    1000
);
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
// const controls = new OrbitControls(camera, renderer.domElement);

// Set parameters for scene elements
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

When I uncomment the second import for the orbit controls it breaks and gives me the error above. What is causing the error and how do I fix it?

Thanks in advance.

• javascript
• three.js

• 1 Can you clarify why you are importing that way? With node modules you can usually import simply by referencing the name of the npm module like import whatever from “modulename”. Pretty rarely do you need to provide the path into node modules and a specific folder because node/Babel resolves that for you internally. – Alexander Staroselsky Commented Jul 20, 2021 at 23:42
• That doesn't work either. I've installed the module just like the documentation says and that doesn't work. – dkollar Commented Jul 21, 2021 at 0:46
• Can you create a stackblitz or a code sandbox or similar that shows the issue you are facing? – Alexander Staroselsky Commented Jul 21, 2021 at 1:10
• The official documentation of three.js recommends nowhere to import the main library from node_modules like so: import * as THREE from '/node_modules/three/build/three.module.js';. For npm projects, it should be import * as THREE from 'three';. Besides, node workflows have to use a build tool like rollup in order to create an application bundle. Check out github.com/Mugen87/three-jsm for a minimal setup. – Mugen87 Commented Jul 21, 2021 at 8:14
• @Mugen87 If the main file is being referenced from a <script type="module>, then the use of a direct path is necessary because a browser can't resolve an npm package reference. I'll expand a little more in an answer. – TheJim01 Commented Jul 21, 2021 at 13:56

5 Answers 5

Easy fix as of today:

change
import { OrbitControls } from 'three/addons/controls/OrbitControls';
to
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

Source:

Three years ago was the last time three-orbitcontrols was published. It is now deprecated with the following at the top of the page on npm:

"Author's Message":
three-js exposes real modules now via three/examples/jsm/... for example to import Orbit, do import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

Welcome to Stack Overflow. You question seems to be missing some information, so I'm going to make some assumptions based on what you have provided. If any of my assumptions are incorrect, please update your question to provide further details.

My primary assumption is that you are using a <script> tag in your HTML to reference your main file, and that you are not using any JavaScript bundling tools like Mugen87 mentioned. If this is the case, then what you have is fine, BUT, OrbitControls will not work unless you modify it.

If you dig into the OrbitControls.js file, you'll see (current as of r.130.1):

import {
    EventDispatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
} from 'three';

The from reference makes the assumption that you are using the module from within an npm context, not a browser. Browsers don't know anything about npm packages, and they can't resolve three to its node_modules path, resulting in the error you saw. To make this work, you will need to modify the reference to point to the correct module path.

I personally don't like modifying the files inside node_modules, so I recommend the following:

1. Make a new folder called vendor_mods/three/examples/jsm/controls and copy OrbitControls.js into it.
2. Change the from reference in the copied file to point to /node_modules/three/build/three.module.js
3. Change the reference in your main file to point to your modified OrbitControls.js.

Now, the browser can reference all the pieces correctly, and everyone should be happy.

I was sent here by google, searching for a solution to a problem that oocured after doing some updates.

My error message was Could not resolve 'three/examples/jsm/controls/OrbitControls'

I solved it by replacing

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

with

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

Note the added .js at the end of the import.

Update Nov 2024 (only for people that use Nestjs/NX)
I had a related problem when I tried to import the ObjLoader on the server side and stumbled over my own answer here, so I add the following:

"Nx code isn't correctly importing libraries that export ESM-style. That seems to be an Nx bug!" from a comment on NX github issue 11335

As ObjLoader has no dependencies other then threejs core, I just copied the file into my own repo and import from there for now. I disabled ts compiler checks for that file with

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck

Have a look at the linked issue above for better solutions (issue still open as of Nov 2024).

You can use: import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

As per the suggestion on NPM site use threejs package only to import OrbitControls. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";