I cant add or import orbit controls to my project

Questions
,
1

So im completely new to coding but i wanted to make a small gltf model viewer for my 3d model. I want to try to make the scene moveable with orbit controls but im not cappable to add it with my little knowledge of coding. id like to post my code here but i havent figured out how.

i imported it like this which worked for three.js and the GLTFLoader.js

<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script>

<script src="https://unpkg.com/browse/three-orbitcontrols@2.110.3/OrbitControls.js"></script>

<script src="https://cdn.jsdelivr.net/gh/mrdoob/Three.js@r92/examples/js/loaders/GLTFLoader.js"></script>

controls = new OrbitControls(camera, renderer.domElement) or controls = new THREE.OrbitControls(camera, renderer.domElement); resulted in Uncaught ReferenceError: OrbitControls is not defined

i put that after i set the scene, renderer and camera.

2

You’re using 3 different versions of the threejs components from three different CDNs… this can cause lots of problems for you…
Instead… you can/should use modules and ES6 imports.

Stick this in your html:

    <script type="importmap">
    {
        "imports": {
          "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/",
          "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
        }
    }
    </script>

And include your js code like this:

<script type="module" src="./js/app.js"></script>

Then in your app.js (or whatever you name yours), import THREE and OrbitControls like this:

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

When you import OrbitControls like this… you won’t need to reference it via THREE.OrbitControls… just OrbitControls…

like:

let controls = new OrbitControls( camera,renderer.domElement );

Try to avoid mixing versions and CDNs because it will cause you heartache later… and try to use a recent version of threejs… the older versions work differently/slower/have bugs.

2 Likes
3

three has an installation guide: three.js docs

use option 1. web dev and consuming packages can only be feasibly done through tooling, and it’s the simplest and quickest. type the commands and you are set up in seconds.

cdns are fragile and complicated. if you make it work today it will fail tomorrow because you can’t use the majority of packages (which are cjs, not esm). there are complicated politics involved, the web committees tried to brute force an incomplete spec and the larger eco system did not adopt, nor can it. it’s not worth it, and even if you plow on, second order issues will then affect your users, like massive bundles, slow page load, etc.

1 Like
4

One thing to mention also here would be the inclusion of es module-shims just before the import maps :smiling_face:

1 Like
5

Yeah that’s… true… but in this day and age, any browser that’s going to be running modern threejs, most likely supports the importmaps already… that’s my assumption at least…
Do you know if that’s not the case? good catch…

1 Like
6
2 Likes
7

It’s the majority yes but i’d still say a bit early to not include a fallback polyfill…

1 Like
8

.web dev and consuming packages can only be feasibly done through tooling
[citation needed]

if you make it work today it will fail tomorrow because you can’t use the majority of packages (which are cjs, not esm).
[wat]

the web committees tried to brute force an incomplete spec and the larger eco system did not adopt, nor can it. it’s not worth it, and even if you plow on, second order issues will then affect your users, like massive bundles, slow page load, etc.
[this isn’t necessarily true. it can be… but a lot of simple projects don’t need tooling.]

Frankly that all might be a bit overwhelming for a new user. I write threejs all the time using the setup I described.

1 Like
9

TypeScript migrating to ES6 Modules, Type Syntax in Javascript, (soon to come) external importMaps support it all looks like it’s going in the correct direction for ES6 modules to be the future syntactical approach to web dev, bundler or not,

Although it’s going to be a nuisance for those who “did not adopt” upgrading old school cjs libs to ES6, frankly it’s the way forward as you can see it moving towards…

image
image801Ă—450 21.4 KB

10

the majority of the npm eco system, which is javascripts eco system is cjs. you can’t browser import cjs. these cjs projects can’t simply move to esm, because it would break end user applications. esm is feature incomplete and node doesn’t accept cjs and esm in the same project. this is why there is bun now, people are so upset that node will likely go down.

use what you want, don’t push beginners into this hell.

11

I think you missed the part where I explained that I write threejs using a cdn, like… every day… and there is nothing hellish about it. You don’t even need node. I use node to serve my stuff… but I serve literally 100s of projects via a single instance of node… and that could be apache or wamp or anything else. Presumably OP is already hosting their stuff somehow… There’s more to the “ecosystem” than just node/npm/vite…