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

学习threejs，导入babylon格式的模型

news 2025/6/8 10:15:24

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.BabylonLoader babylon模型加载器
  • 二、🍀导入babylon格式的模型
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中导入babylon格式的模型，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.BabylonLoader babylon模型加载器

THREE.babylon用于加载和处理babylon格式3D模型文件的扩展。

babylon：
Babylon三维格式，即.babylon格式，是Babylon.js定义的一种用于存储3D场景和模型的格式。

特性：

  • 基于JSON：Babylon格式基于JavaScript Object Notation（JSON）进行描述，这使得它具有良好的可读性和可扩展性。
  • 完整性：该格式不仅包含3D模型的几何结构、材质、纹理等信息，还包含了场景设置、摄像机参数、光照效果等，用于完整地描述一个3D场景。
  • 高效渲染：Babylon.js引擎能够高效地解析和渲染Babylon格式的场景和模型，提供逼真的视觉效果。

应用场景：

Babylon三维格式广泛应用于Web开发和游戏开发领域。开发者可以使用Babylon.js引擎加载和渲染Babylon格式的3D模型，创建各种精美的3D场景和动画效果。此外，Babylon格式还支持与其他3D模型格式进行互转，如.glb/.gltf、.stl、.obj等，这进一步扩大了其应用场景。

转换工具与方法：

  • 在线转换工具（链接地址）：可以使用在线的模型转换工具，如3D转Babylon网站，将其他格式的3D模型转换为Babylon格式。这些工具通常支持多种模型格式文件之间的互转，并且操作简便。
  • Babylon.js官方工具：Babylon.js官方也提供了一些工具和方法，用于将3D模型转换为Babylon格式。例如，可以使用Babylon.js的在线模型查看工具导出Babylon格式的模型，或者通过编写脚本使用Babylon.js的API进行格式转换。

支持的软件与平台：
Babylon三维格式得到了多款软件和平台的支持。例如，一些3D建模软件（如Blender、3DMAX等）可以导入和导出Babylon格式的模型。此外，Babylon.js引擎本身也支持在多种浏览器和平台上运行，使得开发者可以在不同的环境中展示和使用Babylon格式的3D模型。
注意事项：

  • 文件大小与转换时间：转换时间长度主要与模型的大小和面数相关，文件越大、模型面数越多，转换需要的时间就越长。
  • 兼容性：虽然Babylon三维格式得到了广泛的支持，但在某些特定的软件或平台上可能仍然存在兼容性问题。因此，在进行格式转换之前，最好先确认目标软件或平台是否支持Babylon格式。

二、🍀导入babylon格式的模型

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、创建三个THREE.DirectionalLight平行光源dir1、dir2、dir3，设置平行光源的位置，scene中添加dir1、dir2、dir3。创建THREE.SpotLight聚光灯光源spotLight，设置spotLight的位置信息，场景scene中添加spotLight。
  • 5、加载几何模型：创建THREE.BabylonLoader加载器loader，loader调用load方法加载‘skull.babylon’模型。在load回调函数中，回调函数获取babylon场景对象loadedScene，loadedScene设置第一个子对象材质为THREE.MeshLambertMaterial漫反射材质，loadedScene赋值给scene。具体代码参考代码样例。
  • 6、加入THREE.OrbitControls鼠标交互控件，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>导入babylon格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/BabylonLoader.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/OrbitControls.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器，设置渲染器大小var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 设置相机位置和方向camera.position.x = 30;camera.position.y = 30;camera.position.z = 30;camera.lookAt(new THREE.Vector3(0, 0, 0));var orbit = new THREE.OrbitControls(camera);var dir1 = new THREE.DirectionalLight();dir1.position.set(-30, 30, -30);scene.add(dir1);var dir2 = new THREE.DirectionalLight();dir2.position.set(-30, 30, 30);scene.add(dir2);var dir3 = new THREE.DirectionalLight();dir3.position.set(30, 30, -30);scene.add(dir3);// 添加聚光灯光源，设置光源位置var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(30, 30, 30);scene.add(spotLight);// 渲染器绑定页面元素document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var controls = new function () {};var gui = new dat.GUI();var loader = new THREE.BabylonLoader();var group = new THREE.Object3D();loader.load("../assets/models/babylon/skull.babylon", function (loadedScene) {// 场景方式加载babylon模型loadedScene.children[1].material = new THREE.MeshLambertMaterial()scene = loadedScene;});render();function render() {stats.update();orbit.update();requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下：
