Orbit Controls - Install with cdn

Questions
1

Beginner here, I am struggling to get orbit controls imported in script tags of my html code:

htlm code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js" integrity="sha512-334uBDwY0iZ2TklV1OtDtBW9vp7jjP7SWRzT7Ehu1fdtPIjTpCwTSFb8HI/YBau9L1/kRBEOALrS229Kry4yFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js" ></script>
<script type="module" src="{% static 'blog/threeBackground.js' %}"></script>

I use orbit controls once in my javascript code, with no imports at the top of my javascript file:

OrbitControls(camera, renderer.domElement)

This leads to a console log error, OrbitControls is undefined. I have tried a whole bunch of differing configurations to get this to work, but no success, does anyone have any ideas on how to resolve?

I found these topics, none of which seem to resolve my issue:

(This seems to imply that I do not have to do any thing if I download three from a CDN, but this did not work).

Thanks for your assistnace

2

even if you somehow make that work, threejs will soon delete /js and then you’ll scramble. especially as a beginner, you’re wasting your your time on script tags. the old ones are from a bygone era and very few things support them any longer, we’re using modules now. the esm script tags are not finished and will cause you never ending trouble. not to mention that CDNs can be unreliable.

webdev functions through node, npm and bundling. you are ready to go in seconds:

  1. install node
  2. type “npm create vite”, name your project, select “vanilla”
  3. cd into your project
  4. run “npm install three”
  5. run “npm run dev”

and that is it, open the url it gives you in the browser, open your editor, edit a file and save, it will be reflected in the browser. when you want to publish run “npm run build” and copy the dist folder onto your server, it will already be compressed and tree shaken (using only the parts you actually need).

if you want to use three:

import * as THREE from 'three'
import { OrbitControls } form 'three/examples/jsm/controls/OrbitControls'
3

Good to know, thank you. I was starting to think I was crazy for not finding more documentation on how to utilize the script tags.

The sample project I worked through used node and installed vite and three with npm as you mention.

I have my website deployed on heroku, I will read up on getting node installed on the heroku machiene.