Render a glb file in html file color is not showing

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`

    // 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

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

    // Load the GLTF file
    var loader = new THREE.GLTFLoader();
    loader.load('bike.glb', function(gltf) {
        console.log('GLTF loaded successfully:', gltf);
    }, 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() {
        renderer.render(scene, camera);
        controls.update(); // Update controls

    // Start the animation

this is the image of result

and the orginal one is look like

what is the error please help me.

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.

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

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;
    //Set up shadow properties for the light
    dlight.shadow.mapSize.width = 1024;
    dlight.shadow.mapSize.height = 1024; = 0.5; = 350; = = -150; = = 150;
    dlight.shadow.bias = -0.01;, 0.5, 0);

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