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

在 Babylon.js 中使用 Gizmo：交互式 3D 操作工具

news 来源：原创 2025/5/25 14:05:00

在 3D 应用程序中，交互式操作对象（如平移、旋转、缩放）是一个常见的需求。Babylon.js 提供了一个强大的工具——Gizmo，用于在 3D 场景中实现这些功能。本文将介绍如何在 Babylon.js 中使用 Gizmo，并展示如何通过代码实现交互式操作。

什么是 Gizmo？

Gizmo 是 Babylon.js 中的一种可视化工具，允许用户通过鼠标或触摸屏与 3D 对象进行交互。它通常用于编辑器或需要精细控制对象位置的应用程序中。Gizmo 的主要功能包括：
平移（PositionGizmo）：移动对象的位置。

旋转（RotationGizmo）：旋转对象。
缩放（ScaleGizmo）：缩放对象的大小。
边界框（BoundingBoxGizmo）：显示对象的边界框，并支持整体操作。

如何使用 Gizmo

以下是如何在 Babylon.js 中使用 Gizmo 的基本步骤。

1. 引入 Gizmo 模块

首先，确保引入了 Babylon.js 的 Gizmo 模块：

import * as BABYLON from "@babylonjs/core";
import "@babylonjs/core/Gizmos/gizmoManager"; // 引入 Gizmo 模块

2. 创建 GizmoManager

`GizmoManager` 是管理 Gizmo 的核心类。通过它，你可以启用或禁用不同类型的 Gizmo。

const gizmoManager = new BABYLON.GizmoManager(scene);

3. 启用 Gizmo

通过 `GizmoManager`，你可以为选中的对象启用平移、旋转或缩放 Gizmo。

// 启用平移 Gizmo
gizmoManager.positionGizmoEnabled = true;// 启用旋转 Gizmo
gizmoManager.rotationGizmoEnabled = true;// 启用缩放 Gizmo
gizmoManager.scaleGizmoEnabled = true;// 启用边界框 Gizmo
gizmoManager.boundingBoxGizmoEnabled = true;

4. 设置选中的对象

通过 `GizmoManager` 的 `attachToMesh()` 方法，将 Gizmo 附加到指定的对象上：

const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
gizmoManager.attachToMesh(box); // 将 Gizmo 附加到 box 上

完整示例代码

