googlemaps/js-three

Pure HTML + JS - Uncaught ReferenceError: three is not defined

caio1985 opened this issue · 6 comments

caio1985 commented

Hi,

I'm trying to modify a shipment tracking demo app that uses WebGL maps to use ThreeJS.
I'm purely using HTML + JS, no frameworks.

In my HTML code I have after before :

<script src="three.min.js"></script>
<script src="https://unpkg.com/@googlemaps/three/dist/index.min.js"></script>

When I load the HTML page, in Chrome dev tool's console, I see this error coming from the second javascript file listed above:

Uncaught ReferenceError: three is not defined
    at index.min.js:1:39366

If I also check the Network tab I see that three.min.js is loaded before index.min.js so it should've loaded three.min.js which seems to be a dependency in index.min.js.

I tried using a local version of three-js but also before that I tried using a CDN hosted version but nothing worked. I'm using r136 which is the same one that you have in the examples on https://github.com/googlemaps/js-three.

I'm running this on MacOS, starting my local webserver with gradlew appengineRun which will just create a local server.

Can you provide a pure HTML + JS sample code that would work?

Thanks!

jpoehnelt commented

See https://threejs.org/docs/#manual/en/introduction/Installation and usage of import maps in Compatibility section.

jpoehnelt commented

This example show a workaround when using a cdn https://glitch.com/edit/#!/three-import-map?path=index.html.

caio1985 commented

Didn't work - tried different setups with the example above but none worked.

The head in my HTML file looks like this:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <script src="https://unpkg.com/es-module-shims@0.4.6/dist/es-module-shims.js"></script>
  <script type="importmap-shim">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.118.1/build/three.module.js",
      "three/examples/jsm/": "https://unpkg.com/three@0.118.1/examples/jsm/"
    }
  }
  </script>
  <script src="https://unpkg.com/@googlemaps/three/dist/index.min.js"></script>
  <title>Shipment Tracking</title>
</head>

The body tag on the same HTML is as following:

<body>
  <script type="module" src="shipment_tracking.js"></script>
  <script>
    var script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?callback=initializeJourneySharing&key=${API_KEY}&v=beta&libraries=journeySharing`;
    document.head.appendChild(script);
    console.log("Maps initialization started");
  </script>
</body>
</html>

The API key variable is loaded from another JS file just fine, so please ignore it.

In the console I still see the same error and also for some reason initializeJourneySharing cannot be found (it is defined inside the shipment_tracking.js which is loaded as a module). But this is another error, I believe the initial problem is still there.

index.min.js:1 Uncaught ReferenceError: three is not defined
    at index.min.js:1:39366
(anonymous) @ index.min.js:1
shipment_tracking.html:152 Maps initialization started
shipment_tracking.js:200 Uncaught SyntaxError: Unexpected token '.'
shipment_tracking.html:1 Uncaught (in promise) _.$e {message: 'initializeJourneySharing is not a function', name: 'InvalidValueError', stack: 'Error\n    at new _.$e (https://maps.googleapis.com…&v=beta&libraries=journeySharing:547:123'}
Promise.then (async)
jpoehnelt commented

https://unpkg.com/@googlemaps/three/dist/index.min.js expects window.three to be defined
https://unpkg.com/@googlemaps/three/dist/index.esm.js makes an import ... from "three", it is not minified or targeted for wide browser support

either way, I recommend using a proper build tool or using only esm modules and avoiding the pattern you are using here

  • 👍2
Inthenew commented

right after you load three.js, add
<script> window.three = THREE; </script>

github-actions commented

🎉 This issue has been resolved in version 2.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