Uncaught ReferenceError: THREE is not defined

Question

Uncaught ReferenceError: THREE is not defined

EdgeCaseLord opened this issue 2 years ago · 8 comments

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?

Answer 1 · 2022-02-26T18:20:08.000Z

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

Answer 2 · 2022-02-28T06:49:33.000Z

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

Answer 3 · 2022-02-28T12:34:43.000Z

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

Answer 4 · 2022-02-28T13:10:24.000Z

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

Answer 5 · 2022-02-28T15:25:24.000Z

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

Answer 6 · 2022-02-28T15:26:25.000Z

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?

Answer 7 · 2022-03-01T12:38:14.000Z

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

Answer 8 · 2022-04-30T12:40:46.000Z

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.