BabylonJS - กล้องถ่ายรูป

BabylonJS มีกล้องมากมายที่สามารถใช้งานได้ ในแต่ละครั้งจะมีการใช้งานกล้องเพียงตัวเดียวสำหรับฉากหนึ่ง

ในบทนี้เราจะเรียนรู้เกี่ยวกับการใช้กล้องใน BabylonJS

FreeCamera

ตอนนี้ให้เราดูว่า FreeCamera ทำงานอย่างไร

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ FreeCamera -

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

นี่คือตำแหน่งที่วางกล้อง - BABYLON ใหม่ Vector3 (0, 1, -15)

การเปลี่ยนทิศทางจะเปลี่ยนทิศทาง คุณสามารถเปลี่ยนค่าและดูว่ากล้องทำงานอย่างไรในฉากนั้น

ต่อไปนี้เป็นพารามิเตอร์ที่ FreeCamera ใช้ -

Name
Position
Scene

ArcRotateCamera

กล้องนี้หมุนรอบจุดหมุนเป้าหมายที่กำหนด สามารถควบคุมได้ด้วยเคอร์เซอร์และเมาส์หรือด้วยเหตุการณ์การสัมผัส พารามิเตอร์คือชื่ออัลฟาเบต้ารัศมีและเป้าหมาย

ไวยากรณ์

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

ArcRotateCameraชี้ไปในทิศทาง + x ในการเปลี่ยนตำแหน่งของกล้องให้ใช้ปุ่มsetPosition ทรัพย์สิน.

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

ArcRotateCamera เป็นกล้องที่ยอดเยี่ยมในการสร้างภาพเคลื่อนไหว คำสั่งต่อไปนี้จะช่วยให้คุณหมุนกล้องไปรอบ ๆ เป้าหมาย -

scene.activeCamera.alpha += .01;

TouchCamera

Touch เป็นประเภทหนึ่งของ 'คำแนะนำ' อาจเป็นบนแผ่นหรือหน้าจอโดยใช้นิ้วสไตลัสถุงมือเท้าหรือตัวชี้เลเซอร์ การเคลื่อนไหวใด ๆ ที่สามารถรับรู้ได้ ... ถือได้ว่าเป็นท่าทาง

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ TouchCamera -

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

GamepadCamera

กล้องนี้ออกแบบมาเป็นพิเศษเพื่อใช้กับเกมแพด

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ Gamepad Camera -

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

DeviceOrientationCamera

กล้องนี้ได้รับการออกแบบมาเป็นพิเศษเพื่อตอบสนองต่อเหตุการณ์การวางแนวอุปกรณ์เช่นเมื่อคุณเอียงอุปกรณ์ไปข้างหน้าหรือข้างหลังซ้ายหรือขวาเป็นต้น

ไวยากรณ์

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

ติดตาม

FollowCamera ได้รับการออกแบบมาเพื่อติดตามรายการฉากใด ๆ ที่มีตำแหน่ง สามารถติดตามจากด้านหลังด้านหน้าหรือจากมุมใดก็ได้

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ FollowCamera -

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

VirtualJoysticksCamera

กล้องนี้ออกแบบมาเพื่อตอบสนองต่อเหตุการณ์จอยสติ๊กเสมือนจริง จอยสติ๊กเสมือนคือกราฟิก 2 มิติบนหน้าจอที่ใช้ในการควบคุมกล้องหรือรายการฉากอื่น ๆ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ VirtualJoysticksCamera -

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

Anaglyph กล้อง

AnaglyphCamera ใช้สำหรับแว่นตา 3 มิติสีแดงและสีฟ้า ใช้เทคนิคการกรองหลังการประมวลผล

AnaglyphArcRotateCamera

ต่อไปนี้เป็นไวยากรณ์สำหรับ AnaglyphArcRotateCamera -

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

AnaglyphFreeCamera

ต่อไปนี้เป็นไวยากรณ์สำหรับ AnaglyphFreeCamera -

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

VRDeviceOrientationFreeCamera

VRDeviceOrientationFreeCamera ใช้ FreeCamera เป็นพื้นฐานดังนั้นคุณสมบัติและวิธีการของ FreeCamera จึงอยู่ใน VRDeviceOrientationFreeCamera ของเราด้วย

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ VRDeviceOrientationFreeCamera -

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

WebVRFreeCamera

WebVRFreeCamera ใช้ FreeCamera เป็นพื้นฐานดังนั้นคุณสมบัติและวิธีการของ FreeCamera จึงอยู่ใน WebVRFreeCamera ของเราด้วย

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ WebVRFreeCamera -

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

ในการสาธิตส่วนใหญ่คุณจะเห็น attachControl ที่กล้องติดกับผ้าใบ

ตัวอย่าง

camera.attachControl(canvas, true);