Texture looking whitish

Hello,

I’m trying to show a texture of a sattelite photo, but it looks whitish. I first thought it was because of light but when I disable light it still looks white.

Here’s a preview of my project:

This is the original picture:

Source code (don’t hesitate to tell me if you need more):

export function createPlane(scene, renderer, length) {
    const planeMesh = new THREE.Mesh(
        new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE),
        new THREE.MeshStandardMaterial({ color: 0x228b22, depthWrite: false })
    );
    planeMesh.rotateX(-Math.PI / 2);
    planeMesh.position.set(length / 2, -0.51, 0);
    planeMesh.receiveShadow = true;

    const imageSize = {
        width: 3606,
        height: 800
    }
    const points = {
        start: {
            x: 35,
            y: 46
        },
        end: {
            x: 3528,
            y: 69
        }
    };

    const runwayPixelSize = points.end.x - points.start.x;
    const meterToPixel = runwayPixelSize / length;

    const imageWidth = imageSize.width / meterToPixel;
    const imageHeight = imageSize.height / meterToPixel;

    const textureLoader = new THREE.TextureLoader();
    textureLoader.load(
        'runway3.png',
        function(texture) {
            texture.wrapS = THREE.ClampToEdgeWrapping;
            texture.wrapT = THREE.ClampToEdgeWrapping;
            texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

            const material = new THREE.MeshStandardMaterial({ map: texture });
            const planeTexture = new THREE.Mesh(
                new THREE.PlaneGeometry(imageWidth, imageHeight),
                material
            );
            planeTexture.rotateX(-Math.PI / 2);

            const thresholdPosX = imageWidth / 2 - points.start.x / meterToPixel;
            const thresholdPosZ = -(imageHeight / 2) + (points.start.y / meterToPixel);
            planeTexture.position.set(thresholdPosX, 0, thresholdPosZ);
            
            scene.add(planeTexture);
        },
        undefined,
        function(error) {
            console.error('An error occurred loading the texture.', error);
        }
    );

    scene.add(planeMesh);
}

Thanks!

Hi!
Maybe this will be helpful: Blur filtered canvas on canvastexture doens't display well - #6 by prisoner849

1 Like

So efficient!! Tysm!

1 Like