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

阅读：评论：0

前言

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

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

优势：

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

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

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

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

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

工具地址：Babylon.js Playground

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

工具地址：Babylon.js Node Material Editor

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

工具地址：Babylon.js Node Geometry Editor

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

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

工具地址：Babylon.js Gui Editor

工具地址：Babylon.js Texture Tools

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

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

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

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

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

box.checkCollisions = true;

最后增加重力效果

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

playground地址：Babylon.js Playground

本文发布于:2024-02-02 17:59:52，感谢您对本站的认可！

标签：专注感觉引擎 js Babylon

留言与评论（共有 0 条评论）