THREE.js objetloader doesnt load texture from json files of 3d models exported from Blender

0
votes

So I have two issues right now.

  1. it seems objectloader never load the texture of 3d model from json files.

  2. I don't know somehow, the positions of 3d models change a little bit after THREE.js loader load them.

Here is what it should look like

Here is what it should look like

Here is what it looks like on my browser

Here is what it looks like on my browser

Here is THREE.JS code:

var loader = new THREE.JSONLoader();
loader.load("./script/treehouse.json",function ( geometry) {
    var mesh = new THREE.Mesh( geometry);
    $scene.add( mesh );
});

Export setting:

enter image description here

enter image description here

And here is how the json file looks like:

enter image description here

Update: Now since I chose dae format, it looks exactly the same from blender, however, textures are still not there, and the color of models change every time i open the dae files or refresh the page.enter image description here

1
three.jsblender

1 Answers

0
votes

I suggest using a different format than THREE.js internal format. It's been known to change a bit between revisions and will end up requiring you to re-export assets later on. You're better off using a format that is standard, like GLTF, Collada, OBJ, or FBX. Additionally, the THREE json format is pretty bloated and results in files that are pretty easy to read, but can be quite large.

I recommend GLTF 2.0 (gltf) or Collada (.dae) format. You will get smaller files and the format should remain more stable. If you use Gltf, you can also use Don McCurdys nice GLTF previewing tool to sanity check your files if you are having problems.

https://gltf-viewer.donmccurdy.com/

There is also the three.js editor that can be helpful for sanity checking files.. try dragging your json on here:

https://threejs.org/editor/