Is it possible to have the three.js code in a separate file from the html?

I apologize for the dumb question, I don’t have much coding experience yet. The title is quite explanatory but I’ll provide a little context anyways. I’ve always done my three.js javascript in a tag in the html but I would prefer if the js portion didn’t appear in the F12 editor tools.

Yes, your code can definitely be in a separate .js file, but you should know there’s nothing you can do to prevent the user from seeing your code, no matter where you store it. Browsers all come with robust developer tools built-in, which allows anyone to read your scripts.

Anyway, to save your JS code in a separate file, you could do this:

  1. Create a file named myProject.js with all your code.
  2. Save it in the same folder as your index.html file.
  3. In index.html instead of writing inside the <script> tags, you can just add the relative path to your .js file:
<!-- First you download the THREE.JS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>

<!-- Then you link to your own scripts -->
<script src="./myProject.js"></script>
1 Like

Ahh I see… It might just be me, but why can’t I see HeroForge’s javascript code then? https://www.heroforge.com/
I’m sure they use three.js as well because I saw them in the three.js examples.

Not sure where you’re looking, but there are tons of scripts directly under the <body> tag.

Screenshot%20(4)

Aren’t those just references to the javascript files and not the actual code? I might have misunderstood your answer. My understanding is that there is a way to see the tags with the corresponding javascript file names but there isn’t a way to see the actual code in those files-- or anywhere?

JavaScript files are code. I think what you’re referring to is the difference between a library and their project’s custom code. You can see their THREE.js code in this file: https://www.heroforge.com/static/js/creationkit.js?version=2.3.1 but it’s been minified and uglified to make it harder for others to copy.

If I referenced my javascript file as you described above, my code would be “minified and uglified” as well?

No, it doesn’t happen automatically. You’d need to search for tools that do it for you.

If you don’t mind me asking, why are you so concerned with people being able to read your code?

I’m just curious cause i’ve never really seen a website’s javascript before.