在这里插入图片描述

相关文章：

学习threejs，导入babylon格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.BabylonLoader babyl…...

编程日记 2025/1/10 7:13:23

03.MPLS静态LSP配置实验

MPLS静态LSP配置实验 1、实验环境2、基础配置开启全局mpls接口下开启mpls配置静态LSP配置FEC从1.1.1.1到3.3.3.3配置FEC从3.3.3.3到1.1.1.13、信息查看查看LFIB表（标签转发信息表）查看FIB表（转发信息表）查看详细FFIB表tracert lsp iptracert -vping lsp ip4、抓包验证1、实…...

编程日记 2025/1/10 7:08:18

程序血缘分析技术在工商银行软件工程中的应用

当前，随着软件领域技术更新换代速度的日益加快，市场需求也变得更加多样化和个性化，业界普遍通过加速产品迭代来满足客户需求，但在此过程中也暴露出一些研发管理痛点问题，如服务和程序类资产信息分散于各个不同的应用和系统中，信息归集费时费力；设计、开发和测试人员无法…...

编程日记 2025/1/10 7:04:13

计算机毕业设计Django+Tensorflow音乐推荐系统 音乐可视化 卷积神经网络CNN LSTM音乐情感分析 机器学习 深度学习 Flask 大

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/1/10 6:58:08

macOS 使用 FreeRDP 远程访问 Windows：完整指南20250109

&#x1f5a5;️ macOS 使用 FreeRDP 远程访问 Windows&#xff1a;完整指南 引言 随着远程办公需求的快速增长&#xff0c;跨平台远程管理已经成为不可或缺的技能之一。作为一款开源轻量的远程桌面协议实现工具&#xff0c;FreeRDP 为 macOS 用户提供了一个简单、高效的解决…...

编程日记 2025/1/10 6:53:03

Java agent

‌ Java Agent是一种特殊的Java程序&#xff0c;它可以在JVM启动时或运行时动态加载&#xff0c;用于监控和修改其他Java应用程序的行为‌。通过Java Agent&#xff0c;开发者可以在不修改目标应用程序源码的情况下&#xff0c;动态地插入功能&#xff0c;如性能分析、日志记录…...

编程日记 2025/1/10 6:51:01

Web无障碍

文章目录 &#x1f7e2;Web Accessibility-Web无障碍&#x1f7e2;一、Web Accessibility-Web1. web无障碍设计2. demo3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢) 如有其他更好方案&#xff0c;可以私信我哦✒️总结 &#x1f7e2;Web Accessibility-Web无障碍…...

编程日记 2025/1/10 6:46:56

概率基本概念 --- 离散型随机变量实例

条件概率&独立事件 随机变量 - 离散型随机变量 - 非离散型随机变量 连续型随机变量奇异性型随机变量 概率表示 概率分布函数概率密度函数概率质量函数全概率公式贝叶斯公式 概率计算 数学期望方差协方差 计算实例 假设有两个离散型随机变量X和Y&#xff0c;它们代…...

编程日记 2025/1/10 6:43:54

毕业项目推荐：基于yolov8/yolov5/yolo11的动物检测识别系统（python+卷积神经网络）

文章目录 概要一、整体资源介绍技术要点功能展示&#xff1a;功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出&#xff08;xls格式&#xff09;功能6 支持切换检测到的目标查看 二、数据集三、算法介绍1. YO…...

编程日记 2025/1/10 6:42:52

基于 WEB 开发的高校学籍管理系统设计与实现

标题:基于 WEB 开发的高校学籍管理系统设计与实现 内容:1.摘要 摘要&#xff1a;随着信息技术的不断发展&#xff0c;高校学籍管理系统的信息化建设已成为必然趋势。本文以高校学籍管理系统为研究对象&#xff0c;探讨了基于 WEB 开发的高校学籍管理系统的设计与实现。通过对系…...

编程日记 2025/1/10 6:39:48

阿里云发现后门webshell，怎么处理，怎么解决？

当收到如下阿里云通知邮件时&#xff0c;大部分管理员都会心里一惊吧&#xff01;出现Webshell&#xff0c;大概是网站被入侵了。 尊敬的 xxxaliyun.com&#xff1a; 云盾云安全中心检测到您的服务器&#xff1a;47.108.x.xx&#xff08;xx机&#xff09;出现了紧急安全事件…...

