#Orbit Controls

15 messages · Page 1 of 1 (latest)

viscid basin
#

So, I'm setting everything exactly according to the documentation, but I keep geting the following error;

index.html:1 Uncaught TypeError: Failed to resolve module specifier "three/addons/controls/OrbitControls.js". Relative references must start with either "/", "./", or "../".

Here's my HTML;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Three.js App</title>
    
    <link rel="stylesheet" href="./css/style.css">
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.js"
            }
        }
    </script>
</head>
<body>

    <section class="plane-geometry"></section>

    <script type="module" src="./js/plane-geomertry.js"></script>
</body>
</html>

And here's my script;

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

If someone could explain to me what I'm doing wrong...

Thanks.

#

Btw, everything else is working fine, it's just this one addon.

sacred gull
viscid basin
#

Let me give it a shot.

sacred gull
#

and make sure you don't have a trailing comma on the line.. browser is finicky about formatting of importmap

viscid basin
#

Well, thats' partially working. It's giving me a 404, which is better than nothing. lol

#

DUH

#

Maybe if I put the version number in. lol

#

So, if anyone else comes across this thread because of the same issue, here's my solution (thanks to thrax!);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Three.js App</title>
    
    <link rel="stylesheet" href="./css/style.css">
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.js",
                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
            }
        }
    </script>
</head>
<body>

    <section class="plane-geometry"></section>

    <script type="module" src="./js/plane-geomertry.js"></script>
</body>
</html>

And here's the JS;

// Import Three.js modules
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
sacred gull
#

i think your CDN doesnt expose the examples

#

try this:

 <script type="importmap">
            {
                "imports": {
                  "three": "https://threejs.org/build/three.module.js",
                  "three/addons/": "https://threejs.org/examples/jsm/"
             }
    }
</script>
#

@viscid basin

viscid basin
sacred gull
#

ya.. so thats pulling directly from threejs org.. you probably want to find a cdn that exposes examples.. I think I have 1 ... 1 sec