Follow mouse position with light in three.js
<p>I have just recently started to explore the world of <code>three.js</code> and I am trying to achieve a solution similar to <a href="https://stackoverflow.com/questions/36033879/three-js-object-follow-mouse-position">this old topic</a> regarding basically the same thing, but not quite.</p>

<p>I want to place a sphere in the middle of the scene that's static and still. When moving the mouse, I want the point light of the scene to follow the mouse movement. In the example above, it's the opposite.</p>

<p>I've just started to learn JavaScript and jQuery, so I'm having some trouble understanding the logic of three.js. This is my code so far, but it's not working at all:</p>

<pre><code>// Define the standard global variables
var container,
scene, 
camera,
renderer,
plane,
mouseMesh;

// Custom global variables
var mouse = {x: 0, y: 0};

init();
animate();

function init() {

// Scene
scene = new THREE.Scene();

window.addEventListener('resize', function() {
  var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
});

// Camera
var screenWidth = window.innerWidth,
        screenHeight = window.innerHeight,
        viewAngle = 75,
        nearDistance = 0.1,
        farDistance = 1000;
camera = new THREE.PerspectiveCamera(viewAngle, screenWidth /   screenHeight, nearDistance, farDistance);
scene.add(camera);
camera.position.set(0, 0, 5);
camera.lookAt(scene.position);

// Renderer engine together with the background
renderer = new THREE.WebGLRenderer({
        antialias: true,
    alpha: true
});
renderer.setSize(screenWidth, screenHeight);
container = document.getElementById('container');
container.appendChild(renderer.domElement); 

// Define the lights for the scene
var light = new THREE.PointLight(0xff00ff);
light.position.set(0, 0, 5);
scene.add(light);
var lightAmb = new THREE.AmbientLight(0x000000);
scene.add(lightAmb);


// Create a circle around the mouse and move it
// The sphere has opacity 0
var mouseGeometry = new THREE.SphereGeometry(1, 0, 1);
var mouseMaterial = new THREE.MeshLambertMaterial({  });
mouseMesh = new THREE.Mesh(mouseGeometry, mouseMaterial);

mouseMesh.position.set(0, 0, 5);
scene.add(mouseMesh);

// When the mouse moves, call the given function
document.addEventListener('mousemove', onMouseMove, false);
}

// Follows the mouse event
function onMouseMove(event) {

// Update the mouse variable
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

// Make the sphere follow the mouse
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject( camera );
var dir = vector.sub( camera.position ).normalize();
var distance = - camera.position.z / dir.z;
var pos = camera.position.clone().add( dir.multiplyScalar( distance )     );
mouseMesh.position.copy(pos);

// Make the sphere follow the mouse
//  mouseMesh.position.set(event.clientX, event.clientY, 0);
};

// Animate the elements
function animate() {
requestAnimationFrame(animate);
    render();   
}


// Rendering function
function render() {

// For rendering
renderer.autoClear = false;
renderer.clear();
renderer.render(scene, camera);
};
</code></pre>

<p>I tried to simply replace <code>mouseMesh.position.copy(pos);</code> with <code>light.position.copy(pos);</code>, but that just makes the <code>mouseMesh</code> disappear.</p>