JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/r85/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r85/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r85/examples/js/loaders/GLTF2Loader.js"></script>
<div id="container"></div>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

/*

Set THREE.Object3D.DefaultUp.set(0,0,1)

make DirectionalLight
make DirectionalLightHelper


Animate the directionalLight from (5,0,5) to exactly (0,0,5)
then directionalLight.lookAt( 0,0,0 )
then directionalLightHelper.update()

---------------> The NaN Behavior

when the directionalLight.position.x position goes to 0,
the directionalLightHelper disappears because the lookAt has started generating NaNs since up and look axis are parallel... and it disappears... and its matrixWorld becomes mostly NaNs etc.

-------------->Bonus weird behavior of directionalLightHelper

Additionally, I place a cube at halfway between directionalLight.position and 0,0,0

I would expect the cube to always lie on the directionalLightHelpers direction vector, but it doesn't look right...

When the NaN bug kicks in, I check it and make the little cube flash as an indicator...

*/

var mesh, renderer, scene, camera, controls, light, directionalLightHelper;

var center;
var testCube;
init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xaaaaaa );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

	THREE.Object3D.DefaultUp.set(0,0,1);
    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new THREE.OrbitControls( camera );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x202020 ) );
    
    // light
    light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 5,0, 5 );
    scene.add( light );
    
	 directionalLightHelper = new THREE.DirectionalLightHelper( light, 3.0 );
	 scene.add(directionalLightHelper);
    
    // axes
    scene.add( new THREE.AxisHelper( 5 ) );


   center = new THREE.Vector3(0,0,0);
   testCube = new THREE.Mesh(new...