Uncaught typeerror three.orbitcontrols is not a constructor [SOLVED]

Being a developer encountering an error is not uncommon. One of the errors is…

Uncaught TypeError: THREE.OrbitControls is not a constructor?

So, in this article, we will cover how this error occurs, determine its causes, and importantly, provide solutions to it.

Uncaught typeerror three.orbitcontrols is not a constructor

The “Uncaught TypeError: THREE.OrbitControls is not a constructor” error is revealing that there is a problem with the way the OrbitControls module is being used.

Further, the THREE.OrbitControls module is not being recognized as a constructor, which means that the code is likely trying to call it as a function or is missing the necessary dependencies.

To resolve this error, you can check if the module is properly imported and if all the necessary dependencies are included.

Additionally, you can ensure that the module is being called as a constructor by using the new keyword, as follows:

const controls = new THREE.OrbitControls(camera, renderer.domElement);

Make sure also to check the version of THREE.js being used is compatible with the version of OrbitControls.

Why did this error occur?

There are several causes why the error “Uncaught TypeError: THREE.OrbitControls is not a constructor” might occur.

Here are some possible causes:

OrbitControls module is not properly imported or included in the project.
There is a version mismatch between the version of OrbitControls being used and the version of THREE.js being used.
The OrbitControls module is being called as a function instead of a constructor.
There may be a syntax error in the code that is preventing the OrbitControls module from being recognized as a constructor.
There may be a conflict with other libraries or modules being used in the project that is causing the error to occur.
The necessary dependencies for the OrbitControls module are missing or not properly installed.
The scope of the OrbitControls module is incorrect or is not properly defined.
There may be a typo or misspelling in the name of the OrbitControls module.

How to fix Uncaught typeerror three.orbitcontrols is not a constructor

Here is an example of how to fix the error “Uncaught TypeError: THREE.OrbitControls is not a constructor”.

Let’s say you have the following code:

import { OrbitControls } from 'three';

const controls = OrbitControls(camera, renderer.domElement);

The “Uncaught TypeError: THREE.OrbitControls is not a constructor” error occurs because the OrbitControls module is not being called as a constructor.

To solve this error, you can call the OrbitControls module as a constructor using the “new” keyword like this:

import { OrbitControls } from 'three';

const controls = new OrbitControls(camera, renderer.domElement);

Considering the code above code, the OrbitControls module is called as a constructor with the “new” keyword.

Then will instantiate a new instance of the OrbitControls class.

Afterward, it should resolve the error and allow the code to properly utilize the OrbitControls module.

Furthermore, “import” statement is used to import the OrbitControls module into the project, making it available for use in the code.

Additionally, a module is then called as a constructor with the “new” keyword, which creates a new instance of the module and assigns it to the “controls” variable.

Additional Resources

Anyway here are some other fixed typeerror wherein you can refer to try when you might face these errors:

Conclusion

To conclude, Uncaught typeerror three.orbitcontrols is not a constructor implying that there is a problem with the way the OrbitControls module is being used.

To ensure that the module is being called as a constructor with the new keyword.

Use the following code:

const controls = new THREE.OrbitControls(camera, renderer.domElement);

By considering these solutions, surely the error will be fixed.

That’s all for this article. I hope you have learned and fixed the error you are encountering.

Thank you! 😊