mrdoob/three.js — Issue #710: Problem loading models from blender
Author: CoreyTaylor666
Created: 2011-10-31 15:37:27+00:00
State: open

Good day.

I'm trying to set up a scene, with objects exported from blender. The problem is, I can't see the materials/textures on the objects, which should have been loaded from the .js files exported from blender, right?

There is a total of 4 objects I modelled:
- Table, with a texture (mesh shows up only when I manually assign a color).
- Ring, no textures, only material (shows up just fine)
- Glass ball, no textures, material appears to load, but no transparency.
- Stethoscope, with two textures, mesh does not show up (I keep getting the error: Uncaught TypeError: Cannot read property 'length' of undefined)

Since the stethoscope didn't show up, I replaced it with the default monkey mesh from blender, the model loaded fine, and I could assign a color. But what about the textures on the other objects?

Thanks in advance for the help. This is my code:

var container,camara,cenario,luz_ambiente,luz_pontual,renderizador;
var width=500,height=500;
var mesa,material_mesa,estetoscopio,material_estetoscopio,ring,material_ring,esfera,
material_esfera,monkey,material_monkey;

function inicializar(){

container = document.getElementById("container");
//inicializar camara
camara = new THREE.PerspectiveCamera(45,width/height,0.1,100000);
camara.position.x = 50;
camara.position.y = 50;
camara.position.z = 50;
//inicializar cenario
cenario = new THREE.Scene();

//inicializar luz ambiente
luz_ambiente = new THREE.AmbientLight(0xFFFFFF);
luz_ambiente.position.x = 0;
luz_ambiente.position.y = 10;
luz_ambiente.position.z = 30;
cenario.add(luz_ambiente);

luz_pontual = new THREE.DirectionalLight(0xFFFFFF, 1.5);
luz_pontual.position.x = 50;
luz_pontual.position.y = 50;
luz_pontual.position.z = 50;
luz_pontual.position.normalize();
cenario.add(luz_pontual);

//inicializar renderizador do WebGL
renderizador = new THREE.WebGLRenderer( {antialias: true} );
renderizador.setSize(width, height);
container.appendChild(renderizador.domElement);

console.log(">>> A tentar carregar mesa.js")
var loader_mesa = new THREE.JSONLoader();
loader_mesa.load({model: "Models/mesa.js", callback: carregar_mesa});

console.log(">>> A tentar carregar estetoscopio.js")
var loader_estetoscopio = new THREE.JSONLoader();
loader_estetoscopio.load({model: "Models/estetoscopio.js", callback: carregar_estetoscopio});

console.log(">>> A tentar carregar ring.js")
var loader_ring = new THREE.JSONLoader();
loader_ring.load({model: "Models/ring.js", callback: carregar_ring});

console.log(">>> A tentar carregar esfera.js")
var loader_esfera = new THREE.JSONLoader();
loader_esfera.load({model: "Models/esfera.js", callback: carregar_esfera});

console.log(">>> A tentar carregar monkey.js")
var loader_monkey = new THREE.JSONLoader();
loader_monkey.load({model: "Models/monkey.js", callback: carregar_monkey});
//carregar_esfera();

camara.lookAt(cenario.position);

}

function carregar_monkey(geometry){

if(geometry){console.log("geometria ok...");}
else{console.log("geometria falhou...");}

geometry.materials[0][0].shading = THREE.FlatShading;
material_monkey = new THREE.MeshLambertMaterial({
color: 0xFFD700});

if(material_monkey){console.log("material ok...");}
else{console.log("material falhou...");}

monkey = new THREE.Mesh( geometry,material_monkey);
monkey.scale.x = monkey.scale.y = monkey.scale.z = 4;

if(geometry){console.log("mesh ok...");}
else{console.log("mesh falhou...");}

cenario.add(monkey);
renderizar();

}

function carregar_esfera(geometry){

if(geometry){console.log("geometria ok...");}
else{console.log("geometria falhou...");}

geometry.materials[0][0].shading = THREE.FlatShading;
material_esfera = new THREE.MeshFaceMaterial();
if(material_esfera){console.log("material ok...");}
else{console.log("material falhou...");}

esfera = new THREE.Mesh( geometry,material_esfera);
esfera.scale.x = esfera.scale.y = esfera.scale.z = 4;

if(geometry){console.log("mesh ok...");}
else{console.log("mesh falhou...");}

cenario.add(esfera);
renderizar();

}

function carregar_ring(geometry){

if(geometry){console.log("geometria ok...");}
else{console.log("geometria falhou...");}

geometry.materials[0][0].shading = THREE.FlatShading;
material_ring = new THREE.MeshFaceMaterial();
if(material_ring){console.log("material ok...");}
else{console.log("material falhou...");}

ring = new THREE.Mesh( geometry,material_ring);
ring.scale.x = ring.scale.y = ring.scale.z = 4;

if(geometry){console.log("mesh ok...");}
else{console.log("mesh falhou...");}

cenario.add(ring);
renderizar();

}

function carregar_estetoscopio(geometry){

if(geometry){console.log("geometria ok...");}
else{console.log("geometria falhou...");}

geometry.materials[0][0].shading = THREE.FlatShading;
//material_estetoscopio = new THREE.MeshFaceMaterial();
//material_estetoscopio = new THREE.MeshLambertMaterial(( { color: 0xffffff } ));
material_estetoscopio = new THREE.MeshBasicMaterial();
if(material_estetoscopio){console.log("material ok...");}
else{console.log("material falhou...");}

estetoscopio = new THREE.Mesh( geometry,material_estetoscopio);
estetoscopio.scale.x = estetoscopio.scale.y = estetoscopio.scale.z = 4;

if(geometry){console.log("mesh ok...");}
else{console.log("mesh falhou...");}

cenario.add(estetoscopio);
renderizar();

}

function carregar_mesa(geometry){

if(geometry){console.log("geometria ok...");}
else{console.log("geometria falhou...");}

geometry.materials[0][0].shading = THREE.FlatShading;

material_mesa = new THREE.MeshLambertMaterial({
color: 0xCC0000
//map: THREE.ImageUtils.loadTexture("Models/crate.gif")
});

if(material_mesa){console.log("material ok...");}
else{console.log("material falhou...");}

mesa = new THREE.Mesh( geometry,material_mesa);
//mesa.position.x = mesa.position.y = mesa.position.z = 0;
mesa.scale.x = mesa.scale.y = mesa.scale.z = 4;

if(geometry){console.log("mesh ok...");}
else{console.log("mesh falhou...");}

cenario.add(mesa);

renderizar();
}

function renderizar(){
if(mesa){console.log("mesa -> OK!")}
if(estetoscopio){console.log("estetoscopio -> OK!")}
if(ring){console.log("ring -> OK!")}
if(esfera){console.log("esfera -> OK!")}
if(monkey){console.log("monkey -> OK!")}

renderizador.render(cenario, camara);

}