JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>

JavaScript

// WithBug - R69
var x_p = 0;
var z_p = 0;

var scene, camera, renderer, spotLight, lightHepler;
var geometry, material, mesh;

init();
animate();

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 200;

    scene.add(new THREE.AxisHelper(500));

    var planeGeo = new THREE.PlaneBufferGeometry(600, 900);
    var planeMaterial = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        wireframe: false
    });
    planeMaterial.side = THREE.DoubleSide;
    var planeMesh = new THREE.Mesh(planeGeo, planeMaterial);
    //planeMesh.rotation.z = Math.PI / 1.6;
    planeMesh.rotation.x = Math.PI / 1.5;
    //planeMesh.rotation.y = Math.PI / 1.2;
    scene.add(planeMesh);

    spotLight = new THREE.SpotLight(0xffffff, 1, 0, Math.PI / 6, 10); // <============
    spotLight.position.set(0, 50, 0);
    spotLight.target.position.set(0, 0, 0);
    scene.add(spotLight);

    var ambientLight = new THREE.AmbientLight(0x777777);
    scene.add(ambientLight);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    lightHelper = new THREE.SpotLightHelper(spotLight);
    scene.add(lightHelper);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    lightHelper.update();

    //mesh.rotation.x += 0.01;
    //mesh.rotation.y += 0.02;
    x_p += 0.3;
    //z_p += 0.2;

    spotLight.position.set(x_p, 50, z_p);
    spotLight.target.position.set(x_p, 0, z_p);

    spotLight.target.updateMatrixWorld(); // <==================================

    renderer.render(scene, camera);

}