ArcballControls.js throws error: "ambiguous indirect export: MathUtils"

floko · October 28, 2022, 10:23am

Hi,
I just wanted to use ArcballControls instead of OrbitControls (which works fine), but I am getting above error message for MathUtils. It’s related to the line in ArcvallControls.js where MathUtils is imported. (See below code snippet.) What can I do to fix this?
Thank you!


import {
	GridHelper,
	EllipseCurve,
	BufferGeometry,
	Line,
	LineBasicMaterial,
	Raycaster,
	Group,
	Box3,
	Sphere,
	Quaternion,
	Vector2,
	Vector3,
	Matrix4,
	MathUtils,
	EventDispatcher
} from "./three.module.js";

Mugen87 · October 28, 2022, 10:39am

I’ve never seen this error message in context of three.js modules. How does your build setup look like?

floko · October 28, 2022, 11:19am

Thanks for your quick reply!
Not sure if this is what you meant, but my script starts with:

import * as THREE from ‘/fk-test/3d-test4/js/three.module.js’;
//import {OrbitControls} from ‘/fk-test/3d-test4/js/OrbitControls.js’; // used before
import {ArcballControls } from ‘/fk-test/3d-test4/js/ArcballControls.js’;
import {GLTFLoader} from ‘/fk-test/3d-test4/js/GLTFLoader.js’;

So the error occurs right on top of the script after importing the basic “three” file.
All .js files are in the same folder on my web server.
Or do you mean there might be differences in the versions of the scripts?

floko · October 28, 2022, 11:51am

Just in case the script versions could make a difference, I made sure I took the main module from here

github.com

mrdoob/three.js/blob/f021ec0c9051eb11d110b0c2b93305bffd0942e0/build/three.module.js

/**
 * @license
 * Copyright 2010-2022 Three.js Authors
 * SPDX-License-Identifier: MIT
 */
const REVISION = '146';
const MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
const TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 };
const CullFaceNone = 0;
const CullFaceBack = 1;
const CullFaceFront = 2;
const CullFaceFrontBack = 3;
const BasicShadowMap = 0;
const PCFShadowMap = 1;
const PCFSoftShadowMap = 2;
const VSMShadowMap = 3;
const FrontSide = 0;
const BackSide = 1;
const DoubleSide = 2;
const NoBlending = 0;

This file has been truncated. show original

and this arcball controls module:

github.com

mrdoob/three.js/blob/f021ec0c9051eb11d110b0c2b93305bffd0942e0/examples/js/controls/ArcballControls.js

( function () {

	//trackball state
	const STATE = {
		IDLE: Symbol(),
		ROTATE: Symbol(),
		PAN: Symbol(),
		SCALE: Symbol(),
		FOV: Symbol(),
		FOCUS: Symbol(),
		ZROTATE: Symbol(),
		TOUCH_MULTI: Symbol(),
		ANIMATION_FOCUS: Symbol(),
		ANIMATION_ROTATE: Symbol()
	};
	const INPUT = {
		NONE: Symbol(),
		ONE_FINGER: Symbol(),
		ONE_FINGER_SWITCHED: Symbol(),
		TWO_FINGER: Symbol(),

This file has been truncated. show original

Now I have a different error message
Uncaught SyntaxError: ambiguous indirect export: ArcballControls

Mugen87 · October 28, 2022, 11:55am

You can’t combine the ESM version of three.js with code from examples/js. Proper module files are located in examples/jsm.

It might be less error-prone to use a build tool instead of copy/past modules or library files into your project. A simple project setup with rollup looks like so: GitHub - Mugen87/three-jsm: Minimal three.js project setup using ES6 modules and rollup.

floko · October 28, 2022, 12:28pm

I will try your setup recommendations. Thanks a lot!

floko · October 31, 2022, 8:42am

Is there any structured way of copying and setting up the necessary files and folders manually?
I tried above recommendations, but I neither have npm (command not found) nor node.js installed, no localhost server and I am working directly on a web server with somewhat limited permissions.
Alternatively I tried taking the module files from examples/jsm for controls and loaders, combined with three.js (and later three.module.js) from /dev/build/. None of the combinations worked for me.
Thank you!