Using three.js JSONloader to load file at specified url (Django)

Question

I am trying to load a model in Three.js, but am having trouble. I think the issue is that the loader is unable to find the model file, but I am not sure.

The following is my file hierarchy:

• Static
  • admin
    • js
      • models
        • model_file.js
      • load_model.js
• web_app_name
  • templates
    • index.html

I have the following code in load_model.js:

var loader = new THREE.JSONLoader(  );
var onGeometry = function(geom, mats) {
    var mesh = new THREE.Mesh( geom, new THREE.MeshFaceMaterial( mats ) );
    scene.add(mesh);
};
var model_url = "model_file.js";
loader.load(model_url, onGeometry);

I load this in the index.html file via the django load static:

{% load static from staticfiles %}
    <script src={% static "admin/js/load_model.js" %}></script>

When I check the result in the browser, it looks for the file "/index/model_file.js". I need it to instead look for the file "Static/admin/js/models/model_file.js".

So my question put more succinctly is: How do I tell the THREE.JSONloader to look for the file in a place outside of the current page? If this is not possible, how can I get it to correctly load the model?

Thanks for all help.

Answer 1

Use a more descriptive url for your model file ?

Either a relative one

var model_url = ".models/model_file.js";

Or an absolute one

var model_url = "/admin/js/models/model_file.js";

It will be easier to debug, at least.