Interaction

RedGPU provides an intuitive Picking system that handles mouse and touch events for 3D and 2D objects. Most display objects such as Mesh, Sprite3D, and Sprite2D can receive and react to user input.

1. Registering Event Listeners

Use the addListener method to register events on an object. When an event occurs, the registered callback function is executed, and an event information object (e) is passed.

import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

// Reference event type constant
const { PICKING_EVENT_TYPE } = RedGPU.Picking;

mesh.addListener(PICKING_EVENT_TYPE.CLICK, (e) => {
    console.log('Clicked object:', e.target);
    // Rotate upon click
    e.target.rotationY += 45;
});

2. Supported Event Types

The system supports 6 basic events defined in RedGPU.Picking.PICKING_EVENT_TYPE.

Event Constant	String Value	Description
CLICK	'click'	Occurs upon mouse click or touch tap
DOWN	'down'	Occurs upon mouse button press or touch start
UP	'up'	Occurs upon mouse button release or touch end
OVER	'over'	Occurs when the mouse cursor enters over the object (Hover In)
OUT	'out'	Occurs when the mouse cursor leaves the object (Hover Out)
MOVE	'move'	Occurs continuously while the mouse pointer moves over the object

3. Practical Example: Interactive Cube

This is an interactive example where the size changes on mouse over, the color changes upon clicking, and coordinates can be checked during movement.

Key Summary

• Independent event processing per object is possible through addListener.
• You can directly access the object that triggered the event via e.target.
• UX can be enhanced by using it along with web standard DOM APIs such as mouse cursor style changes (document.body.style.cursor).

Next Learning Recommendation

Apply post-processing effects that enhance the visual completion of scenes enriched with interaction.

• Post-Effect