@galacean/engine-toolkit-controls NPM

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.

merge

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.

merge

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

merge

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