当前位置：首页 > news >正文

Babylon.js学习之路《四、Babylon.js 中的相机（Camera）与视角控制》

news 来源：原创 2025/7/14 7:25:45

在这里插入图片描述

文章目录

1. 引言：为什么相机是 3D 场景的“眼睛”？
- 1.1 相机的核心作用
- 1.2 常见相机类型概览
2. 相机基础参数解析
- 2.1 通用属性
- 2.2 相机坐标系
3. 详解常用相机类型
- 3.1 自由相机（FreeCamera）
- 3.2 弧形旋转相机（ArcRotateCamera）
- 3.3 跟随相机（FollowCamera）
- 3.4 其他相机类型（快速概览）
4. 视角交互实战技巧
- 4.1 多相机切换
- 4.2 自定义输入控制
- 4.3 相机动画与过渡
5. 相机性能优化与调试
- 5.1 视锥剔除（Frustum Culling）
- 5.2 避免过度绘制
- 5.3 使用调试工具
6. 实战任务
- 任务 1：构建可切换的相机系统
- 任务 2：实现“物体聚焦”功能
7. 常见问题解答
8. 总结与下一章预告
- 8.1 关键知识点回顾
- 8.2 下一章预告

1. 引言：为什么相机是 3D 场景的“眼睛”？

上一章简单介绍了场景中如何添加标准形状的物体，并且介绍了如何调整物体属性，包括位置、旋转、缩放，以及父级关系的设置。
这一章详细介绍一下Babylon中，相机相关的知识。涵盖相机类型、交互配置及实战技巧。

1.1 相机的核心作用

定义用户视角：观察场景的位置、方向、视野范围。
交互基础：通过鼠标/键盘/触控控制视角移动。

1.2 常见相机类型概览

自由相机（FreeCamera）
弧形旋转相机（ArcRotateCamera）
跟随相机（FollowCamera）
第一人称相机（UniversalCamera）

2. 相机基础参数解析

2.1 通用属性

位置（Position）：camera.position = new BABYLON.Vector3(x, y, z)。
目标（Target）：camera.setTarget(new BABYLON.Vector3(x, y, z))。
视野（FOV）：camera.fov = 0.8（弧度制，影响广角效果）。
近裁面与远裁面（Clipping Planes）：

    camera.minZ = 0.1; // 近裁面（避免渲染过近物体）camera.maxZ = 1000; // 远裁面（避免渲染过远物体）

2.2 相机坐标系

局部坐标系：相机的移动方向基于自身朝向。
世界坐标系：相机的移动方向基于全局坐标轴。

3. 详解常用相机类型

3.1 自由相机（FreeCamera）

特点：类似第一人称射击游戏的自由移动视角。
代码创建：

  const camera = new BABYLON.FreeCamera("freeCamera", new BABYLON.Vector3(0, 5, -10), scene);camera.setTarget(BABYLON.Vector3.Zero());

控制配置：
- 键盘移动：默认 WASD 控制前后左右，QE 控制升降。
- 鼠标控制视角：camera.attachControl(canvas, true)。
- 灵敏度调整：

    camera.speed = 0.5; // 移动速度camera.angularSensibility = 2000; // 鼠标灵敏度（值越大越迟钝）

3.2 弧形旋转相机（ArcRotateCamera）

