Right way to import three.js

[gganapat]

Hi, I tried different ways to import three.js but not successful. Here is one version which should have worked but didn't. Any suggestions?

thanks!
gani-

[mbostock]

This worked for me…

import * as THREE from "npm:three";

const height = 300;
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
const renderer = new THREE.WebGLRenderer({antialias: true});
camera.position.z = 1;
scene.add(mesh);

const animation = (time) => {
  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;
  renderer.render(scene, camera);
};

renderer.setSize(width, height);
renderer.setAnimationLoop(animation);
display(renderer.domElement);

Reading the docs, it looks like the recommended syntax for loading add-ons such as OrbitControls and GLTFLoader is:

import * as THREE from "npm:three";
import {OrbitControls} from "npm:three/addons/controls/OrbitControls";
import {GLTFLoader} from "npm:three/addons/loaders/GLTFLoader";

(I dropped the .js extension because you’ll need the implicit /+esm to convert these to ES modules on jsDelivr, which is how npm: imports are implemented.)

[gganapat]

ok, thanks! That worked.
gani -