Babylonjs 6.0文档 Deep Dive - 摄像机介绍(一)

摄像机

在Babylon.js的众多的可用摄像机中,最常用的两种可能是用于“第一人称”运动的通用相机、轨道相机ArcRotateCamera,以及用于现代虚拟现实体验的WebXRCamera。

为了允许用户输入,摄像机必须被附加在canvas中

camera.attachControl(canvas, true);

其中第二个参数是可选的,默认为false,这将阻止画布事件上的默认操作。设置为true可允许画布默认操作。

注意:

1. 输入设备Gamepads作为控制器

2. 为了触摸控制,需要引入PEP或hand.js

通用相机(Universal Camera)

通用相机是在Babylon.js的2.3版本中引入的,可以被键盘、鼠标、触摸板或游戏板控制,具体取决于所使用的输入设备,无需指定的控制器。这个扩展功能取代了之前的自由相机(Free Camera),触摸相机(Touch Camera)和游戏板相机(Gamepad Camera),但被取代的这些仍然是可用的。

通用相机现在是Babylon.js使用的默认相机,如果你想在场景中使用类似第一人称(FPS)的控制器,它是你的最佳选择。babylonjs.com上的所有demo都使用通用相机。将Xbox控制器插入你的电脑,你就可以使用它浏览大多数演示了。

默认操作为:

键盘-左右箭头键左右移动相机,上下箭头键前后移动相机;

鼠标-以相机为原点绕轴旋转相机;

触摸-左右滑动可左右移动相机,上下滑动可前后移动相机;

游戏板-对应于设备的按键

可选动作:

鼠标滚轮-鼠标上的滚轮或触摸板上的滚动动作。

案例:通用相机上添加鼠标滚轮

注意:

在Playground中使用键盘按键的话,需要在渲染区域内部单击获取焦点。

构件一个通用相机

// Parameters : name, position, scene
const camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);

// Targets the camera to a particular position. In this case the scene origin
camera.setTarget(BABYLON.Vector3.Zero());

// Attach the camera to the canvas
camera.attachControl(canvas, true);

弧形旋转摄像机(Arc Rotate Camera)

该相机总是指向给定的目标位置,并且可以以目标为旋转中心围绕该目标旋转。它可以用光标和鼠标控制,也可以用触摸事件控制。

把这个相机想象成一个绕其目标位置运行的相机,或者更具想象力地想象成一颗绕地球运行的卫星。它相对于目标(“地球”)的位置可以通过三个参数设置:

  • alpha(纵向旋转,以弧度为单位)
  • beta(纬度旋转,以弧度为单位)
  • radius(距目标的距离)

插图如下:

由于技术原因,将beta设置为0或PI可能会导致问题,因此在这种情况下,beta会偏移0.1弧度(约0.6度)

beta沿顺时针方向增加,而alpha沿逆时针方向增加。

摄影机的位置也可以通过矢量进行设置,该矢量将覆盖alpha、beta和radius的所有当前设置的值。这可能比计算所需角度容易得多。

无论使用键盘、鼠标还是触摸滑动,左/右方向都会更改alpha,上/下方向会更改beta。

以下可选的的属性也很方便:

  • zoomToMouseLocation - 如果设置为true,将导致鼠标滚轮以当前鼠标位置为中心放大或缩小,而不是以固定的相机目标位置为中心。这样可以轻松地探索大型场景的各个角落。设置此项意味着鼠标滚轮将在鼠标滚轮缩放期间更改相机的目标位置。当设置为true时,使用鼠标滚轮的缩放操作同时进行缩放和少量平移
  • wheelDeltaPercentage - 如果设置为非零值,将导致缩放量设置为相机半径的百分比。这意味着随着距离目标对象越来越近,缩放速度会减慢,这很好,因为这意味着在近距离探索对象时,可以更精确地放置相机。

构件弧形旋转摄像机

// Parameters: name, alpha, beta, radius, target position, scene
const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

// Positions the camera overwriting alpha, beta, radius
camera.setPosition(new BABYLON.Vector3(0, 0, 20));

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

代码示例Playground

