Hello!
I’m having trouble importing an FBX file in a three.js website. The FBX file opens correctly in Maya but in my three.js website, the FBX file appears distorted.
The file also opens correctly on https://3dviewer.net/ which uses three.js as mentioned on its GitHub page. It also opens correctly on Maya FBX Reviewer (https://apps.autodesk.com/MAYA/en/Detail/Index?id=6979630331069053932&appLang=en&os=Win64)
I’m using the latest version “0.162.0”.
Files Link: Three - Google Drive
BUG SCREENSHOT
CORRECT SCREENSHOT
My Code:
let scene, renderer, camera, stats;
let model, skeleton, mixer, clock;
let animationActions = [], activeAction;
let cameraZoom = 100;
let animationSpeed = 0.25;
init();
function init() {
const rendererContainer = document.getElementById('renderer');
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(2 * cameraZoom, 3 * cameraZoom, 5 * cameraZoom);
camera.lookAt(0, 1, 0);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
renderer = new THREE.WebGLRenderer();
rendererContainer.appendChild(renderer.domElement);
const fbxLoader = new FBXLoader()
fbxLoader.load(
'models/fbx/human.fbx',
(fbx) => {
model = fbx;
scene.add(model);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.log(error)
}
)
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate()
}
Please help. 
Thank you,
Naresh B.
Many FBX files only look correct once one of the animations is played on the model.
The model is distorted even when playing animation. Is there an error in how I’m loading the FBX model?
Not really. Can you try re-exporting from maya as .glb (gltf) format and use the GLTFLoader() ?
GTLF works without any issues. My website will allow users to view their FBX files, so I must ensure the FBX loads correctly. The same FBX file opens correctly on https://3dviewer.net/ which also uses three.js but in my case, it’s getting distorted.
Perhaps its a version conflict… make sure you’re either getting the latest threejs, or try different versions to see if the behavior changes…
The source for that 3dviewer.net is here: GitHub - kovacsv/Online3DViewer: A solution to visualize and explore 3D models in your browser.
Maybe you can figure out how they are loading fbx differently?
I’ve attempted various versions, but the issue persists across all of them. I’m currently attempting to understand the FBXLoader code in 3dviewer, but as I’m relatively new to JavaScript, I’m encountering difficulties. I’ll keep updating here if I come across any solutions, in hopes that it may prove helpful to others.
@Naresh_Bisht you can try using my ASSIMP Viewer to load and then re-export your model to FBX format which might work with three.js loader.
My FBX Viewer shows the original model distorted but shows re-exported model properly.
Here is re-exported FBX file.
human re-export.zip (253.1 KB)
@GitHubDragonFly Thanks for the reply. Yes, the exported model loads correctly but the model’s polygons are not preserved. The exported model looks smooth while the original looks like low poly. Do you have any idea why the original is not loading correctly? Can I export the same model with the same polygons which loads correctly with ASSIMP Viewer?
Edit:
Also the animations does not play correctly on the model exported with ASSIMP Viewer
@Naresh_Bisht neither three.js nor assimp seem to have dedicated developers for FBX format, so fixing any issues might take time. Not to mention that my viewers might also have certain issues.
My ASSIMP Viewer is a little bit complex since it is using the assimp library to process FBX and then convert it to GLB format and pass it on to three.js for displaying.
Animations are tricky issue but I am aware of at least this issue reported in the assimp repository.
You might switch between smooth and low poly looks, in either FBX or the ASSIMP viewer, by clicking the F button.
All my viewers should be used as an alternative option to hopefully see the model and possibly export it to different formats.
1 Like
@GitHubDragonFly Thank you I will check out ASSIMP lib and try to fix the animation issue if I can.
check yout animation bones names and compare to fbx bones on your 3D editor (blender).
a way is object.getObjectByname(‘bone_name’)
check if hip as a children name spine, spine have spine1, 2…
i see this error when i try to atach bones animation with incorrect or non existent bones on model.
Also, the error looks like a 90 degree rotation of the bones, which is the same as the transformation that gltf exporter applies to fix bone orientation to work with threejs, so it may be related… but skeleton/bone problems can be really tricky to fix when you don’t have control over the export process.
specifically bones from FBX use the Z axis as the axis along the bones, but iirc three uses the Y axis. It may be possible to fix by catenating a -90 degree rotation on the X axis in local space onto the bones after it’s loaded.