以下是一个完整的示例，展示如何在 Babylon.js 中使用 Gizmo：```javascript

// 创建 Babylon.js 引擎和场景
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);// 创建摄像机
const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);// 创建光源
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);// 创建一个立方体
const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);// 创建 GizmoManager
const gizmoManager = new BABYLON.GizmoManager(scene);// 启用平移、旋转和缩放 Gizmo
gizmoManager.positionGizmoEnabled = true;
gizmoManager.rotationGizmoEnabled = true;
gizmoManager.scaleGizmoEnabled = true;// 将 Gizmo 附加到立方体上
gizmoManager.attachToMesh(box);// 渲染循环
engine.runRenderLoop(() => {scene.render();
});// 窗口大小调整事件
window.addEventListener("resize", () => {engine.resize();
});

画面效果参考：

Gizmo 的高级功能

1. 自定义 Gizmo 的外观

你可以通过修改 Gizmo 的材质、颜色或大小来自定义其外观。例如：

gizmoManager.gizmos.positionGizmo.updateGizmoRotationToMatchAttachedMesh = false;
gizmoManager.gizmos.positionGizmo.xGizmo.dragBehavior.dragDeltaRatio = 2; // 调整灵敏度

2. 限制 Gizmo 的操作

你可以限制 Gizmo 的操作范围或方向。例如，只允许在 X 轴上平移：

gizmoManager.gizmos.positionGizmo.xGizmo.isEnabled = true;
gizmoManager.gizmos.positionGizmo.yGizmo.isEnabled = false;
gizmoManager.gizmos.positionGizmo.zGizmo.isEnabled = false;

3. 使用边界框 Gizmo

边界框 Gizmo 可以显示对象的边界框，并支持整体操作：

gizmoManager.boundingBoxGizmoEnabled = true;

总结

Gizmo是 Babylon.js 中用于交互式操作 3D 对象的工具。
通过 `GizmoManager`，你可以轻松启用平移、旋转、缩放和边界框 Gizmo。
你可以自定义 Gizmo 的外观和行为，以满足特定需求。

在 Babylon.js 中使用 Gizmo：交互式 3D 操作工具

在 3D 应用程序中，交互式操作对象（如平移、旋转、缩放）是一个常见的需求。Babylon.js 提供了一个强大的工具——Gizmo，用于在 3D 场景中实现这些功能。本文将介绍如何在 Babylon.js 中使用 Gizmo，并展示如何通过代码实…...

编程日记 2025/5/25 14:05:00

蓝桥杯练习日常|递归-进制转换

蓝桥云课760数的计算一、递归题目： 我的解题代码： #include <iostream> using namespace std; int sum0; int main() {// 请在此输入您的代码int n;cin>>n;int fun(int n);fun(n); cout<<sum<<\n;return 0; } // void fu…...

编程日记 2025/5/22 10:15:26

LabVIEW滤波器选择与参数设置

在信号处理应用中，滤波器是去除噪声、提取目标信号的重要工具。LabVIEW 提供多种类型的滤波器（如低通、高通、带通、带阻），用户需要根据采样频率、信号特性和应用需求合理选择滤波器类型及参数设置。本文以采样率 100kHz&#xf…...

编程日记 2025/5/22 2:40:40

【c语言日寄】Vs调试——新手向

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...

编程日记 2025/5/24 9:18:25

C#中的Timers.Timer使用用法及常见报错

System.Timers.Timer 是一个基于服务器的计时器，它可以在应用程序中定期触发事件。这个计时器特别适合用于多线程环境，并且不应该与用户界面(UI)直接交互。在 ASP.NET 中，通常使用 System.Timers.Timer 来处理周期性的任务。主要使用步骤&am…...

编程日记 2025/5/23 17:09:28

chrome小插件：长图片等分切割

前置条件： 安装有chrome谷歌浏览器的电脑使用步骤： 1.打开chrome扩展插件 2.点击管理扩展程序 3.加载已解压的扩展程序 4.选择对应文件夹 5.成功后会出现一个扩展小程序 6.点击对应小程序 7.选择图片进行切割，切割完成后会自动保存代码…...

编程日记 2025/5/22 8:41:08

mysql数据被误删的恢复方案

文章目录一、使用备份恢复二、使用二进制日志（Binary Log）三、使用InnoDB表空间恢复四、使用第三方工具预防措施数据误删是一个严重的数据库管理问题，但通过合理的备份策略和使用适当的恢复工具，可以有效地减少数据丢失的风险…...

编程日记 2025/5/25 3:27:03

K8S-Pod资源清单的编写，资源的增删改查，镜像的下载策略

1. Pod资源清单的编写 1.1 Pod运行单个容器的资源清单 ##创建工作目录 mkdir -p /root/manifests/pods && cd /root/manifests/pods vim 01-nginx.yaml ##指定api版本 apiVersion: v1 ##指定资源类型 kind: Pod ##指定元数据 metadata:##指定名称name: myweb ##用户…...

编程日记 2025/5/21 8:19:31

Unity Line Renderer Component入门

Overview Line Renderer 组件是 Unity 中用于绘制连续线段的工具。它通过在三维空间中的两个或两个以上的点的数组，并在每个点之间绘制一条直线。可以绘制从简单的直线到复杂的螺旋线等各种图形。 1. 连续性和独立线条连续性：Line Renderer 绘制的线条…...

编程日记 2025/5/23 10:36:07

计算机工程：解锁未来科技之门！

计算机工程与应用是一个充满无限可能性的领域。随着科技的迅猛发展，计算机技术已经深深渗透到我们生活的方方面面，从医疗、金融到教育，无一不在彰显着计算机工程的巨大魅力和潜力。在医疗行业，计算机技术的应用尤为突出。比如&a…...

编程日记 2025/5/20 8:18:44

翻译：How do I reset my FPGA?

文章目录背景翻译：How do I reset my FPGA?1、Understanding the flip-flop reset behavior2、Reset methodology3、Use appropriate resets to maximize utilization4、Many options5、About the author 背景在写博客《复位信号的同步与释放（同步复…...

编程日记 2025/5/18 2:10:35

在Unity中使用大模型进行离线语音识别

文章目录 1、Vosk下载下载vosk-untiy-asr下载模型在项目中使用语音转文字音频转文字2、whisper下载下载unity项目下载模型在unity中使用1、Vosk 下载下载vosk-untiy-asr Github链接：https://github.com/alphacep/vosk-unity-asr 进不去Github的可以用网盘夸克网盘链接：h…...

编程日记 2025/5/20 14:39:45

SpringBoot+Vue使用Echarts

前言在vue项目中使用echarts，本次演示是使用vue2 1 前端准备 echarts官网： https://echarts.apache.org/zh/index.html 官网提供了基本的使用说明和大量的图表 1.1 下载echarts 执行命令 npm install echarts 直接这样执行很可能会失败，…...

编程日记 2025/5/25 2:21:33

【QT】-explicit关键字

explicit explicit 是一个 C 关键字，用于修饰构造函数。它的作用是防止构造函数进行隐式转换。为什么需要 explicit？ 在没有 explicit 的情况下，构造函数可以用于隐式类型转换。这意味着，如果你有一个接受某种类型的参数的构造…...

编程日记 2025/5/24 23:59:23

docker: Device or resource busy

(base) [rootbddx-vr-gpu-bcc2 /]#rm -rf /ssd1/docker/overlay2/8d96a51e3fb78e434fcf2b085e952adcc82bfe37485d427e1e017361a277326d/ rm: cannot remove ‘/ssd1/docker/overlay2/8d96a51e3fb78e434fcf2b085e952adcc82bfe37485d427e1e017361a277326d/merged’: Device or re…...

编程日记 2025/5/25 2:18:24

Vue - toRefs() 和 toRef() 的使用

一、toRefs() 在 Vue 3 中,toRefs()可以将响应式对象的属性转换为可响应的 refs。主要用于在解构响应式对象时，保持属性的响应性。 1. 导入 toRefs 函数 import { toRefs } from vue;2. 将响应式对象的属性转换为 ref const state reactive({count: 0,message:…...

编程日记 2025/5/21 8:01:08

（2024，MLLM，Healthcare，综述）多模态学习是否已在医疗保健领域实现通用智能？

Has Multimodal Learning Delivered Universal Intelligence in Healthcare? A Comprehensive Survey 目录 0. 摘要 1. 简介 5. MLLM 5.1 模态编码器与跨模态适配器 5.1.1 图像编码器 (Image Encoder) 5.1.2 语言模型 (Language Model) 5.1.3 跨模态适配器 (Cross-moda…...

编程日记 2025/5/23 5:50:11

css命名规范——BEM

目录引言 BEM是什么？块Block 元素Element 修饰语Modifier BEM解决了哪些问题？在流行框架的组件中使用 BEM 格式实战认识设计图如何使用当前的css规范正确命名？引言 css样式类命名难、太难了，难于上青天，这个和js变量命名还不一样。看看项目中五花八门的样…...

编程日记 2025/5/25 7:43:06

使用PHP函数 “is_object“ 检查变量是否为对象类型

在PHP中，变量可以保存不同类型的值，包括整数、字符串、数组、布尔值等等。其中，对象是一种特殊的数据类型，用于封装数据和方法。在处理PHP代码中，我们经常需要检查一个变量是否为对象类型，以便进行相应的处…...

编程日记 2025/5/20 22:30:29

Golang：使用DuckDB查询Parquet文件数据

本文介绍DuckDB查询Parquet文件的典型应用场景，掌握DuckDB会让你的产品分析能力更强，相反系统运营成本相对较低。为了示例完整，我也提供了如何使用Python导出MongoDB数据。 Apache Parquet文件格式在存储和传输大型数据集方面变得非常流行。最…...

编程日记 2025/5/22 13:36:10

Moretl FileSync增量文件采集工具

永久免费: <下载> <使用说明> 我们希望Moretl FileSync是一款通用性很好的文件日志采集工具,解决工厂环境下,通过共享目录采集文件,SMB协议存在的安全性,兼容性的问题. 同时,我们发现工厂设备日志一般为增量,为方便MES,QMS等后端系统直接使用数据,我们推出了增量采…...

编程日记 2025/5/23 10:26:54

消息队列篇--原理篇--Pulsar（Namespace，BookKeeper，类似Kafka甚至更好的消息队列）

Apache Pulusar是一个分布式、多租户、高性能的发布/订阅（Pub/Sub）消息系统，最初由Yahoo开发并开源。它结合了Kafka和传统消息队列的优点，提供高吞吐量、低延迟、强一致性和可扩展的消息传递能力，适用于大规模分布式系…...

编程日记 2025/5/23 10:17:12

linux 扩容

tmpfs tmpfs 82M 0 82M 0% /run/user/1002 tmpfs tmpfs 82M 0 82M 0% /run/user/0 [输入命令]# fdisk -lu Disk /dev/vda: 40 GiB, 42949672960 bytes, 83886080 sectors Units: sectors of 1 * 512 512 bytes Sector size (logi…...

编程日记 2025/5/20 22:00:56

数据表中的数据查询

文章目录一、概述二、简单查询1.列出表中所有字段2.“*”符号表示所有字段3.查询指定字段数据4.DISTINCT查询三、IN查询四、BETWEEN ADN查询1.符合范围的数据记录查询2.不符合范围的数据记录查询五、LIKE模糊查询六、对查询结果排序七、简单分组查询1.统计数量2.统计计算平均…...

编程日记 2025/5/25 1:45:38

深入了解 Java split() 方法：分割字符串的利器

Java 提供的 split() 方法是 String 类中一个常用的工具，它可以将一个字符串根据指定的分隔符切割成多个子字符串，并以字符串数组的形式返回。这个方法常用于字符串的处理、数据解析等场景。本文将详细介绍 Java 中 split() 方法的使用方式，并…...

编程日记 2025/5/23 6:01:36

Ubuntu 安装 docker 配置环境及其常用命令

Docker 安装与配置指南本文介绍如何在 Ubuntu 系统上安装 Docker，解决权限问题，配置 Docker Compose，代理端口转发，容器内部代理问题等并进行相关的优化设置。参考官方文档：Docker 官方安装指南一、安装 Docker 1…...

编程日记 2025/5/20 5:45:49

Android Studio安装配置

一、注意事项想做安卓app和开发板通信，踩了大坑，Android 开发不是下载了就能直接开发的，对于新手需要注意的如下： 1、Android Studio版本，根据自己的Android Studio版本对应决定了你所兼容的AGP（Android…...

编程日记 2025/5/23 4:38:48

leetcode 面试经典 150 题：有效的括号

链接有效的括号题序号20题型字符串解法栈难度简单熟练度✅✅✅ 题目给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符串是否有效。有效字符串需满足： 左括号必须…...

编程日记 2025/5/25 11:58:20

C语言指针_野指针指针运算

野指针： 概念：野指针就是指针指向的位置是不可知的（随机的、不正确的、没有明确限制的） 指针非法访问： int main() {int* p;//p没有初始化，就意味着没有明确的指向//一个局部变量不初始化，放…...

编程日记 2025/5/21 6:13:05

【HarmonyOS之旅】基于ArkTS开发(二) -＞ UI开发之常见布局

目录 1 -> 自适应布局 1.1 -> 线性布局 1.1.1 -> 线性布局的排列 1.1.2 -> 自适应拉伸 1.1.3 -> 自适应缩放 1.1.4 -> 定位能力 1.1.5 -> 自适应延伸 1.2 -> 层叠布局 1.2.1 -> 对齐方式 1.2.2 -> Z序控制 1.3 -> 弹性布局 1.3.1…...

编程日记 2025/5/25 10:11:15

java基础学习——jdbc基础知识详细介绍

引言数据的存储我们在开发 java 程序时，数据都是存储在内存中的，属于临时存储，当程序停止或重启时，内存中的数据就会丢失，我们为了解决数据的长期存储问题，有以下解决方案： 通过 IO流书记&…...

编程日记 2025/5/23 20:40:17

第十五届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组

第十五届的题目在规定时间内做出了前5道，还有2道找时间再磨一磨。现在把做的一些思路总结如下： 题1：握手问题问题描述小蓝组织了一场算法交流会议，总共有 50人参加了本次会议。在会议上，大家进行了握手交流。按照惯例…...

编程日记 2025/5/25 11:37:26

基于JAVA的微信点餐小程序设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/5/21 1:37:18

2K320Hz显示器哪个好？

2K320Hz显示器哪个好？320Hz这种高刷新率的显示器确实很少见，那究竟哪个牌子哪个型号更适合你呢？ 1.HKC G27H4Pro - 2K320Hz显示器哪个好外观设计 - HKC G27H4Pro 2K320Hz显示器三面微边框超震撼：采用三面微边框设计&#xff0…...

编程日记 2025/5/25 3:22:28

八股学习微服务篇

微服务篇常见面试内容Spring Cloud 常见组件注册中心Ribbon负载均衡策略服务雪崩常见面试内容 Spring Cloud 常见组件 Spring Cloud有5个常见组件： Eureka/Nacos:注册中心；Ribbon:负载均衡；Feign:远程调用；Hystrix/Sentinel:服…...

编程日记 2025/5/21 6:13:48

C# 中 readonly 与 const 的使用

总目录前言在C#编程中，readonly 和 const 是两个用于定义不可变数据的关键字。它们都旨在创建那些一旦赋值后就不能再改变的字段或变量。尽管这两个关键字看起来相似，但它们有着不同的特性和适用场景。本文将深入探讨 readonly 和 const 的区别&#…...

编程日记 2025/5/19 21:41:53

Spring Boot Starter介绍

前言大概10来年以前，当时springboot刚刚出现并没有流行，当时的Java开发者们开发Web应用主要是使用spring整合springmvc或者struts、iBatis、hibernate等开发框架来进行开发。项目里一般有许多xml文件配置，其中配置了很多项目中需要用到的Be…...

编程日记 2025/5/22 20:41:26

Kafak 单例生产者实现-C#操作

前面写了一篇入门操作的文章，因为工作需要，简单修改了下如何实现单例生产者。 Kafka入门-C#操作_c# kafka-CSDN博客文章浏览阅读1.6k次，点赞20次，收藏9次。2）.报错：“kafka.zookeeper.ZooKeeperClientTimeoutException: Timed out waiting for connection while in state…...

编程日记 2025/5/22 21:55:12

软件开发学习路线——roadmap

推荐软件学习路线网站：https://roadmap.sh/get-started 有有关前端后端开发的学习路径，也有AI，移动开发，管理相关的学习路径会有相应的词条路径，深入学习右上角可以设置学习任务的完成情况...

编程日记 2025/5/3 15:15:07

移动端VR处理器和传统显卡的不同

骁龙 XR 系列芯片更多地依赖 AI 技术来优化渲染过程，而传统的 GPU 渲染则倾向于在低画质下运行以减少负载。这种设计是为了在有限的硬件资源下（如移动端 XR 设备）实现高性能和低功耗的平衡。以下是具体的分析： 1. AI 驱动的渲染…...

编程日记 2025/5/22 11:09:32

Jenkins下载 Maven、Allure 插件并且配置环境

文章目录 Jenkins在插件中心下载 maven、allure插件maven插件下载allure插件下载配置maven、allure 往期推荐： 最新! 在 Linux上搭建Jenkins环境! Jenkins邮件通知的详细配置含邮件通知模板！ Jenkin配置企业微信通知 Jenkins在插件中心下载 maven、…...

编程日记 2025/5/22 6:03:09

C# OpenCV机器视觉:连通域分割

在一个阳光明媚得有些 “嚣张” 的午后，阿强像只好奇的小松鼠，一头扎进了他那乱得像被打劫过的实验室。这实验室里，各种电路板、奇形怪状的传感器和缠成一团的电线肆意横陈，仿佛在诉说着主人平日里为科研疯狂的 “战斗” 痕迹。阿…...

编程日记 2025/5/21 9:02:22

【嵌入式】总结——Linux驱动开发（三）

鸽了半年，几乎全忘了，幸亏前面还有两篇总结。出于快速体验嵌入式linux的目的，本篇与前两篇一样，重点在于使用、快速体验，uboot、linux、根文件系统不作深入理解，能用就行。重新梳理一下脉络，本…...

编程日记 2025/5/18 15:17:25

python操作mysql

前言在 Python3 中，我们可以使用mysqlclient或者pymysql三方库来接入 MySQL 数据库并实现数据持久化操作。二者的用法完全相同，只是导入的模块名不一样。我们推荐大家使用纯 Python 的三方库pymysql，因为它更容易安装成功。下面我们仍然以之…...

编程日记 2025/5/21 18:11:54

OpenCV：高通滤波之索贝尔、沙尔和拉普拉斯

目录简述什么是高通滤波？ 高通滤波的概念应用场景索贝尔算子算子公式实现代码特点沙尔算子算子公式实现代码特点拉普拉斯算子算子公式实现代码特点高通滤波器的对比与应用场景相关阅读 OpenCV：图像滤波、卷积与卷积核…...

编程日记 2025/5/21 5:08:30

游戏设备升级怎么选？RTX4070独显，ToDesk云电脑更具性价比

过新年、添喜气！正逢节期来临不知道各位是否都跟小编一样在考虑购置生活中的各样所需呐？ 25年可谓是3A游戏大作之年，例如《GTA6》《文明7》《死亡搁浅2》《刺客信条：影》下半年落地的《塞尔达传说：新篇章》《生化危机9…...

编程日记 2025/5/22 23:27:04

【useLayoutEffect Hook】在浏览器完成布局和绘制之前执行副作用

目录前言语法useLayoutEffect 对比 useEffect：示例前言 useLayoutEffect 是 React 中的一个 Hook， 类似于 useEffect，但有一个关键的区别：它会在所有的 DOM 变更之后同步调用 effect。这意味着它可以读取 DOM 布局并同步重新渲…...

编程日记 2025/5/21 1:25:55