Applying Phongmaterial to a loaded fbx

Hi everyone,

Ive tried about three million ways over three days to marry a MeshPhongMaterial with an fbx model Im loading, but Im not getting anywhere. I think its about time to turn to you magicians for help? Ive tried exporting the model with no materials, then with simple materials and then traversing (they never show up, all I get is a flat black model).
In all cases Im exporting from cinema4D using FBX 7.5. The problem seems to have so many possible points at which Im going wrong that I really dont know what else to do but ask you guys.

Here’s the latest iteration of my loader, which Im sure by now has more bugs than a … um… than an amazonian corpse… (sry tasteless metaphore)

		`Preformatted text`var streamlines = new FBXLoader();
			streamlines.load('...fbxmat1.fbx', function (object) {
					let logo = object.children[0];
					//const material = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 150 });
				const cube = new THREE.Mesh(logo, material);
				//	cube.material.needsUpdate = true
					cube.castShadow = true;
					cube.receiveShadow = true;
					cube.rotation.y = 291.5758;
					cube.position.set(0, 1.9, 0);
					cube.castShadow = true;
					cube.receiveShadow = true;
					cube.scale.multiplyScalar(0.14);
					scene.add(cube);
					console.log("scene add logo complete");
		});

Help would be greatly appreciated

First parameter of THREE.Mesh() is a geometry. In your case, logo can be Mesh or Object3D or Group, but not a geometry.

Thanks for your reply, Ive tried object there as well, even if I go

			var streamlines = new FBXLoader();
				streamlines.load('...fbxmat1.fbx', function (object) {
						
						const material = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 150 });
						const cube = new THREE.Mesh(object, material);
						cube.material.needsUpdate = true;
						cube.castShadow = true;
						cube.receiveShadow = true;
						cube.rotation.y = 291.5758;
						cube.position.set(0, 1.9, 0);
						cube.scale.multiplyScalar(0.14);
						scene.add(cube);
						console.log("scene add logo complete");

			});
					

Oh - hang on I think Im starting to see what you mean, but not exactly quite. I thought the first parameter was supposed to be a geometry. Where in the docs is that listed? I’ll try it with the other ones you said

So… I dont get what Im doing wrong… do you mean like

			var streamlines = new FBXLoader();
				streamlines.load('...fbxmat1.fbx', function (Mesh / Group / Object3D) {
						let Mesh / Group / Object3D = object.children[0];
						const material = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 150 });
						const cube = new THREE.Mesh(Mesh / Group / Object3D, material);
						cube.material.needsUpdate = true;
						scene.add(cube);
						console.log("scene add logo complete");

			});

Tried pretty much every combination of Mesh or Object3D or Group (each, not together with / ) but I still dont see the model anymore… even when Im only using Mesh or Group or Object3D in

const cube = new THREE.Mesh(logo, material);

Instead of logo. I don’t get it?

Thing is, Im coming from the example webGl_lights_rectAreaLight.html example, wherein the dude goes

const geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 200, 16 );
const matKnot = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0, metalness: 0 } );
const meshKnot = new THREE.Mesh( geoKnot, matKnot );
meshKnot.name = ‘meshKnot’;
meshKnot.position.set( 0, 5, 0 );
scene.add( meshKnot );

When he says “const meshKnot = new THREE.Mesh( geoKnot, matKnot );” , geoKnot is geometry, far as I can tell?

Help would be greatly appreciated

So here’s what I got

			var streamlines = new FBXLoader();
			streamlines.load('..fbxlogo3.fbx', function (object) {
					console.log("fbx is:", object);
					const model = object;
					const material = new THREE.MeshPhongMaterial({ color: 0xf0f0f0, shininess: 150, specular: 100  });
					model.traverse(function (model) {

						if (model.isMesh) {
							model.material = material;
							console.log("material is: ", material);
						}
					});
					console.log("model is: ", model);
				
				const burger = new THREE.Mesh(model, material);
			    console.log("burger is: ", burger);
				scene.add(burger);

				});

Does nothing. Whenever I tell it to use either Group or 3DObject or the ones you said, it tells me those are not defined. I don’t know how to define them. Please good Sirs, help me out a tiny bit more concisely?

From your last post.

Still, Mesh takes a geometry in the first parameter.
Your model is not a geometry, as object, that returned in the callback function, is Object3D or Group.

If you want to apply a new material to your loaded model, then it should be something like that:

			var streamlines = new FBXLoader();
			streamlines.load('..fbxlogo3.fbx', function (object) {
					console.log("fbx is:", object);
					const model = object;
					const material = new THREE.MeshPhongMaterial({ color: 0xf0f0f0, shininess: 150, specular: 100  });
					model.traverse(function (child) {

						if (child.isMesh) {
							child.material = material;
						}
					});
                    scene.add(model);
				});

If it still doesn’t work, then better to provide an editable working example, that demonstrates the issue (jsfiddle, codepen etc.)

Oof! That did it. Thank you very much. The problem seems to have been that I was using a Phongmaterial on the model but a Standardmaterial on the floor. Soon as I switched both to Standard it appeared on the model. I’m guessing if I switch both to Phong it’ll work as well. Thank you very much for your syntax help and for helping me take a couple first steps.