Search code examples
javascriptjsonthree.jsblenderloader

Accessing multiple objs using .getObjectById() with JSONLoader in Three.js

Is it possible to differentiate between the meshes within one .js file exported from blender and animate them separately using Three.js?

The cube I would like to select is named "Cube" loads properly. However, when I try to get it by Name or Id, it doesn't recognize the var item1.

loader = new THREE.JSONLoader();

loader.load('engine.js', function (geometry, materials) {
  var mesh, material;

  material = new THREE.MeshFaceMaterial(materials);
  mesh = new THREE.Mesh(geometry, material);
  mesh.scale.set(1, 1, 1);

  var item1 = scene.getObjectByName("Cube");
  item1.position.x = 15;

  scene.add(mesh);
});

I found this post but it seems unresolved: Three.js load multiple separated objects / JSONLoader

What is the best approach to loading multiple meshes via JSONLoader? I'd prefer to load them together as one .js file and just select the ones I would like to animate.

Thanks for your help!

Solution

  • In your blender scene you need to name every mesh you want to access independently in three.js. Then you can use Object3D.getObjectByName() to access your mesh in three.js.