@galacean/engine-toolkit-controls

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.