Material Brightness Issue Noticed on Latest Version When Upgrading from 151

I am working on some interactive landing pages that import Amazon Image Data from the Advertising API. When referencing the latest version some materials are much brighter than normal. Any thoughts on this? Thanks :slight_smile:

<!--<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/three@0.151.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

<script type="module">
    // Set up Three.js scene
    const scene = new THREE.Scene();

    let meshes = [];

    // Set up the camera
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
    camera.position.z = 5;

    // Set up the renderer
    let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = 'fixed';
    renderer.domElement.style.top = '0';
    renderer.domElement.style.left = '0';
    renderer.domElement.style.zIndex = '0';
    document.body.appendChild(renderer.domElement);

    // Create a loading manager
    var manager = new THREE.LoadingManager();

    // Set up the manager callbacks
    manager.onStart = function (url, itemsLoaded, itemsTotal) {
        console.log('Started loading:', url);
    };

    manager.onLoad = function () {
        console.log('Loading complete!');
        meshes.forEach(mesh => {
            mesh.visible = true;
        });
    };

    manager.onProgress = function (url, itemsLoaded, itemsTotal) {
        console.log('Loading progress:', itemsLoaded, '/', itemsTotal);
    };

    manager.onError = function (url) {
        console.error('Error loading:', url);
    };

    // Set up the orbital controls
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // Enable damping for smooth movement
    controls.dampingFactor = 0.05; // Adjust damping factor for desired smoothness
    controls.autoRotate = true; // Make the camera rotate sinuously around the spheres
    controls.minPolarAngle = (Math.PI / 2) - (Math.PI / 180) * 30; // Minimum angle (60 degrees) - adjust as needed

    // Create and add the meshes to the scene
    var textureLoader = new THREE.TextureLoader();
    textureLoader.load('https://m.media-amazon.com/images/I/412vqStNIjL._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0823GXPZ3?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/412vqStNIjL._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/41+47a4iJ8L._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0B69FZT4X?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41+47a4iJ8L._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/51KB8vehAUL._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BGMZPLC5?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/51KB8vehAUL._SL500_.jpg');
        mesh.material.map = meshTexture;
    });


    textureLoader.load('https://m.media-amazon.com/images/I/51CFPriDKDL._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BC9G1DZD?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/51CFPriDKDL._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/41+nZTx-bYL._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B098TKRTDS?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41+nZTx-bYL._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/618wrLCypSL._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B08XBBG4TL?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/618wrLCypSL._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/41OMu6V6IML._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BZRBP1KZ?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41OMu6V6IML._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/31NLEv05bzL._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0B1ZLP332?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/31NLEv05bzL._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/41Prjw-VxUL._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BP1ZVNMB?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41Prjw-VxUL._SL500_.jpg');
        mesh.material.map = meshTexture;
    });

    textureLoader.load('https://m.media-amazon.com/images/I/51VXgR5Gt2L._SL500_.jpg', function (texture) {
        texture.flipY = true;
        var geometry = new THREE.CircleGeometry(0.75, 32);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 5 - 2.5;
        mesh.position.y = Math.random() * 5 - 2.5;
        mesh.position.z = Math.random() * 5 - 2.5;
        mesh.rotation.y = Math.PI;
        mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
        mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0C3HR35SG?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
        scene.add(mesh);
        var material = new THREE.MeshBasicMaterial({});
        var meshTextureLoader = new THREE.TextureLoader(manager);
        var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/51VXgR5Gt2L._SL500_.jpg');
        mesh.material.map = meshTexture;
    });


    // Animate the meshes
    function animate() {
        requestAnimationFrame(animate);
        scene.traverse(function (node) {
            if (node instanceof THREE.Mesh) {
                node.position.add(node.velocity);

                // Rotate the mesh back and forth in the camera's direction and rotate it by 180 degrees
                var angle = Math.atan2(node.position.x - camera.position.x, node.position.z - camera.position.z);
                var rotationOffset = Math.PI; // Rotate by 180 degrees
                var rotationAmount = Math.sin(Date.now() * 0.0005) * 0.5; // Back and forth rotation
                node.rotation.y = angle + rotationOffset + rotationAmount;

                // Check boundaries and change direction if necessary
                if (node.position.x < -2.5 || node.position.x > 2.5) {
                    node.velocity.x *= -1;
                }
                if (node.position.y < -2.5 || node.position.y > 2.5) {
                    node.velocity.y *= -1;
                }
                if (node.position.z < -2.5 || node.position.z > 2.5) {
                    node.velocity.z *= -1;
                }
            }
        });
        renderer.render(scene, camera);
        controls.update();
    }

    animate();

</script>

See: Updates to Color Management in three.js r152

It seems you have to configure your textures as sRGB textures. Try it like so:

meshTexture.colorSpace = THREE.SRGBColorSpace;

Perfect Thank You!