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

babylon.js-1：入门篇

news 2026/2/9 2:18:57

最近项目中使用到了 Babylon.js 这门技术，从今天开始，抽取自己写的比较好的拿出来，作为分享案例：

  • 记录学习成果
  • 通过笔记的方式记录技术积累
  • 方便工作中查找翻阅实现案例
    在这里插入图片描述

是什么

  • Babylon.js是一个基于WebGL的开源3D渲染引擎，用于创建交互性的3D应用程序和游戏。

适用人群

  • 使用Babylon.js的技术人员主要包括前端开发人员、游戏开发人员、虚拟现实（VR）和增强现实（AR）开发人员等。他们需要具备一定的3D图形编程、JavaScript和WebGL知识。

能够做什么

  • 使用Babylon.js的业务需求包括但不限于：
    • 游戏开发：Babylon.js提供了丰富的游戏开发功能和工具，可以快速创建高性能的游戏。
    • 建筑和室内设计：Babylon.js可以用于创建逼真的建筑和室内设计模型，以便客户可以在虚拟环境中浏览。
    • 产品展示：Babylon.js可以用于创建互动的产品展示，让用户可以在网页上查看和操作产品的3D模型。

它的前身及优势

  • Babylon.js的前身是WebGL库。它的竞争者包括Three.js、PlayCanvas等。
  • Babylon.js相比竞争者的优势在于：
    • 性能优化：Babylon.js专注于提供高性能的WebGL渲染，使用了许多优化技术来保证动画和渲染的流畅性。
    • 游戏开发功能：Babylon.js提供了许多游戏开发所需的功能和工具，如碰撞检测、物理引擎、动画系统等。
    • 社区支持：Babylon.js拥有活跃的开源社区，用户可以在社区中获取支持和分享经验。

学习成本

  • 学习Babylon.js的难度曲线取决于个人的背景和经验。对于有Web开发经验的人来说，学习Babylon.js相对容易，因为它使用了类似于Web开发的技术栈，如JavaScript、HTML和CSS。如果没有相关的基础知识，学习Babylon.js可能会有一定的学习曲线。

  • 学习Babylon.js之前，建议掌握以下基础知识：

    • JavaScript编程基础：了解JavaScript的语法和基本概念。
    • Web开发基础：了解HTML和CSS的基本概念，以及前端开发的基本流程和工具。
    • 3D图形学基础：了解基本的3D图形学概念，如坐标系、变换、着色器等。

学习规划路线

  • 学习Babylon.js的目录大纲可以包括以下内容：
    • 基本概念和介绍：了解Babylon.js的基本概念和架构。
    • 环境搭建：安装和配置Babylon.js的开发环境。
    • 基本用法：学习如何创建和渲染简单的3D场景。
    • 材质和纹理：学习如何创建和应用材质、纹理和光照效果。
    • 模型加载和动画：学习如何加载和渲染3D模型，并添加动画效果。
    • 用户交互和控制：学习如何实现用户交互，如鼠标和键盘控制。
    • 环境特效和后处理：学习如何添加环境特效和后处理效果，如雾化、阴影等。

以上是学习Babylon.js的一个基本路线，可以根据个人需求和深入程度进行调整和扩展。

与前端框架兼容性

  • Babylon.js可以与现有的热门前端框架（如Vue3和React）很好地融合。它提供了相关的插件和库，使得在这些框架中使用Babylon.js变得更加容易和无缝。

体验所需设备条件

  • 用户基于浏览器访问Web时，需要一台计算机或移动设备，以及一个支持WebGL的现代浏览器。此外，如果用户的设备支持WebVR或WebXR，他们还可以使用虚拟现实（VR）或增强现实（AR）功能。

市场

  • 目前尚没有官方维护的基于Vue3的Babylon.js项目，但可以在GitHub等开源社区中找到一些第三方的开源项目和示例。

社区资源

  • Babylon.js的教程视频、API文档和社区网址如下：
    • 教程视频：视频
    • API文档：API
    • 社区网址：社区

