<p dir="auto">As of threejs version 112 a directional light with castShadow set to true adds a yellow tint to objects on some devices including the Pixel 3a. Confirmed on the Pixel 3a using both Chrome 79 and Firefox 68.4.1.</p>
<p dir="auto">Here's a demo of the issue (no cdn for 112 exists so you'll have to download it)<br>
The cube should be a yellowish green.<br>
The yellow tint goes away if you do one of the following:</p>
<ul dir="auto">
<li>use a previous version of threejs</li>
<li>comment out 'mainLight.castShadow = true'</li>
<li>skip enabling the shadowMap on the renderer.</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;html&gt;
&lt;head&gt;
&lt;!--    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js&quot;&gt;&lt;/script&gt;--&gt;
    &lt;script src=&quot;three.112.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        body {
            margin:0;
            padding:0;
        }
        #scene-container {
            width:100%;
            height:100%;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;scene-container&quot;&gt;&lt;/div&gt;
    &lt;script&gt;
        const container = document.querySelector( '#scene-container' );

        const scene = new THREE.Scene();

        scene.background = new THREE.Color( 'skyblue' );

        const mainLight  = new THREE.DirectionalLight(0xFFFFFF, Math.PI - 0.5);
        mainLight.castShadow = true;
        mainLight.position.set(0.15, 0.866, 0.35);
        scene.add( mainLight );

        const fov = 35;
        const aspect = container.clientWidth / container.clientHeight;
        const near = 0.1;
        const far = 100;

        const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
        camera.position.set( 0, 0, 10 );

        const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );

        const material = new THREE.MeshStandardMaterial();
        material.roughness = 1;
        material.metalness = 0;

        const mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        const renderer = new THREE.WebGLRenderer();
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.setSize( container.clientWidth, container.clientHeight );
        renderer.setPixelRatio( window.devicePixelRatio );

        container.appendChild( renderer.domElement );

        renderer.render( scene, camera );
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
"><pre class="notranslate"><code class="notranslate">&lt;html&gt;
&lt;head&gt;
&lt;!--    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"&gt;&lt;/script&gt;--&gt;
    &lt;script src="three.112.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        body {
            margin:0;
            padding:0;
        }
        #scene-container {
            width:100%;
            height:100%;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="scene-container"&gt;&lt;/div&gt;
    &lt;script&gt;
        const container = document.querySelector( '#scene-container' );

        const scene = new THREE.Scene();

        scene.background = new THREE.Color( 'skyblue' );

        const mainLight  = new THREE.DirectionalLight(0xFFFFFF, Math.PI - 0.5);
        mainLight.castShadow = true;
        mainLight.position.set(0.15, 0.866, 0.35);
        scene.add( mainLight );

        const fov = 35;
        const aspect = container.clientWidth / container.clientHeight;
        const near = 0.1;
        const far = 100;

        const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
        camera.position.set( 0, 0, 10 );

        const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );

        const material = new THREE.MeshStandardMaterial();
        material.roughness = 1;
        material.metalness = 0;

        const mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        const renderer = new THREE.WebGLRenderer();
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.setSize( container.clientWidth, container.clientHeight );
        renderer.setPixelRatio( window.devicePixelRatio );

        container.appendChild( renderer.domElement );

        renderer.render( scene, camera );
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

</code></pre></div>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">I assume this is a driver bug on the Pixel 3, and it's probably long-standing; it repros on dev, as well as r112 and r110. I haven't tried any more versions. Try this <a href="https://jsfiddle.net/elalish/51Lbtuck/10/" rel="nofollow">fiddle</a>; normally it's just a white sphere:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1649964/71842923-9e1a8100-3077-11ea-9b59-1dac05daaf85.png"><img src="https://user-images.githubusercontent.com/1649964/71842923-9e1a8100-3077-11ea-9b59-1dac05daaf85.png" alt="image" style="max-width: 100%;"></a><br>
But on Pixel 3, specifically with this line enabled:<br>
<code class="notranslate">renderer.shadowMap.type = THREE.PCFSoftShadowMap;</code><br>
We get yellow:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1649964/71843101-fc476400-3077-11ea-954d-7a8cf43a3b36.png"><img src="https://user-images.githubusercontent.com/1649964/71843101-fc476400-3077-11ea-954d-7a8cf43a3b36.png" alt="image" style="max-width: 100%;"></a></p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r112</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<p dir="auto">Pixel 3</p>