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

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

news 2025/9/19 3:43:45

👨‍⚕️ 主页： 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

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/9/18 12:56:24

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/18 12:54:35

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/7/12 22:48:51

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/9/12 14:19:17

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/7/7 7:20:27

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/9/9 10:10:19

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/9/2 16:55:16

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

编程新知 2025/9/13 17:34:39