# Can I load 3dmodels from local?

**URL:** <https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350>\
**Category:** Coding Questions\
**Created:** [September 21, 2021, 9:47am UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350 "2021-09-21T09:47:30Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![yang](https://avatars.discourse-cdn.com/v4/letter/y/77aa72/32.png) [@yang](https://discourse.processing.org/u/yang)\
**Post date:** [September 21, 2021, 9:47am UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/1 "2021-09-21T09:47:30Z")

</div>

I’ve loaded a model using loadModel(), but it requires a path from the website. And because I can’t upload a file larger than 5M，I wonder if there is a way to load a model just from local (maybe createFileInput)?  
Thank you in advance. ![QQ截图20210921174528](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9741aad7c4517d0c2698503b8d0fe1ae57e91efd.png)

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [September 21, 2021, 10:21pm UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/2 "2021-09-21T22:21:27Z")

</div>

It’s a little tricky but it is definitely possible:

```auto
let input;
let m;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL)
  input = createFileInput(handleFile);
  input.position(10, 10);
}

function draw() {
  background(255);
  orbitControl(2, 1, 0.05);
  if (m) {
    background(0);
    // This will depend on your model (I'm using the standard teapot example)
    scale(1, -1, 1);
    translate(0, 10, 0);
    model(m);
  }
}

function handleFile(file) {
  loadStrings(
    file.data,
    lines => {
      // See: https://developer.mozilla.org/en-US/docs/Web/API/Blob
      let blob = new Blob([lines.join('\n')], { type: 'text/plain' });
      
      loadModel(
        // This creates a temporary URL that can be used to fetch
        // the data in the Blob.
        // It is necessary to add the "#ext=.obj" to the end because
        // loadModel() uses the file extension to determine what
        // kind of model to load (which is a horrible design, but I digress).
        URL.createObjectURL(blob) + "#ext=.obj",
        true,
        loaded => {
          m = loaded;
        }
      );
    }
  );
}

```

https://editor.p5js.org/Kumu-Paul/full/XdguTxVf3

---

<div class="post-metadata">

**Author:** ![yang](https://avatars.discourse-cdn.com/v4/letter/y/77aa72/32.png) [@yang](https://discourse.processing.org/u/yang)\
**Post date:** [September 22, 2021, 12:59am UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/3 "2021-09-22T00:59:17Z")

</div>

Wow! I tried your code and it worked! Thank you so much for the timely reply, I really appreciate it.

---

<div class="post-metadata">

**Author:** ![yang](https://avatars.discourse-cdn.com/v4/letter/y/77aa72/32.png) [@yang](https://discourse.processing.org/u/yang)\
**Post date:** [October 15, 2021, 2:59pm UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/4 "2021-10-15T14:59:47Z")

</div>

emm, there’s stil one thing that bothers me. When I use my custom shader, and load a model, it just disappear. it seems I need a way to reload shader. Could you please take a look on that？Thank you.

```auto
let input;
let m,m0,currentmodel;
function preload(){
  m0=loadModel('teapot.obj',true);
  debugger
  mandel=loadShader('shader.vert','shader.frag');
}
function setup() {
  
  createCanvas(windowWidth, windowHeight, WEBGL)
  input = createFileInput(handleFile);
  input.position(10, 10);
  noStroke();
}

function draw() {
  background(255);
  orbitControl(2, 1, 0.05);
  if (m) {
    currentmodel=m;}
  else{
    currentmodel=m0;
  }
    background(155);
    // This will depend on your model (I'm using the standard teapot example)
    scale(1, -1, 1);
    //translate(0, 10, 0);
  //mandel.setUniform(aPosition);
  mandel.setUniform('cmatrix',this._renderer._curCamera.cameraMatrix.mat4);
  mandel.setUniform('pmatrix',this._renderer._curCamera.projMatrix.mat4);
    shader(mandel);
    model(currentmodel);

}

function handleFile(file) {
  loadStrings(
    file.data,
    lines => {
      // See: https://developer.mozilla.org/en-US/docs/Web/API/Blob
      let blob = new Blob([lines.join('\n')], { type: 'text/plain' });
      
      m=loadModel(
        // This creates a temporary URL that can be used to fetch
        // the data in the Blob.
        // It is necessary to add the "#ext=.obj" to the end because
        // loadModel() uses the file extension to determine what
        // kind of model to load (which is a horrible design, but I digress).
        URL.createObjectURL(blob) + "#ext=.obj",
        true
      );
    }
  );
}

```

https://preview.p5js.org/yangshuzhan/embed/0rO0eylNghttps://editor.p5js.org/yangshuzhan/sketches/0rO0eylNg

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 17, 2021, 8:47am UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/5 "2021-10-17T08:47:58Z")

</div>

This is definitely weird. There’s no obvious reason why this wouldn’t work. I’ve verified that it doesn’t happen with the default shader, but I don’t see any reason why your shader would cause a problem. I’ve also verified that it’s not specific to my file input model loader code (the same issue occurs if you load a new model from a URL). Seems like a bug in p5.js as far as I can tell. Here’s my test sketch: [p5.js Web Editor](https://editor.p5js.org/Kumu-Paul/sketches/Ma2pur5l8)

---

<div class="post-metadata">

**Author:** ![yang](https://avatars.discourse-cdn.com/v4/letter/y/77aa72/32.png) [@yang](https://discourse.processing.org/u/yang)\
**Post date:** [October 17, 2021, 10:49am UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/7 "2021-10-17T10:49:40Z")

</div>

Note that it’s functional if you use two seperate shaders for the two objects. I guess it’s because when I change the model, the shader and it’s attributes doesn’t change accordingly? I’m overwhelmed.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 17, 2021, 8:32pm UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/8 "2021-10-17T20:32:59Z")

</div>

Ok, I figured it out: [Calling loadModel while a custom shader is in use breaks the existing shader. · Issue #5455 · processing/p5.js · GitHub](https://github.com/processing/p5.js/issues/5455)

This is a rather egregious p5.js bug. Basically loadModel calls outside of `preload()` are causing `setup()` to get re-run, which causes your preloaded shader to become invalid (because it is associated with a completely different WebGL context) 🤦‍♂️. Hopefully the p5.js maintainers will address this quickly because I would consider this a high priority bug. I might try to submit a PR for it.

---

<div class="post-metadata">

**Author:** ![yang](https://avatars.discourse-cdn.com/v4/letter/y/77aa72/32.png) [@yang](https://discourse.processing.org/u/yang)\
**Post date:** [October 18, 2021, 4:25am UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350/10 "2021-10-18T04:25:52Z")

</div>

Well done! This bug bothered me for weeks. Love you so much. 😇