no materials applied and missing faces when exporting from blender to three.js

0
votes

I'm trying to export a jet I made in blender to three.js. the model shows up properly, but it's missing some faces and no materials are applied even though they are clearly present in json. Here's how it looks in blender: blender render

And here's how it looks in browser: three.js render

As you can see, most of the canopy is missing, parts of the fuselage and inlets as well. No materials are applied to any part and the coloring comes only from ambient light. Here's how it's called:

var x29;
function createFighter() {
    var loader = new THREE.JSONLoader();
    loader.load('x29.json', function(geometry, materials) {
        x29 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        x29.castShadow = true;
        x29.receiveShadow = true;
        scene.add(x29);
    });
}

No combination of changes in the exporter, triangulating the model or anything else produced any results. What am I doing wrong?

1
jsonthree.jsblender
I think you have some inward facing normals, try making your material double sided to get rid of the holes or fix in blender. As for applying materials, are you using texture maps? Texture images are loaded async, and must be loaded first. the base colors look incorrect, have you confirmed the material texture maps are in fact loaded and ready before calling THREE.Mesh() ? – Radio
I'm not using any texture maps, i'm not actually using any textures here, as I wanted to keep both complexity and size to the minimum. All the color in the screenshot from blender comes from the materials themselves. Double sided material did fix missing faces however, so thanks for that – evil professeur
I found this in regards, github.com/mrdoob/three.js/issues/6264 – Radio

1 Answers

0
votes

Turns out three will recognize, but won't apply materials created in cycles. blender render will. Faces were missing because of flipped normals, as @Radio pointed out.