DEMO

  • 使用HTML5、JavaScript和Babylon.js创建的示例，双击打开在浏览器即可浏览：
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Babylon.js Example</title><style>* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;}#canvas {width: 100%;height: 100%;touch-action: none;}</style>
</head>
<body><canvas id="canvas"></canvas><script src="https://cdn.babylonjs.com/babylon.js"></script><script>window.addEventListener('DOMContentLoaded', function() {var canvas = document.getElementById('canvas');var engine = new BABYLON.Engine(canvas, true);var scene = new BABYLON.Scene(engine);var camera = new BABYLON.ArcRotateCamera('camera', Math.PI/3.5, Math.PI/3.5, 4, BABYLON.Vector3.Zero(), scene);camera.attachControl(canvas, true);// 添加灯光var light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);// 创建正方体var box = BABYLON.MeshBuilder.CreateBox('box', {size: 1}, scene);box.material = new BABYLON.StandardMaterial('boxMaterial', scene);box.material.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1); // 淡蓝色engine.runRenderLoop(function() {scene.render();});});</script>
</body>
</html>

以上就是入门级的体验，如果你感兴趣可以关注我，后续分享更多关于babylonjs相关内容，包含如何在Vue3 + Vite + TS使用它，创造一个更为庞大的案例。

效果图

附上效果图更直观
在这里插入图片描述
欢迎有志同道合的技术伙伴一起交流成长~

相关文章：

babylon.js-1：入门篇

最近项目中使用到了 Babylon.js 这门技术&#xff0c;从今天开始&#xff0c;抽取自己写的比较好的拿出来&#xff0c;作为分享案例&#xff1a; 记录学习成果通过笔记的方式记录技术积累方便工作中查找翻阅实现案例 是什么 Babylon.js是一个基于WebGL的开源3D渲染引擎&…...

编程日记 2024/9/29 0:36:23

VS Code调整字体大小

##在工程目录底下.vscode/settings.json添加设置参数 {"editor.fontSize": 15,"window.zoomLevel": 1.5 }...

编程日记 2024/9/29 0:35:22

Python基础语句教学

Python是一种高级的编程语言&#xff0c;由Guido van Rossum于1991年创建。它以简单易读的语法和强大的功能而闻名&#xff0c;被广泛用于科学计算、Web开发、数据分析等领域。 Python的应用领域广泛&#xff0c;可以用于开发桌面应用程序、Web应用、游戏、数据分析、人工智能等…...

编程日记 2024/9/29 0:34:21

ansible 配置

目录 1.集群自动化维护工具 ansible 2.ansible管理架构 3.安装ansible 4.Iventory主机模式 5.通过ping验证 6.ansible常用模块 7.命令行模块 7.1command模块 7.2shell模块 7.3scripts模块 7.4file模块 7.5copy模块​ 7.6yum模块 1.集群自动化维护工具 ansibl…...

编程日记 2024/9/29 0:33:20

堆排序算法详解：原理与Python实现

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storm…...

编程日记 2024/9/29 0:32:19

[论文阅读] ChartInstruct: Instruction Tuning for Chart Comprehension and Reasoning

原文链接&#xff1a;http://arxiv.org/abs/2403.09028 源码链接&#xff1a;https://github.com/vis-nlp/ChartInstruct 启发&#xff1a;本文构建的instruction-tuning数据集以及使用该数据集对模型进行微调的过程都值得学习。 Abstract 研究对象&#xff1a;图表 研究…...

编程日记 2024/9/29 0:31:18

基于springboot+vue学生宿舍管理系统设计与实现

博主介绍&#xff1a;专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…...

编程日记 2024/9/29 0:29:16

【Android】模糊搜索与数据处理

【Android】模糊搜索与数据处理 本篇博客主要以根据输入内容动态获取城市为例进行讲解。 获取城市 这一部分主要是根据输入的信息去动态获取城市信息 首先定义了一个名为 NetUtil 的类&#xff0c;主要用于通过 HTTP 请求获取城市信息。 public class NetUtil {private stat…...

编程日记 2024/9/29 0:27:14

机器学习-KNN

KNN&#xff1a;K最邻近算法&#xff08;K-Nearest Neighbor,KNN&#xff09; 用特征空间中距离待分类对象的最近的K个样例点的类别来预测。 投票法&#xff1a;K 个样例的对数类别。 k1:最近邻分类 k 通常是奇数&#xff08;因为我们根据这个K数据判断类别&#xff0c;如果…...

编程日记 2024/9/29 0:26:13

python 安装包 site-packages

1. site-packages 文件夹的位置 当我们通过 pip 或其他方式安装一个 Python 包时&#xff0c;这些包的文件就会被复制到 site-packages 文件夹下。 site-packages 文件夹通常位于 Python 的安装目录下的 Lib 文件夹内。具体的路径会根据你使用的操作系统和 Python 版本的不同而…...

编程日记 2024/9/29 0:25:12

大数据-151 Apache Druid 集群模式 配置启动【上篇】 超详细！

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

编程日记 2024/9/29 0:24:11

CentOS8.5.2111（3）实验之DHCP服务器架设

一、实验目标 1&#xff0e;掌握DHCP服务器的主配置文件各项申明参数及操作及其含义 2. 具备DHCP 服务器、中继服务器的配置能力 3. 具备测试客户端正常获取服务器分配地址的能力 4. 具备DHCP服务器故障排除能力 二、实训原理/流程 &#xff08;一&#xff09;项目背景 …...

编程日记 2024/9/29 0:23:09

机器学习（4）：机器学习项目步骤（一）——定义问题

1. 机器学习项目的五大步骤 定义问题 收集数据和预处理 选择算法和确定模型 训练拟合模型 评估优化模型性能 2. 定义问题的主要任务 刨析业务场景&#xff0c;设定清晰目标&#xff0c;同时还要确定当前问题属于哪一种机器学习类型。 3. “易速鲜花”项目案例 项目任务&a…...

编程日记 2024/9/29 0:21:07

C#中Socket通信常用的方法

创建Socket 在C#中创建一个Socket对象的基本步骤如下&#xff1a; 引入命名空间&#xff1a; 首先&#xff0c;确保你的文件顶部包含了以下命名空间的引用&#xff1a; using System.Net; using System.Net.Sockets; 创建Socket实例&#xff1a; 你可以创建一个Socket实例&am…...

编程日记 2024/9/29 0:20:06

【JavaEE】——单例模式引起的多线程安全问题：“饿汉/懒汉”模式，及解决思路和方法（面试高频）

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯&#xff0c;你们的点赞收藏是我前进最大的动力&#xff01;&#xff01;希望本文内容能够帮助到你&#xff01; 目录 一&#xff1a;单例模式&#xff08;singleton&#xff09; 1&#xff1a;概念 二&#xff1a;“饿汉模…...

编程日记 2024/9/29 0:19:05

huggingface实现中文文本分类

目录 1 自定义数据集 2 分词 2.1 重写collate_fn方法 3 用BertModel加载预训练模型 4 模型试算 5 定义下游任务 6 训练 7 测试 #导包 import torch from datasets import load_from_disk #用于加载本地磁盘的datasets文件 1 自定义数据集 #自定义数据集 #…...

编程日记 2024/9/29 0:18:03

基于python+控制台+txt文档实现学生成绩管理系统（含课程实训报告）

目录 第一章 需求分析 第二章 系统设计 2.1 系统功能结构 2.1.1 学生信息管理系统的七大模块 2.1.2 系统业务流程 2.2 系统开发必备环境 第三章 主函数设计 3.1 主函数界面运行效果图 3.2 主函数的业务流程 3.3 函数设计 第四章 详细设计及实现 4.1 学生信息录入模块的设计与实…...

编程日记 2024/9/29 0:12:57

Spring Boot 整合MyBatis-Plus 实现多层次树结构的异步加载功能

文章目录 1&#xff0c;前言2&#xff0c;什么是多层次树结构&#xff1f;3&#xff0c;异步加载的意义4&#xff0c;技术选型与实现思路5&#xff0c;具体案例5.1&#xff0c;项目结构5.2&#xff0c;项目配置&#xff08;pom.xml&#xff09;5.3&#xff0c;配置文件&#xf…...

编程日记 2024/9/29 0:11:56

网络工程师指南：防火墙配置与管理命令大全，零基础入门到精通，收藏这一篇就够了

本指南详细介绍了防火墙的配置与管理命令&#xff0c;涵盖了防火墙的工作原理、常见配置命令、安全策略与访问控制、日志管理与故障排查&#xff0c;并通过实战案例展示了如何有效防御网络攻击。通过学习本指南&#xff0c;网络工程师能够系统掌握防火墙的配置与管理技能&#…...

编程日记 2024/9/29 0:09:54

英特尔终于找到了Raptor Lake处理器崩溃与不稳定问题的根源

技术背景 在过去的几个月里&#xff0c;一些用户报告称他们的第13代和第14代Intel Core“Raptor Lake”处理器遇到了系统崩溃和不稳定的情况。这些问题最初在2024年7月底被英特尔识别出来&#xff0c;并且初步的诊断显示&#xff0c;这些问题与微码有关&#xff0c;该微码使CP…...

编程日记 2024/9/29 0:04:42

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40

Kafka主题运维全指南：从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

编程新知 2025/6/10 21:14:43

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2026/1/15 21:57:16

pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...

编程新知 2026/1/26 21:38:28

数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

编程新知 2026/2/4 23:58:11