last day (16 days later) » 

1:59 PM
1
A: How to move the Sphere using mouse in three.js? (Uncaught ReferenceError: OrbitControls is not defined)

BerthurLike the error message indicates, you are trying to use OrbitControls but it cannot be found. This is because it is not part of the core THREE.js library, but it is in the THREE.js examples directory so you need to import it separately. You can import it through an HTML script tag like you do wit...

 
Thank you for helping me out. I got the OrbitControls source, but it isn't still working. I still got the same error. What shall I do?
 
@Cambria Did you import it in your HTML? Also, you should probably call it as THREE.OrbitControls().
 
I did, I changed the code into const controls = new THREE.OrbitControls(...); but now the code outputs the error "Uncaught TypeError: THREE.OrbitControls is not a constructor". But I think were going in the right direction because the original error has been fixed.
 
@Cambria Hmm. Could you show how you import it?
 
Sure!...I'll post the code in the answer....
 
1:59 PM
@Cambria Looks like you're still not importing OrbitControls. You need to import e.g. this file: github.com/mrdoob/three.js/blob/dev/examples/js/controls/…
 
ahhh yes. That's the OrbitControls.js I have in my computer. I modified the code in my answer a bit in light of your suggestion. I have added the import command in the HTML code and I tried calling the OrbitControl.js by calling the link to the OrbitControl.js The next error would be: Uncaught SyntaxError: import declarations may only appear at top level of a module... I really thank you for guiding me for this one. I've been struggling in this for a week...hehehhe
 
@Cambria If you're using import in Javascript, then you need to include the script as a module <script type="module">. You can also just import the orbit controls in their own HTML <script> tag. I suggest you look into how to import things in javascript in general (make sure you check a recent guide as these things have changed a lot)
 
I now checked how to link the Javascript file to the HTML file via <script type="module"> and import command few minutes. I now modified the code again in light of your suggestion. The error Uncaught SyntaxError: import declarations may only appear at top level of a module and Loading failed for the module with source “c:\Users\pc\Desktop\Lines\OrbitControls.js”, even if the OrbitControl.js file is housed in one folder.
I really thank you for helping and bearing up with me....
 
No problem mate. Yes module imports are a bit more tricky. That's why I suggest that you start by importing the file through an HTML <script> tag. I edited my answer to show it.
 
2:12 PM
Yes, like that :) But then remove the javascript imports.
 
Hello! I modified the code again in my answer in light of your suggestion. But I wonder if my HTML code actually works in your end. I modified the code again by deleting the import command. Damn bro you're patient...
 
Don't worry mate, I remember pondering about the exact same thing not so long ago :)
So does this work for you?
On a side note I recommend making a project dirctory for yourself and referring to the files in there using a local path, rather than ever calling C:/users/... etc.
 
Thanks for the help!....I now got the error "Loading failed for the <script> with source “c:\Users\pc\Desktop\Lines\OrbitControls.js”." and "Uncaught TypeError: THREE.OrbitControls is not a constructor". Would you like to test my HTML code and see if it works on your end? Seems my code is alternating on three errors "OrbitControls is not a constructor", "Loading failed for the <script> with source “c:\Users\pc\Desktop\Lines\OrbitControls.js”." and "OrbitControls is not defined"...
 
Did you also update to the latest three.js?
 
Hmm...Lemme check in the Firefox web console. Oh yes....it says..."THREE.WebGLRenderer 79"
 
2:30 PM
Did you manage to update?
 
Hmmm... I think I haven't updated the three.js because until now didn't know how to update three.js. Let me get back to you...:-)...Please rest well there....
I will update the three.js as fast as possible...
 
 
2 hours later…
4:23 PM
Hello there! I was finally able to update my three.js by directly downloading the whole three.js files from github. I also started running my HTML code via XAMPP. I can also access the needed JavaScript files by calling only the link to the local files withe the "C://Users/....The result is the lone error "Uncaught SyntaxError: import declarations may only appear at top level of a module" which is happening on my HTML code now. I thank you for this...
I have also modified the code in my answer for your analysis in light of my improvements...:-)
The whole three.js file and my HTML code are housed in one folder no errors will be formed....
Thank you very much for bearing with me...
 
4:39 PM
oooh wait...let me correct myself...its "Uncaught SyntaxError: import declarations may only appear at top level of a module" which is happening on my HTML code and "Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”." which is happening on OrbitControl.js but the OrbitControl.js is definitely perfect and there's no need to correct it.
 
Nice job. You are still trying to import the orbit controls in javascript. Since you added it in the HTML script tag, this is no tnecessary.
If you import orbit controls in their own script tag, then you can use them directly as THREE.OrbitControls in your code.
Oh, and for that to work you need to import the standard `js` version of OrbitControls, not jsm:

https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js
Later, at your leasure, you can get yourself into how to build a proper javascript application with modules and more convenient imports etc. But while you are experimenting for yourself, let's get you up and running the easiest way first.
 
Thank you very much for helping me out...I really owe you one...ahahahahha!...I think we're getting close in properly using the OrbitControls because the lone error "Uncaught TypeError: THREE.OrbitControls is not a constructor" happening on my HTML code remains.....I now modified the code in light of your suggestions...
 
If someone's help is appreciated, it is appreciated in return to mark their answer as accepted, as that gives them some juicy reputation points :)
Looks like your code is in an ok state now, so I can try it here
Just remove the module type from the orbit control import and it works.
<script src=".\three.js-master\three.js-master\examples\js\controls\OrbitControls.js"></script>
Nice globe :)
 

  last day (16 days later) »