How can I resolve issue with fbx not loading textures and colors?

Questions
,
1

When i try to load my fbx model on a site there are many warnings in console

123
123727×247 5.03 KB

How can I resolve this issue?

An example page is here

And my code is basically a standard code of the “Samba Dancing” example, only scripts are cdn.

<!DOCTYPE html>
three.js webgl - FBX loader 
<body>
	<div id="info">
		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
		Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
	</div>

	<script type="module">

		import * as THREE from 'https://unpkg.com/three@0.119.0/build/three.module.js';

		import Stats from 'https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js';

		import { OrbitControls } from 'https://unpkg.com/three@0.119.0/examples/jsm/controls/OrbitControls.js';
		import { FBXLoader } from 'https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/loaders/FBXLoader.js';

		let camera, scene, renderer, stats;

		const clock = new THREE.Clock();

		let mixer;

		init();
		animate();

		function init() {
            

			const container = document.createElement( 'div' );
			document.body.appendChild( container );

			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
			camera.position.set( 100, 200, 300 );

			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xa0a0a0 );
			scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

			const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
			hemiLight.position.set( 0, 200, 0 );
			scene.add( hemiLight );

			const dirLight = new THREE.DirectionalLight( 0xffffff );
			dirLight.position.set( 0, 200, 100 );
			dirLight.castShadow = true;
			dirLight.shadow.camera.top = 180;
			dirLight.shadow.camera.bottom = - 100;
			dirLight.shadow.camera.left = - 120;
			dirLight.shadow.camera.right = 120;
			scene.add( dirLight );

			// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

			// ground
			const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
			mesh.rotation.x = - Math.PI / 2;
			mesh.receiveShadow = true;
			scene.add( mesh );

			const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
			grid.material.opacity = 0.2;
			grid.material.transparent = true;
			scene.add( grid );

			// model
			const loader = new FBXLoader();
			loader.load( 'http://izgt-wp.tw1.ru/wp/wp-content/uploads/2020/11/Header.fbx', function ( object ) {

				mixer = new THREE.AnimationMixer( object );

				const action = mixer.clipAction( object.animations[ 0 ] );
				action.play();

				object.traverse( function ( child ) {

					if ( child.isMesh ) {

						child.castShadow = true;
						child.receiveShadow = true;

					}

				} );

				scene.add( object );

			} );

			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.shadowMap.enabled = true;
			container.appendChild( renderer.domElement );

			const controls = new OrbitControls( camera, renderer.domElement );
			controls.target.set( 0, 100, 0 );
			controls.update();

			window.addEventListener( 'resize', onWindowResize, false );

			// stats
			stats = new Stats();
			container.appendChild( stats.dom );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		//

		function animate() {

			requestAnimationFrame( animate );

			const delta = clock.getDelta();

			if ( mixer ) mixer.update( delta );

			renderer.render( scene, camera );

			stats.update();

		}

	</script>

</body>
2

Testing your model in creators3d model viewer shows all textures and colors intact (the warnings are still there.)

  1. Warnings appear because your exporter uses unsupported parameters and materials. If possible, convert your model to glb / gltf, this may resolve most of the warnings.
  2. Your model is not loading because of AnimationMixer code. Animation you’re trying to clip (object.animations[ 0 ]) does not seem to exist on your model.

s

1 Like
4

I tried to remove animation code, so error is gone. But warnings are still there so the problem most likely in unsupported parameters and materials

5

I suggest you import your FBX in Blender and then export to GLB.

1 Like
6

See this issue on GH:

The problem is you’re using a 3DS Max physically based material of some kind. FBX format doesn’t officially support PBR materials, so these get exported from Max to FBX in a non-standard way which the FBXLoader can’t read. See also this issue for the equivalent problem in Maya:

It should be easy enough to add support for these materials to the loader. They would map to MeshStandardMaterial or MeshPhysicalMaterial. It’s just a matter of tracking down what FBX parameters such as 3dsMax|Parameters|base_color_map correspond to which three.js material parameters. There are still likely to be a number of parameters that we can’t support as 3DS Max materials are much more complex than three.js materials so there would never be a perfect match (some parameters would have to be ignored).

Alternatively, here’s a couple of workarounds:

  1. Switch the materials in Max to use the non-PBR “Standard” material (not to be confused with the three.js MeshStandardMaterial which is a PBR material).
  2. Use a tool like FBX2glTF to convert the file.
  3. Load the file in Blender and export to glTF
  4. Use the Babylon glTF exporter for Max. They have extensive documentation here.

In each of 2-4 you are still likely to run into issue with the non-standard PBR material extensions. You’ll have to test these out and see what gives the best match to your original materials.