How can I load SpecularFactor Map textures from .FBX models?

I am working to upload a .FBX model with metallic textures, however, I am receiving the error:

THREE.FBXLoader: SpecularFactor map is not supported in three.js, skipping texture.

Is there way to get around this?

As noted within screenshots, the model is not loading correctly. Here is my code sample below:

if ( WEBGL.isWebGLAvailable() ) {

                console.log("webgl is available");

            } else {

            var warning = WEBGL.getWebGLErrorMessage();
            document.getElementById( 'container' ).appendChild( warning );

            console.log("webgl is NOT available");

            }

            var camera, controls, scene, renderer;

            init();
            animate();

            function init(){

                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000000);
                camera.position.z = 1000;

                controls = new THREE.TrackballControls( camera );
                controls.addEventListener('change', render);

                scene = new THREE.Scene();

                ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
                scene.add(ambientLight);

                light = new THREE.PointLight(0xffffff, 0.8, 0.8)
                light.position.set(3, 6, -3);
                light.castShadow = true;
                light.shadow.camera.near = 0.01;
                light.shadow.camera.far = 25;
                scene.add(light);

                ambientLight = new THREE.AmbientLight(0xffffff, .5);
                scene.add(ambientLight);

                // CUBE

                var geometry = new THREE.CubeGeometry(100, 100, 100);
                var material = new THREE.MeshNormalMaterial();
                var mesh = new THREE.Mesh( geometry, material );
                scene.add(mesh);

                
                // iPad

                var iPadFBX = new THREE.FBXLoader(
                );

                iPadFBX.load( '../models/iPad/iPad.fbx', function ( object ) {
                    scene.add( object );
                
                } );


                renderer = new THREE.WebGLRenderer({
                    alpha: true 
                });

                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);
                 
            }


            
            function animate(){

                requestAnimationFrame( animate );
                controls.update();
            }

            function render(){

                renderer.render(scene, camera );
            
            }

There is already a specular map supported by the FBXLoader. The Specular Factor map is a second map used to attenuate the specular color (provided by the specular color and specular map).

It’s not possible to support this using the default three.js materials, so it’s currently skipped by the loader and that warning is displayed. It’s best to adjust your materials in the modelling program to avoid this map.

I’ve purchased this model from CGTrader, and am looking into getting commissioning the creator to update it on my behalf.

Is there some place that I may find documentation that outlines the specifications that I’m looking for? I’ve already reached out to the creator, but he’s not exactly understanding what changes need to be made.

Thanks for your assistance, looeee :sweat_smile:

1 Like

In general, the main problem with transferring assets between different programs is the materials.
Often, it’s easier to just recreate the materials in three.js.

Otherwise, the FBXLoader create MeshPhongMaterial, so you can read through the docs there to see what maps are available.