THREE.js does not provide an export named EventDispatcher while loading OrbitControls in main.js
Question
Description
I am trying to use the OrbitControls from THREE.js in my project. When I attempt to import the OrbitControls object, I am getting the following error message in the Google Chrome DevTools console.
The requested module './three.js' does not provide an export named 'EventDispatcher'
When I manually inspect three.js (r119), I can see that it does export EventDispatcher on line 50631.
Question : Given this information, why am I getting the aforementioned error message, and how can I fix this?
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<script src="three.js" crossorigin="anonymous"></script>
<script src="main.js" type="module"></script>
</body>
</html>
main.js
import { OrbitControls } from './OrbitControls.js'
EDIT : Thanks to Steve, the root cause of my issue was that I was using the non-module version of three.js instead of the correct one (for my use case) called three.module.js . If you're getting the error message, make sure you're downloading the three.module.js file.
1 answers
solution1
2 ACCPTED 2020-08-05 16:41:26
I'm assuming you're using the OrbitControls.js found in https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js
You're mixing the module library with the non-module library. If you look at the first lines of OrbitControls.js
import {
EventDispatcher,
MOUSE,
Quaternion,
Spherical,
TOUCH,
Vector2,
Vector3
} from "../../../build/three.module.js";
It's trying to import variables from ../../../build/three.module.js , which probably doesn't exist. From your error message, it seems like someone already edited it to be './three.js', which sounds like the non-module version.
Solutions
Preserving references
- Download all of
three.jsto a folder (likelib/three) - (Optionally) Delete files you don't need
Import via:
import { OrbitControls } from './lib/three/examples/jsm/controls/OrbitControls.js';
import * as THREE from './lib/three/build/three.module.js';
Modifying only the files you need
Or you can download only the files you need and change the references:
- Download
three.module.jsfrom https://github.com/mrdoob/three.js/blob/dev/build/three.module.js - Replace
../../../build/three.module.jsinOrbitControls.jsto the appropriate path. It should be wherethree.module.jsis in relationship toOrbitControls.js - Delete the
<script src="three.js">tag in your HTML, sinceOrbitControls.jsdirectly imports it
Linking to a CDN
Alternatively, you can link directly to a CDN, like:
import { OrbitControls } from 'https://unpkg.com/three@0.119.1/examples/jsm/controls/OrbitControls.js';
import * as THREE from 'https://unpkg.com/three@0.119.1/build/three.module.js';
This works because all of the required files are hosted by the CDN
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.