Setting up Three.js

Community Help
2

That looks about right to me.

Unfortunately there’s no good way to use import maps in notebooks yet (as recommended by Three’s CDN example), but for more complex dependencies (e.g. shaders or postprocessing passes) you could use esm.sh’s custom bundles:

THREE = (await (await import("https://esm.sh/build")).esm`
  import * as THREE from "three@0.155.0";
  import {OrbitControls} from "three@0.155.0/examples/jsm/controls/OrbitControls.js";
  export default {...THREE, OrbitControls};
`).default

However, I’d argue that merging example classes into the THREE object is a thing of the past, now that Three.js has moved all examples to ES modules. My recommendation would be to just import helpers in separate cells:

THREE = import("three@0.155.0")

OrbitControls = (await import("three@0.155.0/examples/jsm/controls/OrbitControls.js")).OrbitControls

As long as the versions match (and you’re not using skypack which bundles all dependencies) THREE should only be loaded once.

3 Likes