Three.js model color difference from expected rendering

Question

I am trying to display a model I downloaded on Sketchfab which is not showing up as expected when I render it.

Above is the expected rendering

Above is the rendering I get in three.js.

How do I achieve results like the first picture? Does the issue lie with the model or the way I display it using three.js?

Here is my code:

import * as THREE from 'three'; 
            import { GLTFLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js';
            import { FBXLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/FBXLoader.js';
            import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
            
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10000 );
            camera.position.set( -50, 50, 1000 );
            camera.lookAt(0, 0, 0)
            //camera.position.set( , 0, 0 );
            //camera.lookAt(scene.position)
            const renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true});
            renderer.setSize( window.innerWidth, window.innerHeight);
            const color = 0xFFFFFF;
            const intensity = 10;
            const light = new THREE.DirectionalLight(color, intensity);
            light.position.set(-60, 60, 1060);
            //const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 0.5 );
            //scene.add( light );
          
                // Add a simple test cube to confirm the setup works
            const geometry = new THREE.BoxGeometry(1, 1, 1);
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);
                    document.getElementById("threejsbackdrop").appendChild( renderer.domElement );
                    const controls = new OrbitControls( camera, renderer.domElement );
                    controls.update();
            //import GLTFLoader from "../js/GLTFLoader.js"
            // Instantiate a loader
            const loader = new GLTFLoader();
            const fbxLoader = new FBXLoader()
            // Load a glTF resource
            loader.load('./black_hole.glb', function ( gltf ) {

                    
                    gltf.animations; // Array<THREE.AnimationClip>
                    gltf.scene; // THREE.Group
                    gltf.scenes; // Array<THREE.Group>
                    gltf.cameras; // Array<THREE.Camera>
                    gltf.asset; // Object
                    gltf.scene.receiveShadow = true;
                    
                    //console.log(gltf.scene)
                    
                    /*var box = new THREE.Box3()
                            .setFromObject( gltf.scene );
                            var center = new THREE.Vector3();
                            box.getCenter( center );
                            gltf.scene.position.sub( center )
                            //gltf.scene.position.x +=3
                            //gltf.scene.position.z += 3*/

                    scene.add( gltf.scene );
                   
                    

                },
                // called while loading is progressing
                function ( xhr ) {
                    //console.log(xhr)
                    //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                    if(( xhr.loaded / xhr.total * 100 ) == 100){
                        console.log("Finished Loading!")
                    }
                    
                },
                // called when loading has errors
                function ( error ) {
                    console.log(error)
                    console.log( 'An error happened' );

                }
            );
            function animate() {
                        requestAnimationFrame( animate );
                        var bg3dobj = scene.children.find(e => e.name == "Sketchfab_Scene")
                        
                        controls.update();
                        //updateLayers()

                        renderer.render( scene, camera );
                    };

                    animate();

Many thanks in advance!

Łukasz Daniel Mastalerz · Accepted Answer · 2025-03-31 19:30:09Z

1

Try add postprocessing...

import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'

// ...

const unrealBloom = new UnrealBloomPass()
effectComposer.addPass(unrealBloom)

https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html

edited Mar 31 at 19:30

answered Mar 31 at 19:10

Łukasz Daniel Mastalerz

2,6162 gold badges10 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js model color difference from expected rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related