Skip to Content

Loading Screen in Three.js

| Three.js

Three.js Loading IconFor this tutorial, we’ll be creating a Loading Screen in Three.js using the html5 Heartcode Canvasloader for our loading icon and the three.js LoadingManager to tell it when to appear.

If you’re new to Three.js please see Creating a Basic Scene in Three.js

Imagine, you’d like to set up an animation using a loading icon or countdown and you’d like it to start when the document is ready but finish only after all assets have successfully loaded. Without knowing when each asset is complete and how many assets you plan to keep track of, you’d have to do a bit of tool building.

However, the LoadingManager is a handy function built into three.js that does just what we need. It tracks the progress, errors and completion of all loaded assets that are hooked to it. To see it in use, view the console log of this example on the three.js website.

One small drawback… As of this writing,?LoadingManager only works with the ?OBJLoader? and ImageLoader. JSONLoader and? ImageUtils.loadTexture should really be using LoadingManager as well but peraps that may be implemented later.

That being said, you can still using this tutorial to accomplish the same task using the callback events of whatever loaders you use.


Calling the THREE.LoadingManager

//initialize the manager to handle all loaded events (currently just works for OBJ and image files)
manager = new THREE.LoadingManager();

manager.onProgress = function (item, loaded, total) {
    console.log(item, loaded, total);
manager.onLoad = function () {
    console.log('all items loaded');
manager.onError = function () {
    console.log('there has been an error');


LoadingManager has three events:?onProgress,?onLoad, and?onError. The names are self explanatory. One thing to note is that onProgress has three arguments:

  • item (the url of the item just loaded)
  • loaded (the amount of items that have been loaded)
  • total (the total amount items that need to be loaded)

these would be handy for displaying loaded and loading progress to the front end.


Using LoadManager in THREE.OBJLoader

Now we just need to hook it into our model loader

material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

var loader = new THREE.OBJLoader(manager);

loader.load(path, function (object) {
    object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            child.material = material;



Here we’ve created a material, created a new OBJLoader and passed the manager into it as a parameter.? Passing this in is all we need to do to connect the manager to the OBJ model Loader. All it’s events will now be automatically recorded by the manager. See an example post of Importing a Model Into Three.js

Make sure you’ve included this script to allow for OBJ importing if you haven’t done so already. Should look something like the below

<script src="js/loaders/OBJLoader.js"></script>

At this point, the main functionally is established all you need is an animated icon to represent what we’ve set up.

The Loading Animation

There are many ways to accomplish this, but I find HeartCode has a nice smooth effect and it uses html 5 rather than sometimes choppy animated gifs. You can check it out it here

First we need to include this script:

<script src=""></script>

Make sure you’ve included jquery in your project, then paste this into the main js file.

//to display loading animation before it's ready

$(document).ready(function () {
    if ($('.loading-container').length) {

        // to show loading animation
        $imgloader = $('.loading-container');
        $loadingimg = $('<div id="canvasloader-container" class="onepix-imgloader"></div>');

        // $loadingimg.attr("src","images/flexslider/loading.gif");

        // canvasloader code
        var cl = new CanvasLoader('canvasloader-container');
        cl.setColor('#4f4f4f'); // default is '#000000'
        cl.setDiameter(45); // default is 40
        cl.setDensity(75); // default is 40
        cl.setRange(0.7); // default is 1.3
        cl.setSpeed(3); // default is 2
        cl.setFPS(22); // default is 24; // Hidden by default



Basically what this does is add the loading animation to anything that is wrapped in the element with the loading-container class. It does so by checking if it has an element nested within it (in our case this will be the canvas) and if so, it appends the CanvasLoader to a new containing div that we absolutely position over the contained canvas. Until we turn this off, the animation will just keep playing.


.onepix-imgloader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;

/*hide the second element in the loading container (first element is the leading img)*/
.loading-container > *:not(.onepix-imgloader) {

.loading-container {
    position: relative;
    background: #dfdfdf;
    min-height: 40px;
    height: 400px;

#container {
/*    min-width: 400px;*/
    min-height: 400px;


<div class = "loading-container">
    <div id="container">                     

Tying It Together

Now go back to your js code and change the manager.onLoad code to call a new function

manager.onLoad = function () {
    console.log('all items loaded');

Now paste in the function to fade out our loading animation when it’s called.

function allItemsLoaded() {
    // fade in content (using opacity instead of fadein() so it retains it's height.
    $('.loading-container > *:not(.onepix-imgloader)').fadeTo(8000, 100);


If all is well, there should be a loading animation that fades away when your .obj is loaded. You may have to tweak this to suit your project, but that’s the baisc idea. Also, you can use this for images or textures for example:

var texture = new THREE.Texture();

var loader = new THREE.ImageLoader( manager );
loader.load( 'textures/my-texture.jpg', function ( image ) {
    texture.image = image;
    texture.needsUpdate = true;
} );

More information on loading textures in Three.js

That’s it! Bye for now!

Share This