I recently created a basic 3D model in Blender and exported it as an .obj file. I'm now trying to load it using three.js and have the objects with 'clickable' in their name move along the Y-axis when clicked.
You can view the project here:
However, I've encountered an issue where the object names parsed from Blender don't match up correctly with the actual objects in the scene.
Loading and parsing:
var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event) {
object = event.content;
object.name = 'CustomObjects';
for(var i = 0; i < object.children.length; i++) {
//console.log(object.children[i]);
var properties = object.children[i].name.split('_');
if(properties[1] == 'clickable') {
object.children[i].clickable = true;
} else object.children[i].clickable = false;
}
object.rotation.x = 0.5;
object.rotation.y = 0.5;
scene.add(object);
});
loader.load('shop.obj', 'shop.mtl');
For example, two cubes in the center ('005_kiosek' and '010_kiosek2') should not be clickable, but they are. Upon inspection, the console reveals that their names are mistakenly labeled as '004_clickable' and '009_clickable'!
Here is my Blender file for reference:
I'm unsure if the issue lies with the JavaScript implementation or if Blender's export process is to blame. Any insights would be greatly appreciated!
Thank you,
Martin
P.S: Additionally, any ideas why the simple green and blue meshes aren't rendering properly?