As I delve into the world of threejs and three-globe, I encounter a challenge when trying to integrate them using CDN distributions from unpkg. The issue lies in dealing with modules, and I'm considering the possibility of incorporating a build tool despite initial reluctance.
My journey started with a straightforward example from the three.js README. Here's a snippet from my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Threejs basic app</title>
<style>
body { margin: 0; }
</style>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js"
}
}
</script>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
This setup works seamlessly. However, the challenge arises when attempting to include three-globe by importing it as suggested in the three-globe README:
import * as THREE from 'three';
import ThreeGlobe from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3a263c2b2b632922212c2b0e7c607d7e607e">[email protected]</a>/dist/three-globe.js';
const width = window.innerWidth, height = window.innerHeight;
// rest of the code is the same
Unfortunately, this leads to an error about the export named 'default' not being provided. Subsequent attempts using different import strategies also result in errors related to missing dependencies or conflicts with three.js. This brings me to ponder over the timing of object creation and potential asynchronous glitches with module loads.
While resorting to script tags instead of modules resolves some issues, it introduces new concerns like multiple instances of three.js being imported. Striving to mitigate this, I explore various import configurations in index.html and main.js, yet the persistent errors hint at the complexity of managing dependencies.
As I navigate through these challenges, I aspire to find a harmonious solution that allows seamless integration of threejs and three-globe without compromising on modularity and efficiency. The quest continues...