Hi, I am super new to Three.js … loving it so far, it helps me a lot buidling my little virtiual planetarium.
So, it already works. However, I patch my file together from one of the examples and in its current state everything is in the index.html file.
there is an import map and than a code block with type module and everything happens in the module block.
Now I want to have a bit order in that chaos so i created some helper functions for loading models, creating materials and all that. It works fine.
I also can use some helper functions, that are not referencing THREE from external files or other, non module code blocks.
The Problem is, when I have a helper function that references THREE, like the load_model() function I created, it only works, when I define it inside the “Module” Block… Because if I define it outside, the console gives me an error, that THREE is not defined.
So… how, and where? I Really want to have this functions somewhere else and a clean init() function…
Can someone please point me in the right direction?
Here is my file:
<script type="importmap">
{
"imports": {
"three": "./build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
.... Here is all the stuff, scene initialisation, THREE referencing Helper Functions... animate() function... everything. And that is Stuffed... too stuffed...
</script>
Split JS into separate smaller files, create an index.js, initialise the code there, and only import that index.js in html. Otherwise you’re building a single-file monstrosity that’ll eventually force you to either rewrite the entire thing from scratch or just get you so lost you’ll give up entirely 