Load obj File direct into Obejct3D or in variable

Questions
1

Hello, so far I’ve been creating my geometries exclusively in ThreeJS, deforming them, and then animating them.

Now I want to load an OBJ or GLTF and then generate a variety of these elements from it.

If I simply add the model to the scene, it works perfectly.

var objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('/obj/myObject.obj', function (object) {
scene.add(object);
object.position.z = 100;
object.position.y = 10;
object.rotation.x = 250;
});

Unfortunately, I can’t figure out how to load the model into a variable that I can then add to any Object3D. Here’s a simplified example of a box:

const createBox = () => {
let boxGeometry = new THREE.BoxGeometry(1, 1, 1);
let boxMaterial = new THREE.MeshStandardMaterial({
color: 0x33ff33,
shading: THREE.FlatShading,
});
let boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
let box3D = new THREE.Object3D();
box3D.add(boxMesh);
return box3D;
}

I can now generate as many of this box as I want and add them to the scene.

How does this work with the .obj file?

Can I somehow load the .obj into a variable, then I could extract the individual geometries and create a mesh with material? Or is there a way to get an Object3D from the loader?
2

If you want use loaded “object” later you can loadAsync(modelPath) method witch returns Promise with loaded object.

const characterData = await loader.loadAsync(modelConfig.modelPath);

Like here:

Or do this in callback like in this three.js example:

something like this:

const scene = new THREE.Scene();
let model;
const loader = new GLTFLoader();
loader.load("models/gltf/Soldier.glb", function (gltf) {
  model = gltf.scene;
  //....
  setupDefaultScene();
});

function setupDefaultScene() {
  const model1 = SkeletonUtils.clone(model);
  const model2 = SkeletonUtils.clone(model);
  scene.add(model1, model2);
}
3

You can traverse any Three.js object and save/modify along the way whatever you like.

let mesh1, mesh2, savedGeometry, savedMaterial;
...
...
    const loader = new GLTFLoader(MANAGER)
                    .setPath( 'models/gltf/' )
                    .setCrossOrigin('anonymous');

 
    loader.load( 'Your.glb', async function ( gltf ) {
        
        const model = gltf.scene;
                
        model.traverse( function(item) {
            
            if (item instanceof THREE.Mesh ) {
                
                if ( item.name == 'Object1' ) mesh1 = item;
                if ( item.name == 'Object2' ) mesh2 = item;
                if ( item.name == 'Object3' ) {
                    savedGeometry = item.geometry;
                    savedMaterial = item.material;
                    item.visible = false;
                }

            }
                        
        })     // end-of model.traverse

    } ,
4

I was now able to load the files and then modify them.

Alternatively, since the project is implemented in VueJs, I loaded all the .obj files into an array before starting the scene and then parsed them with the objloader.