The theory of

camera

UniversalCamera

The general-purpose camera in Babibs.js, described here, can be controlled by input using a keyboard, mouse, trackpad, or gamepad. It extends and replaces the Free Camera, Touch Camera and Gamepad Camera that are still available.

General purpose cameras are now used by BabylonJs as default cameras without special requirements. It’s also your best bet if you want to use a first-person perspective in your scenes.

API

UniversalCamera(name: string, position: Vector3, scene: Scene): UniversalCamera
  • Parameter name: The name of the camera
  • Parameter Position: the initial position of the camera
  • Parameter Scene: Which scene the camera will be placed in
  • Return: returns a UniversalCamera camera variable

instructions

  • The third parameter of the camera is sence, so the sence is bound to the camera. Position is the position of the camera. The placement of a universal camera is fixed.
  • The orientation of the Cameara is set and camera controls are added.
var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
Copy the code
  • Where new BABYLON.Vector3(0, 0, -10) indicates the space point, BABYLON.Vector3.Zero() indicates the origin, equivalent to new BABYLON.

ArcRotateCamera

The name “Radian Rotation Camera” sounds weird, but it’s nice and easy to understand.

The camera always points to a given target position and can rotate around the target, which is the center of rotation. It can be controlled with a mouse or with touch events.

Imagine that this camera is essentially a spy satellite orbiting the Earth, showing details from all directions. Its position relative to the target (the Earth) can be set with three parameters, alpha (radian) longitudinal rotation, beta (radian) lateral rotation, and distance from the target.

API

The constructor for ArcRotateCamera is as follows:

ArcRotateCamera(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene, setActiveOnSceneIfNoneActive? : boolean): ArcRotateCamera
  • Name: indicates the name of the camera
  • Alpha: Radian of the camera’s longitudinal rotation
  • Beta: Lateral rotation radian of the camera
  • Radius: defines the distance between the camera and the target view point
  • Target: defines the target view point of the camera
  • Scene: Indicates the scene to be added by the camera

Simply put, ArcRotateCamera (name, circumferential Angle, vertical Angle, radius, target, scene), target is usually the origin.

instructions

  • Generally, the camera position is placed directly to override alpha, beta, and RADIUS defined.
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 1, new BABYLON.Vector3(0, 0, 0), scene); Camera. setPosition(new BABYLON.Vector3(10, 10, -100)); camera.setPosition(new BABYLON.Vector3(10, 10, -100)) // Attach camera to canvas. AttachControl (canvas, true);Copy the code

FollowCamera

As the name suggests, the FollowCamera moves with its target. The following camera needs a grid as a target, moving from its current position to the target position from which to observe the target. When the target moves, the following camera moves as well (imagine you’re walking in front of someone with a camera behind you). This camera can do a lot of special effects, such as combat games that follow airplanes, and Babybabylon offers a lot of cameras, which is one of the reasons why it’s easier than three.js.

api

FollowCamera(name: string, position: Vector3, scene: Scene, lockedTarget? : Nullable): FollowCamera
  • Name: indicates the name of the camera
  • Position: indicates the position of the camera
  • Scene: What scene does the camera belong to
  • Optional lockedTarget: Specifies the object to be tracked by the camera.

Some other parameters can be set to ensure the effect.

instructions

// Add and manipulate meshes in the scene sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene); Var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, -5, 0), scene); // // Distance between camera and target // camera.radius = 10; // // Height of the camera over the focal point of the target local coordinates // camera.heightOffset = 10; // // Camera rotation Angle around the target in the target local coordinate XY plane // camera.rotationoffset = 0; / / / / / / acceleration camera. CameraAcceleration = 0.005 / / / / / / maximum speed camera. The maxCameraSpeed = 10 / / the camera associated with canvas camera.attachControl(canvas, true); // Camera. Target = sphere; // Camera. Camera. LockedTarget = sphere; camera. // For versions 2.5 and laterCopy the code

Other camera

www.babylonjs.com.cn/babylon101/… The three introduced above are relatively common. For example, in our business scenario, we only need common and followCamera. The business needs are met.