默认情况下,也可以使用Ctrl+鼠标左键使用ArcRotateCamera进行平移。您可以使用鼠标右键,方法是在attachControl调用中将useCtrlForPanning设置为false:

camera.attachControl(canvas, noPreventDefault, useCtrlForPanning);

如果需要,还可以通过设置完全禁用平移:

camera.panningSensibility = 0;

以下是演示其中一些内容的演示,以及ArcRotateCamera的其他功能:

地址

跟随相机(FollowCamera)

跟随相机完全和他表面的意义一致。将某个三维网格Mesh作为目标,无论目标从当前任何位置移动到目标任何位置,只要目标移动,跟随相机会随之而动。

跟随相机创建后的厨师位置由创建时的3个参数决定:

  • radius: 距离目标的长度
  • heightOffset:距离目标上方的高度
  • rotationOffset:x、y平面上的角度

摄影机移动到目标位置的速度是通过其加速度(cameraAcceleration)设置的,最高可达最大速度(maxCameraSpeed)。

创建跟随相机的代码:

// Parameters: name, position, scene
const camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

// The goal distance of camera from target
camera.radius = 30;

// The goal height of camera above local origin (centre) of target
camera.heightOffset = 10;

// The goal rotation of camera around local origin (centre) of target in x y plane
camera.rotationOffset = 0;

// Acceleration of camera in moving from current to goal position
camera.cameraAcceleration = 0.005;

// The speed at which acceleration is halted
camera.maxCameraSpeed = 10;

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// NOTE:: SET CAMERA TARGET AFTER THE TARGET'S CREATION AND NOTE CHANGE FROM BABYLONJS V 2.5
// targetMesh created here.
camera.target = targetMesh; // version 2.4 and earlier
camera.lockedTarget = targetMesh; //version 2.5 onwards

示例

立体相机(AnaglyphCameras)

AnaglyphUniversalCamera和AnaglyprAcRotateCamera扩展了通用和弧形旋转相机的使用范围,可用于红色和青色3D眼镜。它们使用后处理(Post-processing)过滤技术。

// Parameters : name, position, eyeSpace, scene
const camera = new BABYLON.AnaglyphUniversalCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

// Parameters : name, alpha, beta, radius, target, eyeSpace, scene
const camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI / 2, Math.PI / 4, 20, BABYLON.Vector3.Zero(), 0.033, scene);

eyeSpace参数设置左眼视图和右眼视图之间的偏移量。一旦你戴上3D眼镜,你可能想尝试一下这个float值。

你可以通过访问维基百科的页面来了解所有关于红蓝立体照片(anaglyphs )的信息。

面向设备相机(Device Orient Camera)

DeviceOrientationCamera专为应对设备响应事件而设计,例如现代移动设备向前、向后、向左或向右倾斜。

// Parameters : name, position, scene
const camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 0, 0), scene);

// Targets the camera to a particular position
camera.setTarget(new BABYLON.Vector3(0, 0, -10));

// Sets the sensitivity of the camera to movement and rotation
camera.angularSensibility = 10;
camera.moveSensibility = 10;

// Attach the camera to the canvas
camera.attachControl(canvas, true);

虚拟摇杆相机(Virtual Joysticks Camera)

VirtualJoysticksCamera是专门为应对虚拟游戏杆事件而设计的。虚拟操纵杆是屏幕上的2D图形,用于控制相机或其他场景项目。

注意:此相机需要第三方文件hand.js。

完整代码示例

document.addEventListener("DOMContentLoaded", startGame, false);
function startGame() {
  if (BABYLON.Engine.isSupported()) {
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);

    BABYLON.SceneLoader.Load("Espilit/", "Espilit.babylon", engine, function (newScene) {

      const VJC = new BABYLON.VirtualJoysticksCamera("VJC", newScene.activeCamera.position, newScene);
      VJC.rotation = newScene.activeCamera.rotation;
      VJC.checkCollisions = newScene.activeCamera.checkCollisions;
      VJC.applyGravity = newScene.activeCamera.applyGravity;

      // Wait for textures and shaders to be ready
      newScene.executeWhenReady(function () {
        newScene.activeCamera = VJC;
        // Attach camera to canvas inputs
        newScene.activeCamera.attachControl(canvas);
        // Once the scene is loaded, just register a render loop to render it
        engine.runRenderLoop(function () {
          newScene.render();
        }),
      }),
    }, function (progress) {
    // To do: give progress feedback to user.
    }),
  }
}

