Render a glb file in html file color is not showing

Questions
,
1

i am render a glb format file in html but it’s not showing correctly it’s showing with out color this is my code` 

<script>
    // Initialize Three.js variables
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();

    // Disable gamma correction
    renderer.outputEncoding = THREE.LinearEncoding;
    
    

    // Set renderer size
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Add renderer to the container in the HTML
    document.getElementById('container').appendChild(renderer.domElement);

    // Add light to the scene (optional)
    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);

    // Load the GLTF file
    var loader = new THREE.GLTFLoader();
    loader.load('bike.glb', function(gltf) {
        console.log('GLTF loaded successfully:', gltf);
        scene.add(gltf.scene);
    }, undefined, function(error) {
        console.error('Error loading GLTF:', error);
    });

    // Set camera position
    camera.position.z = 5;

    // Create OrbitControls
    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    // Function to animate the scene
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update(); // Update controls
    }

    // Start the animation
    animate();
</script>`

this is the image of result

image
image758×544 3.26 KB

and the orginal one is look like
image
image703×527 57.6 KB

what is the error please help me.

2

Does the model look alright in gltf viewer ? Metallic PBR materials usually require an environment map to look good - but they shouldn’t be losing color entirely without one.

3

@mjurczyk yes gltf view it’s look orginal color,what is the issue on my code,i am new in 3d .

4

You need a light in your scene!

    //Create a DirectionalLight and turn on shadows for the light
    const dlight = new THREE.DirectionalLight(0xffffff,1);
    dlight.position.set(100, 50, 120);
    dlight.castShadow = true;
    scene.add(dlight);
    //Set up shadow properties for the light
    dlight.shadow.mapSize.width = 1024;
    dlight.shadow.mapSize.height = 1024;
    dlight.shadow.camera.near = 0.5;
    dlight.shadow.camera.far = 350;
    dlight.shadow.camera.left = dlight.shadow.camera.bottom = -150;
    dlight.shadow.camera.top = dlight.shadow.camera.right = 150;
    dlight.shadow.bias = -0.01;
    dlight.target.position.set(0, 0.5, 0);
    scene.add(dlight.target);

My complicated directional light setup… you only prolly really need the first 4 lines…