Babylon.js 一个专注web端的3D引擎,飞一般的感觉

2023-12-14 23:50

本文主要是介绍Babylon.js 一个专注web端的3D引擎,飞一般的感觉,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

2011年发布的 WebGL 到今年发布的 WebGPU,Web端的渲染在高速的发展中,做为一个前端你要是错过了 WebRTC, WebGL 千万别错过了 WebGPU,再不卷 3D 就老了


一、Babylon是什么?

世界上最强大、最漂亮、最简单的 Web 渲染引擎之一。对所有人完全开放和免费。尽可能简单,让每个人都能将他们的想法变为现实。

优势:

1、基于 typescript 开发,轻量,功能丰富,文档清晰,社区活跃,运营团队热情

2、背景优势,Babylon 是微软的一个团队在做,而 Three 是 mrdoob 由 actionscriot 开发后迁移到 webgl 上来的。虽然 Three 的社区庞大,但从架构的合理性已经项目的可维护性来讲肯定是不如 Babylon

3、走在 3D 技术前沿,Babylon 支持了 WebGPU,gltf 最新的标准,havok物理引擎等等

二、Babylon 的周边工具

1.调试沙盒

工具地址:Babylon.js Sandbox - View glTF, glb, obj and babylon files

使用该工具可以调试制作好的模型,确保模型都是没问题的

2.playground

工具地址:Babylon.js Playground

这是个相当好用的工具,如果你代码有问题,或者你想给他人分享代码可以直接在这个工具上提交项目,就可以轻松分享,还可以直接调试,用起来真的爽

3.node material editor

工具地址:Babylon.js Node Material Editor

节点材质编辑器比较常见了,就是可以在线编辑节点材质的,这个要配合playgroud使用,编辑好的材质可以直接使用,使用起来简直起飞

 4.Node Geometry Editor

 工具地址:Babylon.js Node Geometry Editor

节点几何编辑器,跟节点材质类似,只不过是用来生成几何体的,对于较为简单机械式的几何形状可以实现编程化

5.GUI 编辑工具

可以直接编辑GUI,通过可视化的界面轻松编辑界面

工具地址:Babylon.js Gui Editor

6.ENV 环境打包工具

工具地址:Babylon.js Texture Tools

使用该工具可以轻松压缩打包 HDR 纹理,实现更小内存有更好的效果

7.Babylon 在线编辑器

这个工具可能比较鸡肋,比较无人问津,听说比较不好用,但是我感觉设计挺超前的,看以后的发展吧

三、快速实现第一人称相机(带碰撞)

使用 Babylon 实现第一人称相机是相当容易而且还带碰撞

首先打开场景和相机的碰撞检测并且设置相机的碰撞体

scene.collisionsEnabled = true;
camera.checkCollisions = true;camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);

然后把需要检测的物体开启碰撞检测

box.checkCollisions = true;

最后增加重力效果

const assumedFramesPerSecond = 60;
const earthGravity = -9.81;
scene.gravity = new BABYLON.Vector3(0, earthGravity / assumedFramesPerSecond, 0);

playground地址:Babylon.js Playground

这篇关于Babylon.js 一个专注web端的3D引擎,飞一般的感觉的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/494345

相关文章

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

SpringBoot集成LiteFlow工作流引擎的完整指南

《SpringBoot集成LiteFlow工作流引擎的完整指南》LiteFlow作为一款国产轻量级规则引擎/流程引擎,以其零学习成本、高可扩展性和极致性能成为微服务架构下的理想选择,本文将详细讲解Sp... 目录一、LiteFlow核心优势二、SpringBoot集成实战三、高级特性应用1. 异步并行执行2

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件(Component)1.2 规则(Rule)1.3 上下文(Conte

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

MySQL 存储引擎 MyISAM详解(最新推荐)

《MySQL存储引擎MyISAM详解(最新推荐)》使用MyISAM存储引擎的表占用空间很小,但是由于使用表级锁定,所以限制了读/写操作的性能,通常用于中小型的Web应用和数据仓库配置中的只读或主要... 目录mysql 5.5 之前默认的存储引擎️‍一、MyISAM 存储引擎的特性️‍二、MyISAM 的主