Errors when adding orbitalcontrols.js

Questions
1

This is how i am linking files

   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three-orbitcontrols@2.110.3/OrbitControls.js"></script>
    <script src="index.js"></script>

and this is how i am initializing orbital controls

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

and this is the error i am getting

OrbitControls.js:1 Uncaught ReferenceError: require is not defined
    at OrbitControls.js:1
(anonymous) @ OrbitControls.js:1
index.js:85 Uncaught TypeError: THREE.OrbitControls is not a constructor
    at index.js:85

I tried everything i could but cannot resolve it. Please help!

2

This version of OrbitControls you are trying to include is meant to be used within an npm project, and not directly imported in a browser.

Try including this version instead: https://unpkg.com/browse/three@0.132.0/examples/js/controls/OrbitControls.js

3

Thanks for the reply i appreciate it, but it’s still producing an error

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://unpkg.com/browse/three@0.132.0/examples/js/controls/OrbitControls.js with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
index.js:83 Uncaught TypeError: THREE.OrbitControls is not a constructor
    at index.js:83
(anonymous) @ index.js:83

It’s still producing those two errors, for the latter error i tried to remove the THREE. but still i produced a an error, something along the lines of “orbitcontrols is not defined”

4

Try it with these two imports:

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>

In general it makes no sense to import library files from different CDNs. And it’s definitely wrong to import three.js files from different releases.

5

Thank You! It’s working again :slightly_smiling_face:

I was trying to find cdn for the latest release but was having trouble, so i used the r128 version, but now i know that i should use the latest release and the same cdns

1 Like