<p dir="auto">Right now getting a direction or spot light's direction is somewhat complex and only present in the renderers, rather than as a method on the SpotLight and DirectionalLight classes.</p>
<p dir="auto">Specifically to get the true direction of a light one uses this code:</p>
<p dir="auto"><a href="https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L5020">https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L5020</a><br>
<a href="https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/SVGRenderer.js#L225">https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/SVGRenderer.js#L225</a><br>
<a href="https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/WebGLDeferredRenderer.js#L431">https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/WebGLDeferredRenderer.js#L431</a></p>
<p dir="auto">I would like to move the repeated code from the renderers into the base Light class.  Thus I would like to add to Light this (and use it in the renderers):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="THREE.Light.prototype.getWorldDirection = function() {

    var targetPosition = new THREE.Vector3();

    return function ( optionalTarget ) {

        var direction = optionalTarget || new THREE.Vector3();

        if( this.target ) {

            direction.setFromMatrixPosition( this.matrixWorld );
            targetPosition.setFromMatrixPosition( this.target.matrixWorld );
            direction.sub( targetPosition );
            direction.normalize();
        }

        return direction;

    };

}();"><pre class="notranslate"><span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Light</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-c1">getWorldDirection</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-k">var</span> <span class="pl-s1">targetPosition</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Vector3</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-k">function</span> <span class="pl-kos">(</span> <span class="pl-s1">optionalTarget</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span>

        <span class="pl-k">var</span> <span class="pl-s1">direction</span> <span class="pl-c1">=</span> <span class="pl-s1">optionalTarget</span> <span class="pl-c1">||</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Vector3</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-k">if</span><span class="pl-kos">(</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">target</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span>

            <span class="pl-s1">direction</span><span class="pl-kos">.</span><span class="pl-en">setFromMatrixPosition</span><span class="pl-kos">(</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">matrixWorld</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">targetPosition</span><span class="pl-kos">.</span><span class="pl-en">setFromMatrixPosition</span><span class="pl-kos">(</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">matrixWorld</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">direction</span><span class="pl-kos">.</span><span class="pl-en">sub</span><span class="pl-kos">(</span> <span class="pl-s1">targetPosition</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">direction</span><span class="pl-kos">.</span><span class="pl-en">normalize</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>

        <span class="pl-k">return</span> <span class="pl-s1">direction</span><span class="pl-kos">;</span>

    <span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I added the check for <code class="notranslate">this.target</code> because in order to share the code between SpotLight and DirectionalLight it had to go on the base class, and thus it may be used by Lights that do not have a <code class="notranslate">this.target</code> on them.</p>
<p dir="auto">PS. I am proposing this because I would have to again duplicate this code in the new batching renderer.</p>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">A <code class="notranslate">WebGLRenderer</code> is used to render a scene with:</p>
<ul dir="auto">
<li>a sprite</li>
<li>background color set (or renderer gets clear color set) to another color than black (e.g. blue)</li>
</ul>
<p dir="auto">Next, the scene's background color (or render clear color) is set to black, and the scene rendered again. The background color will stay the same value as before.</p>
<p dir="auto">For example see: <a href="https://jsfiddle.net/w9t5h1h2/3/" rel="nofollow">https://jsfiddle.net/w9t5h1h2/3/</a><br>
In the example, double-clicking the canvas will cycle the background color between black, red and blue. You can see that it never gets set back to black, but rather keeps the red color when it should have been black. Setting the color to blue/red again works.</p>
<p dir="auto">The problem seems to be caused by the <code class="notranslate">SpritePlugin</code> calling <code class="notranslate">renderer.resetGLState()</code>, which resets the tracked <code class="notranslate">currentClearColor</code> to black, while leaving the context's clear color untouched.</p>
<p dir="auto">A workaround is to use nearly-black (<code class="notranslate">0x000001</code>) for the background instead of black.</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=""> r85</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" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> 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" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> 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"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>