Camera Controller

If the Camera learned earlier is the 'eye', the Controller is the 'joystick' that moves that eye. It is an Interaction Module that detects user input (mouse, touch, keyboard) and updates the camera's position and rotation in real-time. Using it allows you to build an intuitive 3D navigation environment without complex matrix operations.

1. Controller Types

RedGPU provides standard controllers that respond to various interaction scenarios.

Class Name	Control Method	Main Usage
OrbitController	Left Click: Rotate Wheel: Zoom	Product 360 viewer, character observation, exploration centered on a specific target
FollowController	Automatic target tracking (smooth interpolation)	TPS (3rd-person) games, character tracking camera
FreeController	W, A, S, D: Move Mouse: Gaze rotation	FPS games, architectural interior tours, debugging
IsometricController	Maintains a fixed 45-degree angle	Real-time strategy (RTS) games, isometric views

[Camera Instance Management]

All Controller classes internally create and own a dedicated Camera instance. Therefore, you don't need to create a separate camera when creating a Controller; just pass the controller into the camera argument when creating View3D, and it will be linked automatically.

2. Key APIs and Configuration

Each controller provides its own unique properties to finely tune rotation speeds, range limits, zoom boundaries, etc. The key properties of the most widely used OrbitController are as follows.

Key Properties of OrbitController

• centerX, centerY, centerZ (number, default: 0):
  • The center target coordinate around which the camera orbits.
• distance (number, default: 15):
  • The distance (zoom distance) of the camera from the center target.
• minDistance, maxDistance (number):
  • The minimum and maximum zoom limits that can be pulled in or pushed out via mouse wheel or pinch-to-zoom.
• pan, tilt (number):
  • Angle values for the camera's horizontal rotation (pan) and vertical rotation (tilt).
• minTilt, maxTilt (number, default: -90 to 90):
  • The minimum and maximum limit angles for vertical (up/down) rotation.
• speedRotation, speedDistance (number):
  • Sensitivity speed coefficients for drag rotation and scroll wheel zoom.

const controller = new RedGPU.Camera.OrbitController(redGPUContext);

// Adjust center target up along the Y-axis and bring the camera distance closer
controller.centerY = 2;
controller.distance = 10;

// Fix range so that the camera does not zoom too close or too far
controller.minDistance = 2;
controller.maxDistance = 30;

// Restrict vertical rotation to prevent flipping upside down
controller.minTilt = -60;
controller.maxTilt = 60;

---

3. Experience Controller Samples

Please experience the actual behavior of each controller directly through the previews below.

OrbitController

Optimized for observing while rotating around a specific target.

FreeController

Explore space freely from a first-person perspective using the W, A, S, D keys and the mouse.

IsometricController

Suitable for strategy simulations or infographics by maintaining a fixed angle.

FollowController

Provides a viewpoint that smoothly follows characters or moving objects.

---

Next Steps

Now you've learned how to configure and navigate the screen. However, the objects we've displayed so far had only simple colors.

Next, let's move on to the Basic Objects section to learn how to represent 3D objects more realistically through refined meshes and Textures with text and images applied.

• Basic Objects Overview