<h5 dir="auto">Description of the problem</h5>
<p dir="auto">In creating a shadow for one scene, the basic processes include creating an available light, a cast shadow object, a receive shadow object. The problem I met is in the light's part.</p>
<p dir="auto">I create a spotlight with specifying its target to be a cube, adding the shadow camera to one <code class="notranslate">camerahelper</code> and then rendering them, but <strong>results seem different in two different three.js versions</strong>. The grammar and APIs I obeyed is the newest document in three.js website, can be accessed <a href="https://threejs.org/docs/index.html#api/lights/shadows/SpotLightShadow" rel="nofollow">here</a>.</p>
<p dir="auto">A code snippet in two different three.js version shows here (the same codes with just different three.js version included):</p>
<ul dir="auto">
<li><a href="https://jsfiddle.net/hijiangtao/4wft921w/2/" rel="nofollow">jsfiddle - r85</a>, scripted loaded via <a href="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js" rel="nofollow">cloudflare's CDN</a></li>
<li><a href="https://jsfiddle.net/hijiangtao/4wft921w/1/" rel="nofollow">jsfiddle - r84</a>, scripted loaded via <a href="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js" rel="nofollow">cloudflare's CDN</a></li>
</ul>
<p dir="auto">I also took some screenshots to show the differences between them:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4990015/25666094/14452174-3052-11e7-8361-51c2b78f1f04.png"><img src="https://cloud.githubusercontent.com/assets/4990015/25666094/14452174-3052-11e7-8361-51c2b78f1f04.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><em>The <strong>abnormal one (r85)</strong> with shadow doesn't displayed in the right place, as well as the shadow camera fixed to vec(0,0,0). The shadow camera scope is emphasized with yellow lines in the picture.</em></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4990015/25666259/96c56fe6-3052-11e7-9fe2-7d7beecde5b0.png"><img src="https://cloud.githubusercontent.com/assets/4990015/25666259/96c56fe6-3052-11e7-9fe2-7d7beecde5b0.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><em>The <strong>good (r84)</strong> one with shadow displayed in the right position, but the shadow camera still fixed to vec(0,0,0), which I think it's not supposed to be that, since a good shadow camera should follow the position of its belonged light? (such as the following pic)</em></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4990015/25666477/3efc95d6-3053-11e7-83ed-8cb93a56d7b6.png"><img src="https://cloud.githubusercontent.com/assets/4990015/25666477/3efc95d6-3053-11e7-83ed-8cb93a56d7b6.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>It seems r85 can't display shadow in spotlight normally, but there is no problem in r84; on the other hand, these two versions both have a wrong shadow camera position in spotlight environment.</strong></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=""> r85</li>
</ul>
<h5 dir="auto">Browser</h5>
<p dir="auto">I didn't test all the browsers but I think it is apparently not the browser internal issues.</p>
<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" checked=""> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer (Not test)</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li>[] 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" checked=""> 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>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<p dir="auto">Just follow the basic requirements of three.js' runtime environment is enough to catch this problem.</p>
<p dir="auto">Hi!<br>
I'm interested in translating the documentations into French after noticing some of my students are sometimes struggling with English terms.</p>
<p dir="auto">I wanted to know if there was a specific process for that and also a way to link a version of the translate page to the English one.<br>
I mean, does every English page have a version number that could be linked to any translation so users know if the page he is currently reading in another language is up to date or not.</p>
<p dir="auto">Thanks!</p>