如果你切换回另一台相机,请不要忘记先调用dispose方法。VirtualJoystick会在3D WebGL canvas上创建一个2D canvas,以绘制带有青色和黄色圆圈的游戏杆。如果忘记调用dispose方法,2D画布将保留并继续处理触摸事件。

VR设备摄像机(VR Device Orientation Cameras)

VRDeviceOrientationFreeCamera、VRDeviceOriginationArcRotateCamera和VRDeviceOrientionGamepadCamera是一组较新的相机,它们扩展了上面的相机,以处理VR设备的设备方向。

// Parameters: name, position, scene, compensateDistortion, vrCameraMetrics
const camera = new BABYLON.VRDeviceOrientationFreeCamera("Camera", new BABYLON.Vector3(-6.7, 1.2, -1.3), scene);

// Parameters: name, alpha, beta, radius, target, scene, compensateDistortion, vrCameraMetrics
const camera = new BABYLON.VRDeviceOrientationArcRotateCamera("Camera", Math.PI / 2, Math.PI / 4, 25, new BABYLON.Vector3(0, 0, 0), scene);

// Parameters: name, position, scene, compensateDistortion, vrCameraMetrics
const camera = new BABYLON.VRDeviceOrientationGamepadCamera("Camera", new BABYLON.Vector3(-10, 5, 14));

代码示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/294870.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HttpRunner辅助函数debugtalk.py

辅助函数debugtalk.py Httprunner框架中,使用yaml或json文件进行用例描述,无法做一些复杂操作,如保存一些数据跨文件调用,或者实现一些复杂逻辑判断等,为了解决这个问题,引入了debugtalk.py辅助函数来进行一…

分布式数据之复制(Replication)

1.简介 1.1简介——使用复制的目的 在分布式系统中,数据通常需要被分散在多台机器上,主要为了达到以下目的: 扩展性,数据量因读写负载巨大,一台机器无法承载,数据分散在多台机器 上可以有效地进行负载均衡…

STM32通用定时器-输入捕获-脉冲计数

一、知识点 编码器   两相编码器(正交编码器):两相编码器由 A 相和 B 相组成,相位差为 90 度。当旋转方向为顺时针时,A 相先变化,然后 B 相变化;当旋转方向为逆时针时,B 相先变化…

为了搞项目,我差点把京东 “爬“ 了个遍。。

最近在重构我的准备 智慧校园助手2.0 ,奈何之前的相关数据放在服务器被小黑子黑了,准备重新搞点数据,借此和大家分享一波我之前做项目没数据该咋搞 👀。 Java面试指南 & 大厂学习导航:www.java2top.cn 完整源码获取…

软件测试|SQL中的LIKE模糊匹配该怎么用?

简介 在SQL(Structured Query Language)中,LIKE是一种用于模糊匹配的操作符。通过使用LIKE,我们可以根据模式匹配的方式进行数据检索,而不仅仅局限于完全匹配。本文将详细介绍SQL中LIKE操作符的语法、用法以及一些示例…

柯桥职场英语中千万别把英文邮件中的“OOO”理解成“哦哦哦”!不然可就尴尬了!

有的同学工作中跟老外打交道比较多 尤其是写邮件,除了要把事情交代清楚 还有一些缩写我们也必须掌握 就拿发邮件时老外最爱用到的“OOO”来说 千万不要把“OOO”理解成“噢噢噢” 今天给大家分享几个关于邮件的常用表达 它们真正的意思你都知道吗 01 “OOO”可…

设置进程优先级

#include <windows.h>int main() {// 获取当前进程的句柄HANDLE hProcess GetCurrentProcess();// 设置当前进程的优先级为高SetPriorityClass(hProcess, HIGH_PRIORITY_CLASS);// 执行其他代码return 0; }进程优先级 标志 idle &#xff08;低&#xff09; IDL…