特点：围绕目标点旋转、缩放，适合展示物体。
代码创建：

  const camera = new BABYLON.ArcRotateCamera("arcCam", alpha, beta, radius, // 初始角度（弧度）、半径target, // 目标点（Vector3）scene);camera.attachControl(canvas, true);

关键参数：
- 限制旋转角度：camera.lowerBetaLimit = 0.1; camera.upperBetaLimit = Math.PI/2。
- 限制缩放范围：camera.lowerRadiusLimit = 5; camera.upRadiusLimit = 20。
交互优化：
- 启用惯性效果：camera.inertia = 0.9（拖拽后平滑停止）。

3.3 跟随相机（FollowCamera）

特点：跟随某个物体移动，适合角色扮演游戏。
代码创建：

  const camera = new BABYLON.FollowCamera("followCam", new BABYLON.Vector3(0, 5, -10), // 初始位置scene);camera.radius = 10; // 跟随距离camera.heightOffset = 2; // 垂直偏移camera.lockedTarget = playerMesh; // 绑定目标物体

3.4 其他相机类型（快速概览）

第一人称相机（UniversalCamera）：针对移动端优化的自由相机。
VR 设备相机（WebXRCamera）：通过 WebXR 支持 VR 头显。

4. 视角交互实战技巧

4.1 多相机切换

代码示例：

  const camera1 = new BABYLON.FreeCamera(...);const camera2 = new BABYLON.ArcRotateCamera(...);scene.activeCamera = camera1; // 切换活动相机

4.2 自定义输入控制

覆盖默认按键事件：

  camera.keysUp = [87];    // W 键前进camera.keysDown = [83];  // S 键后退camera.keysLeft = [65];  // A 键左移camera.keysRight = [68]; // D 键右移

添加鼠标滚轮缩放（适用于 ArcRotateCamera）：

  camera.wheelPrecision = 50; // 滚轮灵敏度

4.3 相机动画与过渡

平滑移动相机到新位置：

  BABYLON.Animation.CreateAndStartAnimation("camMove", camera, "position",30, 120, // 帧率、总帧数camera.position, // 起始位置new BABYLON.Vector3(10, 5, 0), // 目标位置BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

5. 相机性能优化与调试

5.1 视锥剔除（Frustum Culling）

原理：只渲染相机视野内的物体。
Babylon.js 默认启用，可通过 mesh.isVisible = false 手动控制。

5.2 避免过度绘制

调整 maxZ 值，减少远处物体渲染。

5.3 使用调试工具

显示相机视锥：

  camera.showFrustum = true; // 显示视锥线框

实时调试参数：通过 scene.debugLayer 调整相机属性。

6. 实战任务

任务 1：构建可切换的相机系统

场景中放置两个相机：自由相机（默认）和弧形旋转相机。
按空格键切换相机，并添加过渡动画。

任务 2：实现“物体聚焦”功能

点击场景中的物体，弧形旋转相机自动对准该物体并调整距离。

  mesh.actionManager = new BABYLON.ActionManager(scene);mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,() => {arcCamera.setTarget(mesh.position);arcCamera.radius = mesh.getBoundingInfo().diagonalLength * 2;}));

7. 常见问题解答

Q1：相机看不到物体？
- 检查相机位置与目标点是否在物体附近。
- 确认物体的位置未被其他物体遮挡。
Q2：移动端触控不灵敏？
- 调整 angularSensibility 和 wheelPrecision。
- 使用 UniversalCamera 替代 FreeCamera。

8. 总结与下一章预告

8.1 关键知识点回顾

自由相机、弧形旋转相机的适用场景与控制优化。
多相机切换与自定义交互逻辑。

8.2 下一章预告

《灯光与阴影：让场景栩栩如生的关键》：学习点光源、方向光与阴影渲染技术。

Babylon.js学习之路《四、Babylon.js 中的相机（Camera）与视角控制》

文章目录 1. 引言：为什么相机是 3D 场景的“眼睛”？1.1 相机的核心作用1.2 常见相机类型概览 2. 相机基础参数解析2.1 通用属性2.2 相机坐标系 3. 详解常用相机类型3.1 自由相机（FreeCamera）3.2 弧形旋转相机（ArcRotat…...

编程日记 2025/7/14 7:25:45

MCP Server多节点滚动升级一致性治理

飞书云文档原链接地址：https://ik3te1knhq.feishu.cn/wiki/W8ctwG2sAiPkrXkpl7ocP0g0njf [!TIP] MCP Server 多节点部署时，滚动发布，MCP Client 侧使用的 Client 连接保证使用的是最新的工具配置信息后续推进：按比例使用旧、新实…...

编程日记 2025/7/14 7:16:26

多线程（二）

今天先来了解一个上一期的遗留概念 —— 前台线程与后台线程一 . 前台线程与后台线程大家应该多多少少都听过酒桌文化，咱们平常吃饭，座位次序是没有那么多讲究的，但是在跟领导吃饭，或者出席宴会和一些重要场所的饭局时&#…...

编程日记 2025/7/14 7:00:04

2025年，大模型LLM还有哪些可研究的方向？

近两年LLM在学术界与工业界的发展大家都有目共睹。到了今年，以预训练LLM为代表的大模型PK上半场已然结束，接下来就要进入下半场大模型2.0时代了。那么在这新赛道，关于大模型我们还有什么可做的创新？要知道，如今的大模…...

编程日记 2025/6/28 23:06:06

VS打断点调试，无法命中断点或断点失效，解决方法

1.打开需要打断点的模块，点击属性，将C/C常规的调试信息格式改为程序数据库（/Zi） 2.将C/C的优化禁用（/Od） 3.将链接器中的生成调试信息改为生成调试信息（/DEBUG） 注：如果需…...

编程日记 2025/7/14 4:42:34

ELF文件详解

ELF 文件不仅仅是一个格式，它是 Linux 世界中程序的"灵魂容器"，承载着程序从编译到执行的整个生命周期。今天咱们来聊一个看起来高深，实际上理解起来其实挺简单的话题—— ELF 文件。不知道你有没有想过：我们敲下./…...

编程日记 2025/6/29 1:16:46

【学习笔记】Shell编程---流程控制语句

最近学了好多个流程控制语句，都有点混乱了，赶紧先把各种用法记录下来！ if 语句语法格式： if 条件测试命令串 then 条件为真时执行的命令 else 条件为假时执行的命令 fi 以关键字if开头，后跟条件测试表达式&…...

编程日记 2025/7/8 12:31:13

TensorFlow 常见使用场景及开源项目实例

TensorFlow 常见使用场景及开源项目实例摘要本文详细介绍了 TensorFlow 在多个领域的典型应用及其对应的开源项目案例。涵盖了图像处理、自然语言处理、语音音频处理、推荐系统与时间序列预测、移动端与边缘计算以及生成式模型与创意应用等多方面内容，列举了大量…...

编程日记 2025/7/9 15:45:54

王炸组合！STL-VMD二次分解 + Informer-LSTM 并行预测模型

往期精彩内容： 单步预测-风速预测模型代码全家桶-CSDN博客半天入门！锂电池剩余寿命预测（Python）-CSDN博客超强预测模型：二次分解-组合预测-CSDN博客 VMD CEEMDAN 二次分解，BiLSTM-Attention预测模型…...

编程日记 2025/6/29 0:52:46

OpenCV进阶操作：风格迁移以及DNN模块解析

文章目录前言一、风格迁移1、风格迁移是什么？2、步骤1）训练2）迁移二、DNN模块1、什么是DNN模块2、DNN模块特点3、流程图4、图像预处理功能三、案例实现1、数据预处理2、加载模型总结前言风格迁移（Style Transfer&#xff0…...

编程日记 2025/6/28 23:27:12

使用bitNet架构

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、配置二、报错总结前言大型语言模型（LLM）面临的挑战：高能耗、高内存需求、部署门槛高。微软提出 BitNet 架构&#x…...

编程日记 2025/6/28 23:06:05

OpenCV中的光流估计方法详解

文章目录一、引言二、核心算法原理1. 光流法基本概念2. 算法实现步骤三、代码实现详解1. 初始化设置2. 特征点检测3. 光流计算与轨迹绘制四、实际应用效果五、优化方向六、结语一、引言在计算机视觉领域，运动目标跟踪是一个重要的研究方向，广泛应用…...

编程日记 2025/6/28 23:39:32

Java集合框架详解与使用场景示例

Java集合框架是Java标准库中一组用于存储和操作数据的接口和类。它提供了多种数据结构，每种数据结构都有其特定的用途和性能特点。在本文中，我们将详细介绍Java集合框架的主要组成部分：List、Set和Queue，并通过代码示例展示它们的…...

编程日记 2025/6/29 0:05:32

多模态融合【十九】——MRFS: Mutually Reinforcing Image Fusion and Segmentation

目录一.摘要二.Introduction 三. 背景与动机四.方法 4.1. 概述 4.2. IGM-Att模块 4.3. PC-Att模块 4.4. 任务头五.实验 5.1. 数据集与实现细节 5.2. 语义分割 5.3. 图像融合 5.4. 消融研究 5.5. IGM-Att和PC-Att的应用增益 5.6. 复杂度讨论 5.7. 目标检测的…...

编程日记 2025/6/29 0:42:45

音频转文字-在线工具包及使用记录

资料来源：https://zhuanlan.zhihu.com/p/269603431（多种方案） 视频教程：https://www.youtube.com/watch?vL1H5ov4WTBg https://github.com/openai/whisper // 创建虚拟环境 python -m venv myvnev// 激活虚拟环境 source myvne…...

编程日记 2025/6/29 0:52:58

Collection collection的遍历方式迭代器遍历不依赖索引 import java.util.ArrayList; import java.util.Collection; import java.util.Iterator;public class mycollection {public static void main(String[] args) {//1.创建集合并添加元素Collection<String> co…...

编程日记 2025/6/29 0:01:58

【阿里云】阿里云 Ubuntu 服务器无法更新 systemd（Operation not permitted）的解决方法

零、前言目前正在使用的Ubuntu服务器中，仅阿里云（不止一台）出现了这个问题，因此我判定是阿里云服务器独有的问题。如果你的服务器提供商不是阿里云，那么这篇文章可能对你没有帮助。如果已经因为升级错误导致依赖冲突…...

编程日记 2025/7/2 10:29:29

wpf DataGrid 行选择命令绑定

在WPF中实现DataGrid行选择与命令绑定的MVVM模式，可通过以下方式结合代码示例实现： 1. ‌基础绑定与命令触发（SelectionChanged事件绑定）‌ 通过Interaction.Triggers捕获SelectionChanged事件，并绑定到ViewModel中的命令： <DataGrid ItemsSource="{Binding I…...

编程日记 2025/6/28 23:06:10

【认知思维】验证性偏差：认知陷阱的识别与克服

什么是验证性偏差验证性偏差（Confirmation Bias）是人类认知中最普遍、最根深蒂固的心理现象之一，指的是人们倾向于寻找、解释、偏爱和回忆那些能够确认自己已有信念或假设的信息，同时忽视或贬低与之相矛盾的证据。这种认知偏差影…...

编程日记 2025/7/11 5:53:32

大容量存储的高性能 T-BOX 方案对智能网联汽车的支撑

在智能网联汽车快速发展的当下，车载 T-BOX（Telematics Box）作为车辆与云端互联的核心枢纽，其性能和可靠性直接决定了用户体验的上限。米客方德（MK）推出的基于 STM32H7RX 主控芯片与 MKDV4GIL-AST&#xff0…...

编程日记 2025/7/10 10:10:20

Linux 内核网络协议栈：从 Socket 类型到协议注册的深度解析

Linux 内核的网络协议栈是一个复杂而高效的体系，涉及多层次的协议处理与数据流转。本文通过分析核心数据结构（如 inetsw 数组、sock_type 枚举）和关键函数（如 inet_add_protocol），深入探讨其工作原理与设计哲学。一、Socket 类型与 sock_type 枚举 1.1 Socket 类型的定…...

编程日记 2025/6/28 23:06:11

vim,gcc/g++,makefile,cmake

一、vim：你的小帮手——文本编辑器它是干嘛的？ 想象你的代码就像是写在一本“程序的笔记本”里，vim就是一个超级厉害的“数字笔记本”或“文字编辑器”。它有什么用？ 编写代码：编辑、修改你的源代码代码高亮&…...

编程日记 2025/6/28 23:10:34

解决 CentOS 7 镜像源无法访问的问题

在国内使用 CentOS 系统时，经常会遇到镜像源无法访问或者下载速度慢的问题。尤其是默认的 CentOS 镜像源通常是国外的，如果你的网络环境无法直接访问国外服务器，就会出现无法下载包的情况。本文将介绍如何修改 CentOS 7 的镜像源为国内镜像源…...

编程日记 2025/7/13 13:58:43

“傅里叶变换算法”来检测货物外形损坏

“傅里叶变换算法”来检测货物外形损坏要使用傅里叶变换算法来检测货物外形损坏，首先需要理解基本概念。傅里叶变换是一种数学变换，用于将信号从时域（或空间域）转换到频域。在图像处理中，二维傅里叶变换可以用来分析…...

编程日记 2025/7/9 23:07:39

python打卡day24

可迭代对象、OS模块知识点回顾： 元组可迭代对象os模块作业：对自己电脑的不同文件夹利用今天学到的知识操作下，理解下os路径 1.元组在day3的打卡内容中就介绍了元组，跟列表比起来就是用了圆括号，有序可以重复&#x…...

编程日记 2025/6/29 0:42:27

MapReduce 入门实战：WordCount 程序

一、引言在大数据处理领域，MapReduce 是一种开创性的编程模型和处理框架，它使得我们能够高效地在大规模分布式系统上处理海量数据。而 WordCount 程序作为 MapReduce 的经典入门案例，堪称大数据领域的 “Hello World”，帮助无数…...

编程日记 2025/6/29 0:40:02

深度剖析：Vue2 项目兼容第三方库模块格式的终极解决方案

当我们为 Vue2 项目引入某些现代 JavaScript 库时，常常会遇到这样的报错： error in ./node_modules/some-lib/lib/index.mjs Cant import the named export xxx from non EcmaScript module这类问题的本质是模块格式的世纪之争 —— ES Module&#xff…...

编程日记 2025/7/11 15:56:07

5.11作业

拓扑图： 需求分析： 要求五台路由器的环回地址均可以相互访问配置： r1 int g 0/0/0 i…...

编程日记 2025/6/28 23:06:12

MyBatis 批量新增与删除功能完整教程

一、功能概述通过 MyBatis 动态 SQL 实现以下功能：批量新增：一次性插入多条员工记录，支持自增主键回填。批量删除：根据 ID 数组一次性删除多条记录。二、代码逐行解析 1. Mapper 接口定义 // 批量新增：传入员工对象集合 void insertAll(List<Emp> empList);// …...

编程日记 2025/6/29 0:55:11

Spark，RDD中的行动算子

RDD中的行动算子 collect算子格式：def collect(): Array[T] 参数说明：该算子没有参数。并以数组的形式返回统计个数 reduce算子格式：def reduce(func: (T, T) > T): T 返回值：返回一个单一的值，其类型与…...

编程日记 2025/6/29 0:58:04

Linux：进程控制2

一：进程程序替换 1. 一旦程序替换成功，就去执行新代码了，原始代码的后半部分已经不存在了 2. exec*系列的函数，没有成功返回值，只有失败返回值-1 在程序替换的过程中，并没有创建新的进程，只是…...

编程日记 2025/6/28 23:53:59

Java jar包程序启动停止脚本 shell bash

启动启动时可指定前缀（名称） start.sh #!/bin/bash # 使用时直接运行# 寻找当前目录下后缀为 .jar 的文件 #options($(find . -maxdepth 1 -type f -name "*.jar")) # 寻找当前目录下后缀为 .jar 的文件，并按时间倒序排序 opt…...

编程日记 2025/7/4 18:15:10

【Linux】进程通信管道

🌻个人主页：路飞雪吖~ 🌠专栏：Linux 目录一、👑进程间通信分类二、👑管道 🌟什么是管道？ 🌟匿名管道 🎉原理： 🔥站在文件描述…...

编程日记 2025/6/29 0:48:06

基于智能家居项目解析DHT11温湿度传感器

一、模块简介 DHT11 是一款数字式温湿度传感器，内部集成了温度传感元件、湿度传感元件以及一个 8 位单片机芯片，用于采集数据和通信。。测量范围：湿度 20%～90% RH，温度 0～50℃ 精度：湿度 5% …...

编程日记 2025/6/28 23:45:13

3.1 泰勒公式出发点

第一步：引入背景与动机首先，泰勒公式（Taylor Series）是数学分析中的一个重要工具，它允许我们将复杂的函数近似为多项式形式。这不仅简化了计算，还帮助我们更好地理解函数的行为。那么为什么我们需要这样一…...

编程日记 2025/6/29 1:30:40

裸机开发的核心技术：轮询、中断与DMA

一、裸机开发的核心技术：轮询、中断与DMA 1. 轮询（Polling） 定义：程序主动、周期性地检查硬件状态或数据。应用场景：适用于简单、实时性要求不高的任务。示例： C while (1) { if (GPIO_ReadPin(SENSOR_P…...

编程日记 2025/6/29 1:14:27

从零开始：使用 Vue-ECharts 实现数据可视化图表功能

目录前言为什么选择 Vue-ECharts案例：Vue-Echart开发一个分组柱状图安装依赖引入全局引入按需引入编写组件总结前言你好，小二！很高兴你愿意分享关于 Vue-ECharts 的使用经验。 📊 Vue-ECharts：让你在 Vue 项…...

编程日记 2025/6/29 0:20:57

Antd中Form详解:

1.获取Form表单值的方式: ① 使用Form.useForm()钩子（推荐方式） const [form] Form.useForm();const getFormValues () > {const values form.getFieldsValue();};<Form form{form}>...<Form.Item label{null}><Button onClick{ge…...

编程日记 2025/6/29 0:21:56

（2）python开发经验

文章目录 1 pyside6加载ui文件2 使用pyinstaller打包更多精彩内容👉内容导航 👈👉Qt开发 👈👉python开发 👈 1 pyside6加载ui文件方法1： 直接加载ui文件 from PySide6.QtWidgets import QAp…...

编程日记 2025/7/10 14:20:05

Landsat 5介绍

USGS Landsat 5 Level 2, Collection 2, Tier 1 数据集可用性：1984-03-16T16:18:01Z–2012-05-05T17:54:06Z 数据集提供程序 USGS Earth Engine 代码段 ee.ImageCollection("LANDSAT/LT05/C02/T1_L2") open_in_new 重新访问间隔：16 天说…...

编程日记 2025/6/29 0:50:45

PowerShell 实现 conda 懒加载

问题执行命令conda init powershell会在 profile.ps1中添加conda初始化的命令。即使用户不需要用到conda，也会初始化conda环境，拖慢PowerShell的启动速度。解决方案本文展示了如何实现conda的懒加载，默认不加载conda环境，只…...

编程日记 2025/6/29 0:06:38

解锁ozon运营新路径：自养号测评技术如何实现降本增效

OZON测评自养号技术在跨境电商运营中具有显著的技术优势，主要体现在环境安全、账号控制、成本效率及风险规避等方面。以下是具体分析： 一：安全可控的测评环境搭建通过模拟俄罗斯本地物理环境和家庭住宅IP，自养号测评可规避平台风…...

编程日记 2025/6/29 0:32:02

算法第十七天｜654. 最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

654. 最大二叉树题目思路与解法 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def constructMaximumB…...

编程日记 2025/6/29 1:05:29

Spring Boot 的自动配置为 Spring MVC 做了哪些事情？

Spring Boot 的自动配置为 Spring MVC 做了大量的工作，极大的简化了我们开发时的配置负担，我们可以快速启动并运行一个基于 Spring MVC 的 Web 应用。以下是 Spring Boot 自动配置为 Spring MVC 所做的主要事情： DispatcherServlet 的自动注册…...

编程日记 2025/7/8 10:12:58

【python】—conda新建python3.11的环境报错

1.报错 conda create -n py3.11 python3.11 --channel https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ Collecting package metadata: done Solving environment: failed PackagesNotFoundError: The following packages are not available from current channel…...

编程日记 2025/6/29 0:08:15