Hey,
So I have been trying to upload a model that looks like a Beetle using two different file formats. The .obj loader and file worked well together and render the Beetle to screen, which looks like this:
But the problem is that I want to animate the Beetle and from what I understand, it can only be done with GLTF or FBX files. In this effort, I tried to use the FBXLoader, which apparently would output an object which would hold an animations property, which I could use then to animate my Beetle, to make it fly or walk for example as I scroll, but it seems like the newest update on the FBXLoader has broken something, which I can’t seem to be able to track down.
Here is my code which loads the 3D model, as you can see it takes a file name and a file type:
function load3DModel (modelFileName, fileType) {
let material;
let assetURL = 'blackMarble5.jpg';
textureLoader.load(RELATIVE_URL + assetURL, (texture) => {
if (enableLogging === true) {
console.log('Texture of the name ', assetURL, ' successfully loaded ', texture);
}
material = new THREE.MeshPhongMaterial({ map: texture });
if (fileType === 'obj') {
objectLoader.setPath(RELATIVE_URL);
objectLoader.load(modelFileName, function(object) {
if (enableLogging === true) {
console.log('.OBJ object successfully loaded', object);
}
object.traverse((node) => {
if (node.isMesh) {
node.material = material
}
})
if (enableLogging === true) {
console.log('Successfully added texture to different meshes of the OBJ object.');
}
object.position.y = 90;
object.position.z = 0;
object.rotation.y = 158 * 0.02;
object.scale.x = object.scale.y = object.scale.z = 1.4;
object.name = 'mainObject';
object.visible = true;
scene.add(object);
})
} else if (fileType === 'fbx') {
fbxLoader.setPath(RELATIVE_URL);
fbxLoader.load(modelFileName, (object) => {
if (enableLogging === true) {
console.log('.FBX object successfully loaded', object);
}
object.traverse((node) => {
if (node.isMesh) {
node.material = material
}
})
if (enableLogging === true) {
console.log('Successfully added texture to different meshes of the FBX object.');
}
object.position.y = 90;
object.position.z = 0;
object.rotation.y = 158 * 0.02;
object.scale.x = object.scale.y = object.scale.z = 1.4;
object.name = 'mainObject';
object.visible = true;
scene.add(object);
})
}
})
}
When I use this function with the .obj file, it works, but when I use it with the .fbx file, it breaks.
load3DModel('beetle.fbx', 'fbx'); // Doesnt work
load3DModel('beetle.obj', 'obj'); // Works
The output for the FBXLoader is this:
And the screen output renders the background, but nothing is rendered.
Based on the first error displayed in the console (TypeError: lParentGSM.copy(…).invert is not a function) I decided to go into the FBXLoader.js file at around line 4,000 and saw that the lParentGSM variable is an instance of the Matrix4 class, which is imported from the three.module.js file. Because it says in the error message that lParentGSM.copy(…).invert is not a function, I went to check the Matrix4 class in three.module.js to see if it had an invert function and it doesn’t seem to have one, which leads me to believe that it might be related to that?
Additionally, I also noticed that @Mugen87 made a commit to the FBXLoader 7 hours ago, renaming the function inverse to invert.
I’m not exactly sure what to do or how to move forward with this. Also, please let me know if I am incorrect and if it is possible to trigger complex animations, such as wings flying, with .obj files.
Thank you in advance