The official docs has a pretty good example of how to add a .obj file to a scene.
const loader = new OBJLoader();
// load a resource
loader.load(
// resource URL
'models/monster.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
However, I am not sure how I would now go about manipulating the loaded object. The URL is used to load the object and then the loaded object is passed as the argument to the on load function, i.e., the first nameless function passed to loader.load. However, what would be the 'best' way to retain a reference to that object?
This is fairly simple. Just create a reference before you call the loading function.
const loader = new OBJLoader();
//Add a reference before loading model
var object;
//This is the same code, just without spaces/comments
loader.load('models/monster.obj', function ( object ) {
scene.add( object );
},
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.log( 'An error happened' );
});
//After loading, you can now manipulate the model
object.rotation.set(x, y, z);
object.position.set(x, y, z);
The one way I can manage does not seem great, but it works.
I could simply bind it to the current window or document:
function ( object ) {
scene.add( object );
window.obj = object; // binding it to the window
}
But this seems a little odd to me as this would bind it to global space. What if I wanted to keep the scope more contained, for example?