Load Three JS model with gltf loader in Django

Question

I am trying to load a Three JS model in a Django(3.0.3) app on a local environment.

Template:

<script>
    var address_to_model ="{% static 'models/matilda/scene.gltf' %}"; // Pass this variable to .js file
</script>
<script src="{% static 'js/matilda.js' %}"></script>

matilda.js:

var loader = new THREE.GLTFLoader( );
loader.load( address_to_model, function ( gltf ) {
        scene.add( gltf.scene );
    }, undefined, function ( error ) {
        console.error( error );
} );
renderer.outputEncoding = THREE.sRGBEncoding;

The page loads without any Django error and it shows the ThreeJS window which is working but the model is not loaded and in the Chrome error console, I get this error:

GET http://127.0.0.1:8000/matilda/models/matilda/scene.gltf 404 (Not Found)

I think it should not check this URL because I do not resolve it in urls.py and there is nothing in this address. It should load the model which is collected in the 'static/models/matilada' with collectstatic command.

I check these links but they do not help: * Django {% static 'path' %} in javascript file * Correctly accessing django static files from external javascript * Django: External JS using framework doesn't load * https://pypi.org/project/django-js-urls/

Answer 1

You need to host the website on an IP address, that lets the threejs gltf model to load.