<p dir="auto">Hi, love this code but think I see an issue which can be seen on the live example (<a href="https://threejs.org/examples/misc_controls_transform.html" rel="nofollow">https://threejs.org/examples/misc_controls_transform.html</a>)  where the user is able to toggle off an axis (X,Y or Z) but is still able to translate the object along that axis even while the handles are not visible... you just have to carefully click and drag where you think the invisible handles are.<br>
I believe the issue may have arisen with how the three.js raycaster catches the handles meshes that are not visible.<br>
I seem to have fixed it for my case by throwing in a conditional checking for visibility of the children in the this.pointerHover handler</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var intersect = ray.intersectObjects(_gizmo.picker[this.mode].children, true)[0] || false;
if (intersect) {
			if (!intersect.object.visible) {//my added condition
				const intersectedChildren = ray.intersectObjects(_gizmo.picker[this.mode].children, true);
				this.axis = null;
				for (let i = 0; i &lt; intersectedChildren.length; i++) {
					if (intersectedChildren[i].object.visible) {
						this.axis = intersect.object.name;
						continue;
					}
				}
			} else {
				this.axis = intersect.object.name;
			}"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">intersect</span> <span class="pl-c1">=</span> <span class="pl-s1">ray</span><span class="pl-kos">.</span><span class="pl-en">intersectObjects</span><span class="pl-kos">(</span><span class="pl-s1">_gizmo</span><span class="pl-kos">.</span><span class="pl-c1">picker</span><span class="pl-kos">[</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">mode</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">||</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">intersect</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-c1">!</span><span class="pl-s1">intersect</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">.</span><span class="pl-c1">visible</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-c">//my added condition</span>
				<span class="pl-k">const</span> <span class="pl-s1">intersectedChildren</span> <span class="pl-c1">=</span> <span class="pl-s1">ray</span><span class="pl-kos">.</span><span class="pl-en">intersectObjects</span><span class="pl-kos">(</span><span class="pl-s1">_gizmo</span><span class="pl-kos">.</span><span class="pl-c1">picker</span><span class="pl-kos">[</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">mode</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
				<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">axis</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
				<span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">intersectedChildren</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</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-s1">intersectedChildren</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">.</span><span class="pl-c1">visible</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
						<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">axis</span> <span class="pl-c1">=</span> <span class="pl-s1">intersect</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">;</span>
						<span class="pl-k">continue</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">else</span> <span class="pl-kos">{</span>
				<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">axis</span> <span class="pl-c1">=</span> <span class="pl-s1">intersect</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">;</span>
			<span class="pl-kos">}</span><span class="pl-kos"></span></pre></div>
<p dir="auto">Just thought I'd let you know.</p>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">Not sure how many of these are relevant to WebGL as it doens't support geometry shaders but it is a pretty decent article none the less:</p>
<p dir="auto"><a href="http://www.iquilezles.org/www/articles/stereo/stereo.htm" rel="nofollow">http://www.iquilezles.org/www/articles/stereo/stereo.htm</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"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r76</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" 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"> Windows</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>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>