javascript importmap with "THREE" and "three"

4 days ago 2
ARTICLE AD BOX

I've got javascript libraries that I'm importing and some of them refer to three.js as "THREE" and others refer to three.js as "three". I dropped in an importmap to try to clear this up, however the js doesn't seem to work. It ends up complaining.

Here is the importmap in the head of my html doc.

<script type="importmap"> { "imports": { "THREE": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.min.js", "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.min.js" } } </script>

Here is the script located first thing in the body of my html doc.

<script type="module"> import {Vector3} from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.min.js" import {ConvexGeometry} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/geometries/ConvexGeometry.js" import * as EffectComposer from "https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/EffectComposer.js" </script>

Note, ConvexGeometry uses "three" while EffectComposer uses "THREE".

In the importmap, if I have "THREE" first followed by "three", it complains that EffectComposer can't find "THREE". If I reverse "THREE" and "three", it gives the same error. If I remove the "three" reference, it seems to get farther, but then complains about "three" being absent in EffectComposer.

Is there some kind of trick to this or something that I'm overlooking? What is the correct way to get this to work?

Read Entire Article