Camera Controls

The Camera Controls, as the name implies, is a component that is used with the camera to display the 3D scene. This type of component customizes the corresponding parameters according to different functions, and controls the display of the 3D scene by affecting the properties of the camera.

Category

OrbitControl

OrbitControl is used to simulate orbital interaction, suitable for 360 rotation interaction around a target object, be sure to add the OrbitControl after adding the Camera component.

Feature

| Attributes | Meaning | | :-- | :-- | | target | Observation point | | autoRotate | Whether to rotate automatically, the default is false, the rotation speed can be adjusted by autoRotateSpeed | | autoRotateSpeed | Speed ​​of automatic rotation | | enableDamping | Whether to enable camera damping, the default is true | | dampingFactor | Rotation damping parameter, default is 0.1 | | enableKeys | Whether to support keyboard operation (up, down, left, and right keys) | | enablePan | Whether to support camera translation, the default is true | | keyPanSpeed | The amplitude of the operation when the keyboard is continuously pressed | | enableRotate | Whether to support camera rotation, the default is true | | rotateSpeed | Camera rotation speed, the default is 1.0 | | enableZoom | Whether to support camera zoom, the default is true | | minAzimuthAngle | When onUpdate, the minimum radian of a reasonable range for horizontal operation, the default is negative infinity | | maxAzimuthAngle | When onUpdate, the maximum radian of the reasonable range of horizontal operation, the default is positive infinity | | minDistance | When onUpdate, the minimum value of the reasonable range of distance operation is judged | | maxDistance | When onUpdate, the maximum value of the reasonable range of distance operation judged | | minPolarAngle | When onUpdate, the minimum arc within a reasonable range of vertical operation | | maxPolarAngle | When onUpdate, the maximum arc within a reasonable range of vertical operation |

Example

OrbitControl-Examples

FreeControl

FreeControl are generally used for roaming control, often in game scenes, be sure to add the FreeControl after adding the Camera component.

Feature

| Attributes | Meaning | | :-------------- | :--------------------------------------------------------------------- | | floorMock | Whether to simulate the ground, the default is true | | floorY | Use with floorMock to declare the location information of the ground | | movementSpeed | Speed ​​of movement | | rotateSpeed | Speed ​​of rotation |

Example

FreeControl-Examples

OrthoControl

OrthoControl are generally used to control zoom and displacement in 2D scenes.

Feature

| Attributes | Meaning | | :---------- | :--------- | | zoomSpeed | Zoom Speed |

Example

OrthoControl-Examples

BoxSelectionControls

BoxSelectionControls is generally used in editor or RTS games to draw a rectangle on the screen and find objects in it.

https://user-images.githubusercontent.com/7953802/250814033-073aee92-cd8d-489e-8e89-d3cbeb26ee84.mov

npm

The Control is published on npm with full typing support. To install, use:

$ npm install @galacean/engine-toolkit-controls

This will allow you to import package entirely using:

import * as Controls from "@galacean/engine-toolkit-controls";

or individual classes using:

import { OrthoControl } from "@galacean/engine-toolkit-controls";

Usage

import { OrbitControl } from "@galacean/engine-toolkit-controls";

// Create engine
const engine = await WebGLEngine.create({ canvas: "canvas" });
engine.canvas.resizeByClientSize();

// Initialize root
const rootEntity = engine.sceneManager.activeScene.createRootEntity();

// Initialize camera entity
const cameraEntity = rootEntity.createChild("camera");
cameraEntity.addComponent(Camera);
// Add OrbitControl
cameraEntity.addComponent(OrbitControl);

Links

• Repository
• Documentation
• API References

License

The engine is released under the MIT license. See LICENSE file.