Blender model looks completely different in THREE.js

Question

I have a Blender model that I want to use on my website, where I use THREE.js, but when I load my GLTF file, it looks broken. Things are missing or are in the wrong spot, the lighting also seems a little off. I tried it in code and with the THREE.js editor.

This is what it looks like in Blender:

This is what it looks like in the THREE.js editor:

I have tried to play with the export setting of GLTF, with no success.

This is my code, although I think the problem does not lie here:

import * as React from 'react';
import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls, useGLTF } from '@react-three/drei';

const Model = () => {
    const gltf = useGLTF(require("../3DModel/object.glb")); // Replace with the path to your GLB model
    gltf.scene.scale.set(0.5, 0.5, 0.5);
    return <primitive object={gltf.scene} />;
};

const Umbrella = () => {
    return (
        <Canvas camera={{ position: [0, 0, 600] }} style={{backgroundColor:"none",position:"relative",width:"100%",height:"100%"}}>
            <ambientLight/>
            <pointLight position={[10, 10, 10]} />
            <Suspense fallback={null}>
                <Model />
            </Suspense>
            <OrbitControls />
        </Canvas>
    );
};

export default Umbrella;

I am not an expert in Blender, so I don't know if I forgot an important step. What am I doing wrong?

Answer 1

In my answer, there is no single definitive solution, but a couple of techniques that should help. In the end, every case is a bit different, and there is no magic checkbox to make it all work. GLTF materials and lighting models differ from the Blender ones, and also ThreeJS is not perfect in importing them. This is why there is no simple answer.

First, try to clean up the geometry in Blender as much as possible: apply all transformations and modifiers, check for loose vertexes, remove overlapping geometry leftovers from booleans or bevels etc. It also helps to name each part correctly, as it will help debugging it in JS. If it feels overwhelming, try to export one part at a time and see if export-import works fine for a spoke, a base etc.

On the ThreeJS side, I would try this (note the scene traversal that adjusts every object in the imported scene):

const Model = () => {
  const gltf = useGLTF(require("../3DModel/object.glb"))
  gltf.scene.scale.set(0.5, 0.5, 0.5);
  //traverse all objects in the scene and fix lighting
  gltf.scene.traverse((o) => {
     if (o.material && o.material.map) {
        // you can debug too: console.log(o.name);
        o.material.map.encoding = 3001; //== THREE.LinearEncoding
     }
  });
  return <primitive object={gltf.scene} />;

I am not suggesting that LinearEncoding is the right way to go about it, it really depends on how you set up the lighting in your scene. However, it should help to understand what tools are available to you to achieve optimal result. Beyond that, there are many tutorials on the internet teaching this task.