Recently delving into the realm of three.js, I am seeking to achieve a solution reminiscent of this older thread with a slight tweak.
The objective is to have a stationary sphere at the center of the scene while having the point light in the scene track the mouse movement. The example referenced prior demonstrates the opposite behavior.
In the process of learning JavaScript and jQuery, grasping the intricacies of three.js has proven challenging. Below is the code I've put together so far, albeit without success:
// Global variables
var container,
scene,
camera,
renderer,
plane,
mouseMesh;
// Custom global variables
var mouse = {x: 0, y: 0};
init();
animate();
function init() {
// Setting up the 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();
});
// Initializing 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);
// Setting up Renderer engine with background
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(screenWidth, screenHeight);
container = document.getElementById('container');
container.appendChild(renderer.domElement);
// Defining 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);
// Creating and moving a circle around the mouse
// The sphere remains transparent
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);
// Trigger given function when mouse moves
document.addEventListener('mousemove', onMouseMove, false);
}
// Tracking mouse movements
function onMouseMove(event) {
// Updating mouse position
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
// Making 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);
};
// Animating elements
function animate() {
requestAnimationFrame(animate);
render();
}
// Rendering elements
function render() {
renderer.autoClear = false;
renderer.clear();
renderer.render(scene, camera);
};
An attempt was made to replace mouseMesh.position.copy(pos); with light.position.copy(pos);, which unfortunately resulted in the disappearance of mouseMesh.