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

**URL:** <https://discourse.threejs.org/t/how-can-i-resolve-issue-with-fbx-not-loading-textures-and-colors/20987>\
**Category:** Questions\
**Tags:** fbx, loaders\
**Created:** [November 25, 2020, 7:22am UTC](https://discourse.threejs.org/t/how-can-i-resolve-issue-with-fbx-not-loading-textures-and-colors/20987 "2020-11-25T07:22:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Natalia\_Karelina](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/natalia_karelina/32/14774_2.png) [@Natalia\_Karelina](https://discourse.threejs.org/u/Natalia_Karelina)\
**Post date:** [November 25, 2020, 7:22am UTC](https://discourse.threejs.org/t/how-can-i-resolve-issue-with-fbx-not-loading-textures-and-colors/20987/1 "2020-11-25T07:22:08Z")

</div>

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

 ![123](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/43ee61ccd2a0ef564c8023ce8fe070de08eb31b7.png)

How can I resolve this issue?

An example page is [here](http://izgt-wp.tw1.ru/three/)

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>

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 25, 2020, 7:56am UTC](https://discourse.threejs.org/t/how-can-i-resolve-issue-with-fbx-not-loading-textures-and-colors/20987/2 "2020-11-25T07:56:58Z")

</div>

Testing your model in [creators3d model viewer](https://www.creators3d.com/online-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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/01eb21b24f590549a6f0066430ef3b2c60bc2995.png)

---

<div class="post-metadata">

**Author:** ![Natalia\_Karelina](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/natalia_karelina/32/14774_2.png) [@Natalia\_Karelina](https://discourse.threejs.org/u/Natalia_Karelina)\
**Post date:** [November 25, 2020, 8:19am UTC](https://discourse.threejs.org/t/how-can-i-resolve-issue-with-fbx-not-loading-textures-and-colors/20987/4 "2020-11-25T08:19:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 25, 2020, 9:27am UTC](https://discourse.threejs.org/t/how-can-i-resolve-issue-with-fbx-not-loading-textures-and-colors/20987/5 "2020-11-25T09:27:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [November 26, 2020, 6:32am UTC](https://discourse.threejs.org/t/how-can-i-resolve-issue-with-fbx-not-loading-textures-and-colors/20987/6 "2020-11-26T06:32:17Z")

</div>

See this issue on GH:

> <https://github.com/mrdoob/three.js/issues/16542>
>
> Description of the problem
> When attempting to load the FBX file contained within the example below, we are seeing the following error:
> ...

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:

> <https://github.com/mrdoob/three.js/issues/15927>
>
> PBR materials are exported to FBX from Maya using a proprietary extension ( Maya|xxxx).
> A couple of these were added in #15844...

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](https://github.com/facebookincubator/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](https://doc.babylonjs.com/extensions/Exporters/3DSMax_to_glTF).

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.
