Mouse Event Handling Feature

[jaki729]

On Mouse Down:
Detects mouse clicks on rendered objects (cubes/windows) in the Three.js scene.
On Mouse Move:
Enables dragging functionality by updating cube positions based on mouse movement.
On Mouse Up:
Ends dragging mode, resetting flags after the mouse button is released.
Event Listeners:
Monitors mouse actions (mousedown, mousemove, mouseup) for window interaction.

Code or the Function implemented

	// Function to handle mouse down event for window interaction
	function onMouseDown(event) {
		event.preventDefault();

		const mouse = {
			x: (event.clientX / window.innerWidth) * 2 - 1,
			y: -(event.clientY / window.innerHeight) * 2 + 1,
		};

		const raycaster = new THREE.Raycaster();
		raycaster.setFromCamera(mouse, camera);

		const intersects = raycaster.intersectObjects(cubes);

		if (intersects.length > 0) {
			selectedCube = intersects[0].object;
			initialMousePosition.x = event.clientX;
			initialMousePosition.y = event.clientY;
			initialCubePosition.x = selectedCube.position.x;
			initialCubePosition.y = selectedCube.position.y;

			isDragging = true;
		}
	}

	// Function to handle mouse move event for window interaction
	function onMouseMove(event) {
		event.preventDefault();

		if (isDragging && selectedCube) {
			const deltaX = event.clientX - initialMousePosition.x;
			const deltaY = event.clientY - initialMousePosition.y;

			selectedCube.position.x = initialCubePosition.x + deltaX * 0.01;
			selectedCube.position.y = initialCubePosition.y - deltaY * 0.01;
		}
	}

	// Function to handle mouse up event for window interaction
	function onMouseUp(event) {
		event.preventDefault();

		isDragging = false;
		selectedCube = null;
	}
	// Event listeners for mouse events to enable window interaction
	renderer.domElement.addEventListener('mousedown', onMouseDown);
	renderer.domElement.addEventListener('mousemove', onMouseMove);
	renderer.domElement.addEventListener('mouseup', onMouseUp);