Run function after everything is ready and import local library

Hi. Im trying to do a simple thing, but i really couldnt figure it out. I just need to run a simple function when everything is ready. Any help would be appreciated. Maybe its something really simple, but im new dealing with three.js, and i’ve had a hard time trying to solve this task. I just need to run a function with console.log(‘loading complete’), or something like this. I’ve tried to run a function when page loads with a event listener, as it can be seen in the code, but this doesnt work and it runs before the model fully render. I’ve tried the onLoad but didnt manage to make it work.

Another question is how do I import the library from local ? As you can see in my code below, I’ve imported from web (https://unpkg.com/three@0.120.1/build/three.module.js), but if i download the file and import from local, like, if i change the addres to ‘…/three.module.js’ it doesnt work. How can i accomplish this ? Thanks in advance for any help.

My code is:

<style>
	body {
		width: 100vw;
		height: 100vh;
		margin: 0;
		overflow: hidden;
		}
	#loader img {
height: 80vh;
}
</style>
<div id="loader" style="position: fixed;
height: 100%;
width: 100%;
z-index: 1000;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
top:0;">
	<img alt="Page Loading..." src="loader.gif">
</div>


<script type="module">

import {
    Camera,
    DirectionalLight,
    Color,
    Material,
    PointLight,
    WebGLRenderer,
    Scene,
    PerspectiveCamera,
    Texture,
    AmbientLight,
  } from 'https://unpkg.com/three@0.120.1/build/three.module.js'
  import { OrbitControls } from 'https://unpkg.com/three@0.120.1/examples/jsm/controls/OrbitControls.js'
  import { GLTFLoader } from 'https://unpkg.com/three@0.120.1/examples/jsm/loaders/GLTFLoader.js'

  let scene, camera, renderer;

  function init() {
	  

    scene = new Scene();
    scene.background = new Color(0xffffff);

   camera = new PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
    camera.rotation.y = 45/180*Math.PI;
    camera.position.x = 5;
    camera.position.y = 8;
    camera.position.z = 10;
	  
	

    const hlight = new AmbientLight (0x404040,100);
    scene.add(hlight);
	hlight.castShadow = true;

    const directionalLight = new DirectionalLight(0xffffff,1,100);
   directionalLight.position.set(0,1,0);
    directionalLight.castShadow = true;
	
    scene.add(directionalLight);
    const light = new PointLight(0xc4c4c4,1);
    light.position.set(0,0,500);
    scene.add(light);
    const light2 = new PointLight(0xc4c4c4,4);
    light2.position.set(500,0,0);
    scene.add(light2);
  
	  const light3 = new PointLight(0xc4c4c4,4);
   light3.position.set(0,0,-500);
    scene.add(light3);
    
	
	const light4 = new PointLight(0xc4c4c4,5);
 light4.position.set(-500,0,0);
    scene.add(light4);

    renderer = new WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    // controls.addEventListener('change', renderer);

    let loader = new GLTFLoader();
    loader.load('car.glb', function(gltf){
      const car = gltf.scene.children[0];
      console.log('car: ', car);
      car.scale.set(20,20,20);
	  car.receiveShadow;
	  car.position.x = -1;
	  car.position.y = -2;
	  car.position.z = 0;
      scene.add(car);
	  
      animate();
    });
	  
	  
	  
  }
	
  function animate() {
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
	  
	  
	  
	  
	  
  }
  init();
</script>

<script>

	// loaded page
window.addEventListener("load", function(){
	var loader = document.getElementById("loader");
	function(){document.body.removeChild(loader);}
});

</script>

You should either using webpack / rollup / other bundler, or a local webserver.

Three can’t handle preloading for you - you must determine yourself when enough assets are loaded and then render the scene (using loading managers or just loaders.) You can quite easily do this with promises:

// In rendering loop render scene only when renderingActive is set to true.
const renderingActive = false;
const requiredAssets = [
  { url: 'assets/model1.glb', loader: THREE.GLTFLoader },
  { url: 'assets/texture.jpg', loader: THREE.TextureLoader },
  // ...
].map(({ url, loader }) => new loader().loadAsync(url));

Promise.all(requiredAssets)
.then(() => renderingActive = true);