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);