Uncaught ReferenceError: THREE is not defined

[EdgeCaseLord]

Describe the bug I have included harp.gl by adding it to the import map:

		<script type="importmap">
			{
				"imports": {
					"three": "https://unpkg.com/three/build/three.min.js",
					"harp": "https://unpkg.com/@here/harp.gl/dist/harp.js"
				}
			}
		</script>

and then adding this line to my includes:

			import * as harp from "harp";

and got the following error messages:

external "THREE":1 Uncaught ReferenceError: THREE is not defined
    at Object.three (external "THREE":1:1)
    at __webpack_require__ (bootstrap:18:1)
    at Object.../harp-datasource-protocol/lib/ColorUtils.ts (ColorUtils.ts:8:1)
    at __webpack_require__ (bootstrap:18:1)
    at Object.../harp-datasource-protocol/index.ts (index.ts:21:1)
    at __webpack_require__ (bootstrap:18:1)
    at Object.../harp-mapview/lib/AnimatedExtrusionHandler.ts (AnimatedExtrusionHandler.ts:7:1)
    at __webpack_require__ (bootstrap:18:1)
    at Object.../harp-mapview/index.ts (index.ts:15:1)
    at __webpack_require__ (bootstrap:18:1)

To Reproduce Steps to reproduce the behavior: 1.Load page 2. nothing happens, black screen

Expected behavior The website should appear with a map on the selected canvas element (in this case, a CanvasTexture that's put upon a 3d mesh of a map)

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome Canary
• Version 101.0.4911.0

Additional context Maybe it's not a bug but an error in my way to include it? I don't think so, but please let me know if it is. Three.js has recently changed its way to be included. Maybe Harp.GL did not adapt to this yet?

[EdgeCaseLord]

EDIT: I've tried to replace the includes by these, like in the harp.gl tutorial:

		<script src="https://unpkg.com/three/build/three.min.js"></script>
		<script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>

and now get these errors:

three.min.js:6 THREE.WebGLRenderer: Error creating WebGL context.
ea @ three.min.js:6
na @ three.min.js:6
MapView @ MapView.ts:989
setupCanvasDrawing @ index.html:321
(anonymous) @ index.html:122
three.min.js:6 Uncaught Error: Error creating WebGL context.
    at new ea (three.min.js:6:370534)
    at new na (three.min.js:6:391506)
    at new MapView (MapView.ts:989:27)
    at setupCanvasDrawing (index.html:321:21)
    at index.html:122:4

[nzjony]

@badde-media , now at least your issue is with three.js, see: https://stackoverflow.com/questions/54232528/error-creating-webgl-context-three-js-chrome

[EdgeCaseLord]

I know I need a new computer 🙈 thanks for the hint. Anyway, it does work on other websites, why is that so?

[nzjony]

@badde-media , do the other three.js examples work? See: https://threejs.org/examples/#webgl_animation_keyframes

[EdgeCaseLord]

Yes, other examples work as expected. In Firefox and Google Chrome Canary.

[EdgeCaseLord]

Even harp.gl works on other websites. I don't know why not on mine. Maybe they're working with an older version of three.js?

[EdgeCaseLord]

By the way, installation of the example project with method 1 also ended with an error, and no functioning installation.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.