OrbitControls is not defined: Super confused on the proper way to import Orbitcontrols using a cdn

Questions
,
1

I’m new to most of this and I’m trying to learn through examples. I know I might be importing JS modules improperly, so I was hoping someone could show me how to import OrbitControls properly from a cdn?

I feel like I may be close, but I keep getting confused by the jsm/es6 stuff.

<!DOCTYPE html>
<html>

<head>
  <title>Canvas Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/three@0.124/build/three.min.js"></script>
  
  <script type="module">
    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.124/build/three.module.js';
    import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.124/examples/jsm/controls/OrbitControls.js';
  </script>

  <script src="main.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
</body>

</html>



const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;


const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

try {
  const orbitControls = new OrbitControls(camera, renderer.domElement);
  orbitControls.minDistance = 20;
  orbitControls.maxDistance = 100;
  orbitControls.enableDamping = true;
  orbitControls.dampingFactor = 0.01;

} catch (error) {
  console.error(error);
}

//object
const geometry = new THREE.SphereGeometry(25, 128, 64);
//const material = new THREE.MeshPhysicalMaterial();

const material = new THREE.MeshLambertMaterial();
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);


//lights
const light = new THREE.HemisphereLight(0xffffff, 0x000, 1);
var lightR = new THREE.DirectionalLight(0xFF0000, 4);
var lightG = new THREE.DirectionalLight(0x00FF00, 4);
var lightB = new THREE.DirectionalLight(0x0000FF, 4);

scene.add(light, lightR, lightG, lightB);

lightR.position.set(24, 30, -34);
lightG.position.set(33, 30, 14);
lightB.position.set(-40, 30, -34);


window.addEventListener('resize', onWindowResize);

function animate() {

  requestAnimationFrame(animate);

  try {
    orbitControls.update();
  } catch (ReferenceError) {

  }

  renderer.render(scene, camera);
};

function onWindowResize() {

  SCREEN_WIDTH = window.innerWidth;
  SCREEN_HEIGHT = window.innerHeight;
  aspect = SCREEN_WIDTH / SCREEN_HEIGHT;

  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

  camera.aspect = aspect;
  camera.updateProjectionMatrix();

}

animate();

Thank you much for your time!

2

you need to work with OrbitControls in the same script block

3

Ohh I see. I was definitely overlooking that.
More learning to come; will post results back here when done.

4

holy cow… It’s working now!
I didn’t realize through all the literature I’ve read that your main script can be/(has to be) set to the module type to be able to import modules in your script from CDNs.

The only differences I had to make were to change the html script includes in my index.html to only:

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

and that allowed me to use the

import * as THREE from 'foo_blah';
import { OrbitControls } from 'bar_bleh';

in my main.js.

Going through and explaining this in case anyone else was in my boat!

Thanks again for your quick reply makc3d :grin: