When attempting to import the OrbitControls.js file, Three.js encounters an error and fails

Question

When attempting to import the OrbitControls.js file, Three.js encounters an error and fails

I am completely new to javascript and unfamiliar with working with libraries. I am currently experimenting with basic three.js code, but unfortunately facing issues that I cannot seem to resolve. Following the documentation on Threejs.org, I have set up a simple scene and am attempting to add orbit controls. However, everything seems to be working fine until I try to import the orbit controls into my main script file, which results in an error message:

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

Unfortunately, due to my limited experience, I haven't been able to make much progress in solving this issue yet. I have double-checked for any typos and made sure that the relative paths for my imports are correct.

Below is the snippet of code that is currently functioning:

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);

As soon as I uncomment the second import statement for the orbit controls, it breaks and shows the error mentioned earlier. Could someone please help me understand what is causing this error and guide me on how to fix it?

Thank you in advance.

javascript three.js

Answer 1

Answer №1

If you're looking for an easy solution today:

Simply update the code from

import { OrbitControls } from 'three/addons/controls/OrbitControls';

to

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

Here's where the information comes from:

The last update to three-orbitcontrols was three years ago. It has been deprecated and the message at the top of its npm page reads:

"Author's Message":
The latest versions of three-js now provide real modules accessible via three/examples/jsm/... For instance, to import Orbit, use import { OrbitControls } from 'three/examples/jom/controls/OrbitControls'

Answer 2

If you're looking for an easy solution today:

Simply update the code from

import { OrbitControls } from 'three/addons/controls/OrbitControls';

to

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

Here's where the information comes from:

The last update to three-orbitcontrols was three years ago. It has been deprecated and the message at the top of its npm page reads:

"Author's Message":
The latest versions of three-js now provide real modules accessible via three/examples/jsm/... For instance, to import Orbit, use import { OrbitControls } from 'three/examples/jom/controls/OrbitControls'

Answer 3

Answer №2

Greetings from Stack Overflow! It appears that there might be some missing information in your question, so I will try to make assumptions based on the details provided. If any of my assumptions are incorrect, please update your question with more specifics.

My assumption is that you are including a <script> tag in your HTML to reference your main file, and you are not using JavaScript bundling tools like Mugen87 mentioned. In this scenario, everything seems fine, but it's important to note that OrbitControls won't function correctly unless you make some modifications.

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

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

The use of from assumes that you are working within an npm context, not a browser environment. Browsers do not recognize npm packages and cannot resolve three to its node_modules path, resulting in the error message you encountered. To address this issue, you need to adjust the reference to point to the correct module path.

In my view, directly modifying files in the node_modules directory is not ideal. Instead, here's what I suggest:

Create a new folder named
```
vendor_mods/three/examples/jsm/controls
```
and paste a copy of OrbitControls.js into it.
Modify the reference using from in the copied file to indicate
```
/node_modules/three/build/three.module.js
```
Update the reference in your main file to point to the modified OrbitControls.js.

By following these steps, your browser should be able to recognize all components correctly, ensuring smooth functionality for everyone involved.

Answer 4

Greetings from Stack Overflow! It appears that there might be some missing information in your question, so I will try to make assumptions based on the details provided. If any of my assumptions are incorrect, please update your question with more specifics.

My assumption is that you are including a <script> tag in your HTML to reference your main file, and you are not using JavaScript bundling tools like Mugen87 mentioned. In this scenario, everything seems fine, but it's important to note that OrbitControls won't function correctly unless you make some modifications.

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

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

The use of from assumes that you are working within an npm context, not a browser environment. Browsers do not recognize npm packages and cannot resolve three to its node_modules path, resulting in the error message you encountered. To address this issue, you need to adjust the reference to point to the correct module path.

In my view, directly modifying files in the node_modules directory is not ideal. Instead, here's what I suggest:

Create a new folder named
```
vendor_mods/three/examples/jsm/controls
```
and paste a copy of OrbitControls.js into it.
Modify the reference using from in the copied file to indicate
```
/node_modules/three/build/three.module.js
```
Update the reference in your main file to point to the modified OrbitControls.js.

By following these steps, your browser should be able to recognize all components correctly, ensuring smooth functionality for everyone involved.

Answer 5

Answer №3

After encountering an issue following some updates, my search led me here thanks to Google.

The error message I received was

'Could not resolve 'three/examples/jsm/controls/OrbitControls''

To resolve the problem, I made a simple change:

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

I replaced it with:

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

By adding .js at the end of the import, the issue was resolved.

Answer 6

After encountering an issue following some updates, my search led me here thanks to Google.

The error message I received was

'Could not resolve 'three/examples/jsm/controls/OrbitControls''

To resolve the problem, I made a simple change:

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

I replaced it with:

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

By adding .js at the end of the import, the issue was resolved.

Answer 7

Answer №4

A handy tool at your disposal is the OrbitControls package, which you can easily integrate using this code snippet:

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

Answer 8

A handy tool at your disposal is the OrbitControls package, which you can easily integrate using this code snippet:

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

Answer 9

Answer №5

It is recommended to utilize the threejs package exclusively for importing OrbitControls as advised on the NPM website.

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

Answer 10

It is recommended to utilize the threejs package exclusively for importing OrbitControls as advised on the NPM website.

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

When attempting to import the OrbitControls.js file, Three.js encounters an error and fails

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to extract value from subscribing?

Eliminating unnecessary gaps caused by CSS float properties

Error: anticipated expression, received keyword 'if'

Mirror the content of my div code onto a two-dimensional plane using an A-frame

How to create a Vue.js animated navbar with scroll opacity

Implementing a more efficient method for incorporating UUIDs into loggers

Loading Animation with jQuery and Minimum Time Delay

The full height of the image cannot be captured by html2canvas

Exploring Javascript's Standard Object: A Guide to Retrieving Two Elements

Is it possible to implement cross-domain login with Passport.js?

What is preventing me from using .bind(this) directly when declaring a function?

"When utilizing a jQuery AJAX request to communicate with a Node.js server, the functionality only seems to

Step-by-step guide on building a factory in Angular for a pre-existing service

What is the best way to layer four images in a 2x2 grid over another image using CSS as the background

Node.js: Issues with using async await inside a map function

Troubleshooting AngularJS application by Manipulating List Items

Challenge with delayed function execution in AngularJS

When using Express, the XML response is returning an empty document

How to eliminate query strings from the current page's URL using JavaScript

Having issues with @react-three/drei in next.js environment