Issue with .fbx model being flat

Questions
, , ,
1

Hello. I’ve got and .fbx model that I need to display on my page. It was made in an app called Tri D Corpus - from what I know it is some CAD/CAM app to create 3d models of furniture. I’ve tested that model in page called https://3dviewer.net/ and it looks very good there

But when I try to load in my app using FBXLoader it looks flat

Same issue is using this online model viewer so I’m not sure if there is anything I can do about it https://www.creators3d.com/online-viewer

Here is also a file that I’m trying to display
stol_cinema.fbx (146.5 KB)

import React, { useEffect, useState } from "react";
import { useLoader } from "react-three-fiber";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { MeshStandardMaterial } from "three";

const FBXModelViewer = ({ url }) => {
	const fbx = useLoader(FBXLoader, url);
	const [model, setModel] = useState(null);

	useEffect(() => {
		if (fbx) {
			const defaultMaterial = new MeshStandardMaterial({ color: 0xaaaaaa });

			fbx.traverse((child) => {
				if (child.isMesh) {
					child.castShadow = true;
					child.receiveShadow = true;

					// Ensure each mesh has a material
					if (!child.material || child.material.length === 0) {
						console.warn(`Material missing for part: ${child.name}`);
						child.material = defaultMaterial;
					} else {
						console.log(`Material for ${child.name}:`, child.material);
					}
				}
			});
			setModel(fbx);
		}
	}, [fbx]);

	return model ? <primitive object={model} /> : null;
};

export default FBXModelViewer;
2

It seems that adding child.material.side = DoubleSide; fixed the issue… :smiley:

2 Likes