BabylonJS - Máy ảnh

BabylonJS có nhiều máy ảnh có thể được sử dụng. Tại một thời điểm, chỉ một máy ảnh sẽ hoạt động cho một cảnh.

Trong chương này, chúng ta sẽ học cách sử dụng camera trong BabylonJS.

FreeCamera

Bây giờ chúng ta hãy xem FreeCamera hoạt động như thế nào.

Cú pháp

Sau đây là cú pháp cho FreeCamera:

var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);

Đây là vị trí đặt máy ảnh - BABYLON.Vector3 mới (0, 1, -15).

Thay đổi hướng sẽ thay đổi hướng. Bạn có thể thay đổi các giá trị và xem cách máy ảnh hoạt động trên cảnh.

Sau đây là các thông số được FreeCamera sử dụng:

Name
Position
Scene

ArcRotateCamera

Máy ảnh này quay xung quanh một trục mục tiêu nhất định. Nó có thể được điều khiển bằng con trỏ và chuột, hoặc bằng các sự kiện chạm. Các thông số là tên, alpha, beta, bán kính và mục tiêu.

Cú pháp

var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

ArcRotateCamerađiểm theo hướng + x. Để thay đổi vị trí của máy ảnh, hãy sử dụngsetPosition bất động sản.

camera.setPosition(new BABYLON.Vector3(0, 0, -100));

ArcRotateCamera là một máy ảnh tuyệt vời để tạo hoạt ảnh. Lệnh sau sẽ giúp bạn xoay camera xung quanh mục tiêu -

scene.activeCamera.alpha += .01;

TouchCamera

Cảm ứng là một loại 'cử chỉ'. Nó có thể nằm trên một tấm đệm hoặc màn hình, với (các) ngón tay, bút stylus, găng tay, bàn chân hoặc con trỏ laser. Bất kỳ chuyển động nào có thể cảm nhận được ... đều có thể được coi là một cử chỉ.

Cú pháp

Sau đây là cú pháp cho TouchCamera:

var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);

GamepadCamera

Máy ảnh này được thiết kế đặc biệt để sử dụng với gamepad.

Cú pháp

Sau đây là cú pháp cho Gamepad Camera:

var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);

DeviceOrientationCamera

Máy ảnh này được thiết kế đặc biệt để phản ứng với các trường hợp sự kiện hướng thiết bị như khi bạn nghiêng thiết bị về phía trước hoặc phía sau, trái hoặc phải, v.v.

Cú pháp

var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);

FollowCamera

FollowCamera được thiết kế để theo dõi bất kỳ mục cảnh nào với một vị trí. Nó có thể theo sau từ phía sau, phía trước hoặc từ bất kỳ góc độ nào.

Cú pháp

Sau đây là cú pháp cho FollowCamera -

var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);

VirtualJoysticksCamera

Máy ảnh này được thiết kế để phản ứng với các sự kiện Cần điều khiển ảo. Cần điều khiển ảo là đồ họa 2D trên màn hình được sử dụng để điều khiển máy ảnh hoặc các vật phẩm cảnh khác.

Cú pháp

Sau đây là cú pháp cho VirtualJoysticksCamera:

var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);

AnaglyphCamera

AnaglyphCamera được sử dụng với kính 3D màu đỏ và lục lam. Nó sử dụng các kỹ thuật lọc sau xử lý.

AnaglyphArcRotateCamera

Sau đây là cú pháp cho AnaglyphArcRotateCamera -

var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

AnaglyphFreeCamera

Sau đây là cú pháp cho AnaglyphFreeCamera -

var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

VRDeviceOrientationFreeCamera

VRDeviceOrientationFreeCamera sử dụng FreeCamera làm cơ sở của nó, vì vậy các thuộc tính và phương pháp của FreeCamera cũng được tìm thấy trên VRDeviceOrientationFreeCamera của chúng tôi.

Cú pháp

Sau đây là cú pháp cho VRDeviceOrientationFreeCamera -

var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);

WebVRFreeCamera

WebVRFreeCamera sử dụng FreeCamera làm cơ sở của nó, vì vậy các thuộc tính và phương pháp của FreeCamera cũng được tìm thấy trên WebVRFreeCamera của chúng tôi.

Cú pháp

Sau đây là cú pháp cho WebVRFreeCamera -

var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);

Trong hầu hết các bản demo, bạn sẽ thấy attachControl nơi máy ảnh được gắn vào canvas.

Thí dụ

camera.attachControl(canvas, true);