编程日记 2025/1/10 6:38:47

HTB：Bank[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 提取出靶机TCP开放端口 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用curl对域名进行访问…...

编程日记 2025/1/10 6:36:45

如何用数字万用表测量是否漏电？

测量电气设备或线路是否漏电是确保安全的重要步骤。台式数字万用表&#xff08;DMM&#xff09;是一种常见的测试工具&#xff0c;它可以帮助我们检测和确认是否存在漏电现象。本文将详细介绍如何使用台式数字万用表进行漏电检测&#xff0c;包括准备工作、具体操作步骤和安全注…...

编程日记 2025/1/10 6:32:40

黑马跟学.苍穹外卖.Day04

黑马跟学.苍穹外卖.Day04 苍穹外卖-day04课程内容1. Redis入门1.1 Redis简介1.2 Redis下载与安装1.2.1 Redis下载1.2.2 Redis安装 1.3 Redis服务启动与停止1.3.1 服务启动命令1.3.2 客户端连接命令1.3.3 修改Redis配置文件1.3.4 Redis客户端图形工具 2. Redis数据类型2.1 五种常…...

编程日记 2025/1/10 6:29:36

uniapp使用scss mixin抽离css常用的公共样式

1、编写通用scss样式文件 // 通用 Flex Mixin mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {display: flex;flex-direction: $direction;justify-content: $justify;align-items: $align;flex-wrap: $wrap; }// 水平居中 mixin flex-…...

编程日记 2025/1/10 6:28:35

用Python解决“A. Accounting”问题：完整教程与代码实现

引言 在这篇文章中&#xff0c;我们将深入探讨编程竞赛中的一道经典问题“A. Accounting”&#xff0c;并用Python实现一个高效的解决方案。本文将涵盖题目分析、算法设计和Python代码实现&#xff0c;以及代码的完整讲解和优化方法。 一、问题描述 在一个遥远的国家里&…...

编程日记 2025/1/10 6:25:32

FreeU: Free Lunch in Diffusion U-Net 笔记

FreeU: Free Lunch in Diffusion U-Net 摘要 作者研究了 U-Net 架构对去噪过程的关键贡献&#xff0c;并发现其主干部分主要在去噪方面发挥作用&#xff0c;而其跳跃连接主要是向解码器模块引入高频特征&#xff0c;这使得网络忽略了主干部分的语义信息。基于这一发现&#…...

编程日记 2025/1/10 6:24:31

腾讯云AI代码助手编程挑战赛-古诗词学习

一、作品介绍 在科技与文化深度交融的当下&#xff0c;“腾讯云 AI 代码助手编程挑战赛 - 每日古诗词” 宛如一颗璀璨的新星&#xff0c;闪耀登场。它绝非一场普通的赛事&#xff0c;而是一座连接编程智慧与古典诗词韵味的桥梁。 这项挑战赛以独特的视角&#xff0c;将每日古…...

编程日记 2025/1/10 6:23:29

链式二叉树，递归的暴力美学

目录 1.链式二叉树概念 2.链式二叉树的实现 3.先序遍历 4.中序遍历 5.后序遍历 6.求链式二叉树的结点个数 7.链式二叉树的叶子结点个数 8.求二叉树的k层的结点个数 9.链式二叉树求深度 10.求值为x的结点 11.链式二叉树的销毁 12.二叉树的层序遍历 13.判断二叉树是否…...

编程日记 2025/1/10 6:22:28

计算机网络之---数据传输与比特流

数据传输的概念 数据传输是指将数据从一个设备传输到另一个设备的过程。传输过程涉及将高层协议中的数据&#xff08;如包、帧等&#xff09;转化为比特流&#xff0c;在物理介质上传输。 比特流的概念 比特流是数据传输中最基本的单位&#xff0c;它是由0和1组成的连续比特…...

编程日记 2025/1/10 6:21:27

go-zero微服务入门案例

一、go-zero微服务环境安装 1、go-zero脚手架的安装 go install github.com/zeromicro/go-zero/tools/goctllatest2、etcd的安装下载地址根据自己电脑操作系统下载对应的版本&#xff0c;具体的使用自己查阅文章 二、创建一个user-rpc服务 1、定义user.proto文件 syntax &qu…...

编程新知 2025/6/8 7:00:29

关键字--sizeof

sizeof 是 C 中的一个编译时运算符&#xff0c;用于获取一个类型或对象在内存中所占的字节数&#xff08;单位&#xff1a;字节&#xff0c;byte&#xff09;。 用法 获取类型的大小&#xff1a; std::cout << sizeof(int) << std::endl; // 输出int类型的字节数…...

编程新知 2025/6/8 6:07:14

如何使用Webhook触发器，在 ONLYOFFICE 协作空间构建智能工作流

在数字化办公中&#xff0c;ONLYOFFICE 协作空间作为一款功能强大的文档协作平台&#xff0c;提供了丰富的自动化功能。对于开发者而言&#xff0c;Webhook 触发器是实现业务流程自动化与系统集成的关键工具。本文将深入探讨如何在 ONLYOFFICE 协作空间中高效利用 Webhook&…...

编程新知 2025/6/8 4:53:31

【Java后端基础 005】ThreadLocal-线程数据共享和安全

&#x1f4da;博客主页&#xff1a;代码探秘者 ✨专栏&#xff1a;文章正在持续更新ing… ✅C语言/C&#xff1a;C&#xff08;详细版&#xff09; 数据结构&#xff09; 十大排序算法 ✅Java基础&#xff1a;JavaSE基础 面向对象大合集 JavaSE进阶 Java版数据结构JDK新特性…...

编程新知 2025/6/8 4:46:35

【HarmonyOS 5】出行导航开发实践介绍以及详细案例

以下是 ‌HarmonyOS 5‌ 出行导航的核心能力详解&#xff08;无代码版&#xff09;&#xff0c;聚焦智能交互、多端协同与场景化创新&#xff1a; 一、交互革新&#xff1a;从被动响应到主动服务 ‌意图驱动导航‌ ‌自然语义理解‌&#xff1a;用户通过语音指令&#xff08;如…...

编程新知 2025/6/8 3:22:57

数据治理在制造业的实践案例

一、数据治理在制造业的重要性 随着工业4.0的到来，制造业正经历着前所未有的变革。数据治理作为制造业数字化转型的关键组成部分，对提升企业竞争力、优化生产流程、提高产品质量和客户满意度等方面起着至关重要的作用。在制造业中，数据治理不仅涉及到数据的收集、存…...

编程新知 2025/6/8 2:34:18

豆包和deepseek 元宝 百度ai区别是什么

豆包、DeepSeek、元宝和百度 AI 有以下区别&#xff1a; 开发公司 豆包5&#xff1a;由字节跳动公司基于云雀模型开发。DeepSeek4&#xff1a;是深度求索打造的开源多模态大模型。元宝1&#xff1a;是腾讯混元模型的落地产品&#xff0c;整合了 DeepSeek - R1 与混元模型。百…...

编程新知 2025/6/8 1:20:25

使用React+ant Table 实现 表格无限循环滚动播放

数据大屏表格数据&#xff0c;当表格内容超出&#xff08;出现滚动条&#xff09;时&#xff0c;无限循环滚动播放&#xff0c;鼠标移入暂停滚动&#xff0c;鼠标移除继续滚动&#xff1b;数据量小没有超出时不需要滚动。 *使用时应注意&#xff0c;滚动区域高度父元素高度 - 表…...

编程新知 2025/6/8 0:25:05

【Qt】:设置新建类模板

完整的头文件模板 #ifndef %FILENAME%_H #define %FILENAME%_H/*** brief The %CLASSNAME% class* author %USER%* date %DATE%*/ class %CLASSNAME% { public:%CLASSNAME%();~%CLASSNAME%();// 禁止拷贝构造和赋值%CLASSNAME%(const %CLASSNAME%&) delete;%CLASSNAME%&a…...

编程新知 2025/6/7 21:19:00

HarmonyOS运动语音开发：如何让运动开始时的语音播报更温暖

##鸿蒙核心技术##运动开发##Core Speech Kit&#xff08;基础语音服务&#xff09;# 前言 在运动类应用中&#xff0c;语音播报功能不仅可以提升用户体验&#xff0c;还能让运动过程更加生动有趣。想象一下&#xff0c;当你准备开始运动时&#xff0c;一个温暖的声音提醒你“…...

编程新知 2025/6/7 18:56:20