skip to Main Content

I get this error when trying to import the OrbitControls

JS:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
const controls = new OrbitControls(camera, renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(cube);

camera.position.set(0, 20, 100);
camera.position.z = 5;

renderer.render(scene, camera);

controls.update();

function animate(){
    requestAnimationFrame(animate);

    controls.update();

    renderer.render(scene, camera);
}

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Document</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" ></script>
        <script type="module" src="task9.js"></script>
    </body>
</html>

I’ve tried to use different imports;
import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;
and
import { OrbitControls } from ‘https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js’;
None of them work

2

Answers


  1. import OrbitControls from ‘../three/examples/jsm/controls/OrbitControls’

    Try this it may solve your problem.

    Login or Signup to reply.
  2. The error you get says that the path to OrbitControls has to be absolute and not relative. Here are the differences. In a nutshell – you just have to replace the path to OrbitControls with ‘./three/examples/jsm/controls/OrbitControls’ or ‘/home/&USER/path/to/OrbitControls’.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search