43 tmpfs/devtmpfs 文件系统

前言 在 linux 中常见的文件系统 有很多, 如下 基于磁盘的文件系统, ext2, ext3, ext4, xfs, btrfs, jfs, ntfs 内存文件系统, procfs, sysfs, tmpfs, squashfs, debugfs 闪存文件系统, ubifs, jffs2, yaffs 文件系统这一套体系在 linux 有一层 vfs 抽象, 用户程序不用…

正则表达式解析与应用:深度剖析正则表达式的威力

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Swagger Editor 教程:从入门到精通编写 API 文档

在 API 开发的领域中&#xff0c;Swagger 以其卓越的使用效率与便捷性&#xff0c;备受开发者欢迎。它是一个强大的接口设计工具&#xff0c;允许开发人员对 RESTful API 进行高效的设计、构建及测试工作。本文旨在深入探讨其中一个子工具——Swagger Editor的使用介绍及它的有…

无心剑汉英双语诗《一亩三分地》

一亩三分地 My Small World 二十四年世事变幻 拨号上网曾争分夺秒 如今不限流量肆意冲浪 大数据&#xff0c;云计算&#xff0c;人工智能 洗刷着世间各行各业 周围人&#xff0c;生活不断升级 房子&#xff0c;车子&#xff0c;妻子…… 换了一茬又一茬 洋溢着自豪的表情 而我…

Leetcode_day01_88合并两个有序数组

Leetcode_day01_88合并两个有序数组 题目描述&#xff1a; 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺…

LeetCode 2:两数相加

一、题目描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个…

华为交换机ETH-TRUNK链路聚合lacp模式与手工模式

SW1配置如下 vlan batch 10interface Eth-Trunk1port link-type trunkport trunk allow-pass vlan 10mode lacp-static #手工模式删除改行max active-linknumber 2 #手工模式删除改行trunkport GigabitEthernet 0/0/1 to 0/0/2#配置为主设备&#xff08;修改优先级&…

下载知虾数据分析软件:优化店铺运营、提高转化率的利器

在如今竞争激烈的电商市场中&#xff0c;对销售数据、流量以及买家行为等关键指标的监控和分析至关重要。Shopee平台为卖家提供了一个内置的在线数据分析工具——“Shopee Analytics”&#xff08;知虾分析&#xff09;&#xff0c;让卖家能够轻松实现对店铺运营的优化、提高转…

通过XML您可以发明自己的标签

XML 仅仅是纯文本 XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。 不过&#xff0c;能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签。标签的功能性意义依赖于应用程序的特性。 通过XML您可以发明自己的标签 在之前的例中的标签没有…

bootstrap5实现家具品牌商城网站Furniq(电商通用)

一、需求分析 家具品牌宣传网站是指用于宣传和推广家具品牌的网站。它的功能主要包括以下几个方面&#xff1a; 品牌介绍&#xff1a;家具品牌宣传网站通常会提供关于品牌的背景信息&#xff0c;包括品牌的历史、核心价值观、设计理念等。这些信息可以帮助消费者了解品牌的定位…

JavaScript怎么输出变量的值到控制台

2024年1月5日&#xff0c;周五晚上 通过console.log可以输出变量的值到控制台 let number 100;console.log(number);

风靡全网的Jmeter+ant+jenkins接口自动化测试框架

大致思路&#xff1a;Jmeter可以做接口测试&#xff0c;也能做压力测试&#xff0c;而且是开源软件&#xff1b;Ant是基于Java的构建工具&#xff0c;完成脚本执行并收集结果生成报告&#xff0c;可以跨平台&#xff0c;Jenkins是持续集成工具。将这三者结合起来可以搭建一套We…

如何利用SD-WAN优化企业访问Salesforce的体验?

在这个数字化时代&#xff0c;客户关系管理&#xff08;CRM&#xff09;应用如 Salesforce &#xff0c;已经成为企业运营的重要部分。然而&#xff0c;许多企业在使用 Salesforce 时常遇到页面加载缓慢、甚至完全无法访问等问题&#xff0c;严重影响了他们的工作效率和用户体验…
最新文章