Cannot load fbx models on iOS browsers

Hello

I have spent several days trying to get 3D models to show on various browsers of multiple OS and never had any luck with loading fbx models on iOS regardless of the version of iPhone. iOS browsers, be it Safari or Chrome, only show a blank page while the browsers of other S, be it Mac or Android, load scenes in either .fbx or .glb format. I am in dire need of help from this forum.

The other thing I have tried was to reproduce the FBXLoader example at:

https://threejs.org/examples/webgl_loader_fbx.html

Even though the dancing model shows perfectly on any browsers including iOS browsers, my attempt to replicate only returned FBXLoader.js errors. The demo on the site above does not give any descriptions concerning the use of FBXLoader, either.

I asked the same question on Udemy to no avail. Please help me work out how FBXLoader can render models on iOS browsers.

Thank you in advance.

Try this in your IOS browser
FBX Loader - Three.js Tutorials (sbcode.net)

Check if you are not mixing the three es6 modules with common js libs, and how you declare the fbxloader.

The fbxloader does work well. It could be a simple problem with your script, or your model. Its hard to tell exactly without seeing it.

A common issue, if the same model works on desktop but not mobile devices, is that it requires too much memory for the mobile device. PNG and JPEG textures inflate on the GPU to much larger than their downloaded size.

Do you know how many textures the model uses, and what resolution they are?

Thanks for the replies. Because I have extracted the source code and scripts based on the html below, I’m quite sure I’ve cleared the mixing issue of JS modules and libs:

view-source:three.js webgl - FBX loader

Also, my model imports no external image files. It uses Phong and Blinn of Autodesk Maya. I have also read this article, and seeing that the models do render well with glTFLoader, I guess it’s to do with the way FBXLoader is declared or the script files are imported:

It is reassuring to hear FBXLoader works well, so I will try writing the loader all over again by examining the source more carefully.

I tried to duplicate the FBXLoader at three.js webgl - FBX loader making sure every file path was correct on the server:

https://gateways.site/webgl_loader_fbx.html

Oddly enough, Chrome returns the following error message in the console:

NURBSCurve.js:49490 Uncaught SyntaxError: Identifier ‘REVISION’ has already been declared

I checked the line in NURBSCurve.js, but the error didn’t make sense, so any help with troubleshooting would be appreciated.

To narrow down the scope, I tried to duplicate the same files used on the official site’s sample FBXLoader on my test server at https://gateways.site/webgl_loader_fbx.html and received the following error, so it’s now clear the error is due to the script files:

Uncaught SyntaxError: Identifier ‘REVISION’ has already been declared

Could you please tell me how you set up your script files to call FBXLoader?

I’ve created my custom FBXLoader script file and finally the FBXLoader worked. As I’ve noticed many developers were in pain trying to get FBXLoader working, I will include the important bits of the working FBXLoader script as follows — the rest are the same as a common glTF loader HTML:

import * as THREE from ‘https://threejsfundamentals.org/threejs/resources/threejs/r119/build/three.module.js’;
import {OrbitControls} from ‘https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/controls/OrbitControls.js’;
import {FBXLoader} from ‘https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/loaders/FBXLoader.js’;

var fbxloader = new FBXLoader();
fbxloader.load( ‘[path to fbx model file]’, function ( object ) {
object.position.set( 0, 0, 0);
scene.add ( object );
} );

Defining the instance of FBXLoader() as FBXLoader returns a constructor error, so I defined it as fbxloader instead. With all that said and done, I will get rid of https://gateways.site/webgl_loader_fbx.html from the test server.