欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Babylonjs 官网demo预览图合集整理 带说明

程序员文章站 2022-03-16 08:10:01
整理一份官方demo预览图,方便看图时可以直接了解所运用的相关技术,部分带简略文字说明可以从图片名称找到github内的源码,或者添加前缀访问 https://www.babylonjs.com/demos/+图片名称例如:https://www.babylonjs.com/demos/actions/babylon官网 https://www.babylonjs.com/ 的源码可以从github下载以下预览图为babylon官网部分demohttps://gi......

 

整理一份官方demo预览图,方便看图时可以直接了解所运用的相关技术,部分带简略文字说明

可以从图片名称找到github内的源码,

或者添加前缀访问  https://www.babylonjs.com/demos/+图片名称

例如:https://www.babylonjs.com/demos/actions/ 

Babylonjs 官网demo预览图合集整理 带说明

 

babylon官网 https://www.babylonjs.com/ 的源码可以从github下载

以下预览图为babylon官网部分demo

https://github.com/BabylonJS/Website/tree/master/build/Demos

Babylonjs 官网demo预览图合集整理 带说明

ps.其中有10个因为源码错误 无法加载

 

https://www.babylonjs.com/community/     【注意communitydemos的区别】

babylon官网的Demos,其中有些是跳转链接,无源码,有些作者在游戏内放了github源码地址

Babylonjs 官网demo预览图合集整理 带说明

 

预览图:

ActionBuilder 按钮开关灯 在3dmax内实现的动画,网页端点击从指定帧开始播放

Babylonjs 官网demo预览图合集整理 带说明

Actions 点击模型触发开关灯,线框模式切换

Babylonjs 官网demo预览图合集整理 带说明

 

AdvancedShadows 不同灯光阴影

Babylonjs 官网demo预览图合集整理 带说明

Amp360Video 播放全景视频

Babylonjs 官网demo预览图合集整理 带说明

 

AnimatedGif 切换例子特效

Babylonjs 官网demo预览图合集整理 带说明

AssetsManager 资源加载 头骨材质 

Babylonjs 官网demo预览图合集整理 带说明

AudioAnalyser 声音播放

Babylonjs 官网demo预览图合集整理 带说明

AudioAnalyzer 声音播放

Babylonjs 官网demo预览图合集整理 带说明

Bones 骨骼动画

Babylonjs 官网demo预览图合集整理 带说明

 

Boom 爆炸效果 物理碰撞

Babylonjs 官网demo预览图合集整理 带说明

Bump 灯光材质 法线贴图

Babylonjs 官网demo预览图合集整理 带说明

CellShading

Babylonjs 官网demo预览图合集整理 带说明

 

CGS 模型组合 模型挖掉另一个模型Babylonjs 官网demo预览图合集整理 带说明

Charting 柱形动画

Babylonjs 官网demo预览图合集整理 带说明

CustomRenderTarget 自定义渲染目标

Babylonjs 官网demo预览图合集整理 带说明

CustomShader 自定义着色器shader 

Babylonjs 官网demo预览图合集整理 带说明

Dancers 多人跳舞 镜像instance复制 查看帧率

Babylonjs 官网demo预览图合集整理 带说明

Dancing CSG 跳舞音乐+CGS模型组合

Babylonjs 官网demo预览图合集整理 带说明

Decals 鼠标点击位置贴花 类似子弹打击墙壁后生成的贴图

Babylonjs 官网demo预览图合集整理 带说明

DefaultRenderingPipeline

Babylonjs 官网demo预览图合集整理 带说明

 

DisplacementMap

Babylonjs 官网demo预览图合集整理 带说明

Distraction 赛车

Babylonjs 官网demo预览图合集整理 带说明

DOF

Babylonjs 官网demo预览图合集整理 带说明

DragNDrop 拖拽模型 垂直地板时的拖拽效果最好,如果视角侧着,位移计算有问题,需要设置垂直面的值

Babylonjs 官网demo预览图合集整理 带说明

Espilit 有光影贴图的房子 【经典模型,开启inspector后可以调试查看运用了lightmap】

Babylonjs 官网demo预览图合集整理 带说明

ExtrudePolygon 控制部分模型显示消失

Babylonjs 官网demo预览图合集整理 带说明

Facets 小球物理碰撞

Babylonjs 官网demo预览图合集整理 带说明

FatObjects Fast 2d动画 快速

Babylonjs 官网demo预览图合集整理 带说明

 

FatObjects Fat

Babylonjs 官网demo预览图合集整理 带说明

FatObjects Slim

Babylonjs 官网demo预览图合集整理 带说明

FatObjects Slow 2D动画 慢速

Babylonjs 官网demo预览图合集整理 带说明

 

Flat2009 住宅屋

Babylonjs 官网demo预览图合集整理 带说明

 

FlightHelmet 飞行员头盔

Babylonjs 官网demo预览图合集整理 带说明

Fog 雾气  远处隐藏在雾里

Babylonjs 官网demo预览图合集整理 带说明

Fresnel 菲涅尔透镜效果

Babylonjs 官网demo预览图合集整理 带说明

Fur 毛发效果

Babylonjs 官网demo预览图合集整理 带说明

GlowingEspilit 添加VR版本

Babylonjs 官网demo预览图合集整理 带说明

GLTF 面部表情动画

Babylonjs 官网demo预览图合集整理 带说明

GLTFMeshPrimitiveAttributeTest 原始节点测试

Babylonjs 官网demo预览图合集整理 带说明

GLTFNormals 法线

Babylonjs 官网demo预览图合集整理 带说明

GUI 界面按钮点击

Babylonjs 官网demo预览图合集整理 带说明

Heart 心脏动画 火焰粒子特效

Babylonjs 官网demo预览图合集整理 带说明

Heightmap 山地高度图

Babylonjs 官网demo预览图合集整理 带说明

Highlights 高光

Babylonjs 官网demo预览图合集整理 带说明

HillValley 小镇图

Babylonjs 官网demo预览图合集整理 带说明

HillValleyVR 小镇图VR版

Babylonjs 官网demo预览图合集整理 带说明

Ink 黑板写字

Babylonjs 官网demo预览图合集整理 带说明

InstancedBones 骨骼动画

Babylonjs 官网demo预览图合集整理 带说明

Instances 高度图地形重力移动 最关键是树模型的instance镜像复制节省资源

Babylonjs 官网demo预览图合集整理 带说明

Instances2 飞船引擎

Babylonjs 官网demo预览图合集整理 带说明

Lens 透镜丁达尔现象

Babylonjs 官网demo预览图合集整理 带说明

Lights 灯光

Babylonjs 官网demo预览图合集整理 带说明

Lines 线

Babylonjs 官网demo预览图合集整理 带说明

LOD 远距离隐藏优化

Babylonjs 官网demo预览图合集整理 带说明

LookAt 朝向 修改模型朝向

Babylonjs 官网demo预览图合集整理 带说明

Mansion 公馆 火车在动  火车蒸汽粒子特效

Babylonjs 官网demo预览图合集整理 带说明

MansionVR 版 古堡VR

Babylonjs 官网demo预览图合集整理 带说明

MorphTargets 变形工具

Babylonjs 官网demo预览图合集整理 带说明

MotionBlur 动态模糊

Babylonjs 官网demo预览图合集整理 带说明

Multimaterial 多材质  3dmax导出多材质模型,在.gltf .glb查看貌似有问题,求大佬解惑  

这个是代码实现的多材质,mesh也可以通过代码合并

Babylonjs 官网demo预览图合集整理 带说明

Octree 八叉树

Babylonjs 官网demo预览图合集整理 带说明

 

Particles 粒子特效Babylonjs 官网demo预览图合集整理 带说明

 

Particles2 粒子特效Babylonjs 官网demo预览图合集整理 带说明

PBRGlossy 光滑PBR头盔  PBR材质调整metal和rougness值

Babylonjs 官网demo预览图合集整理 带说明

PBRGlossyBloom 光滑头盔

Babylonjs 官网demo预览图合集整理 带说明

PBRRough 粗糙

Babylonjs 官网demo预览图合集整理 带说明

PBR材质

Babylonjs 官网demo预览图合集整理 带说明

Physics 物理效果

Babylonjs 官网demo预览图合集整理 带说明

Planet 星球

Babylonjs 官网demo预览图合集整理 带说明

PointLightShadowMap 点光源阴影

Babylonjs 官网demo预览图合集整理 带说明

Polygon 多边形 鸟

Babylonjs 官网demo预览图合集整理 带说明

PPBloom 光华

Babylonjs 官网demo预览图合集整理 带说明

PPConvolution 对卷积

Babylonjs 官网demo预览图合集整理 带说明

PPRef 在镜头前面多一层反射

Babylonjs 官网demo预览图合集整理 带说明

Procedural 程序控制的自动

Babylonjs 官网demo预览图合集整理 带说明

RefProbe 反射采样

Babylonjs 官网demo预览图合集整理 带说明

Refraction 折射

Babylonjs 官网demo预览图合集整理 带说明

Retail 零售店

Babylonjs 官网demo预览图合集整理 带说明

 

Ribbons 彩带

Babylonjs 官网demo预览图合集整理 带说明

 

 

SelfShadowing 自身光影

Babylonjs 官网demo预览图合集整理 带说明

Shadows 影子

Babylonjs 官网demo预览图合集整理 带说明

Simplification 减面 babylon自动减面优化

Babylonjs 官网demo预览图合集整理 带说明

SoftShadows 柔和阴影

Babylonjs 官网demo预览图合集整理 带说明

 

SpaceDeK 太空站游戏素材Babylonjs 官网demo预览图合集整理 带说明

Spaceship 太空飞船

Babylonjs 官网demo预览图合集整理 带说明

 

SPF 等离子星环Babylonjs 官网demo预览图合集整理 带说明

 

Sponza 古堡 官方团队demoBabylonjs 官网demo预览图合集整理 带说明

 

SponzaDynamicShadows 古堡阴影 官方团队demoBabylonjs 官网demo预览图合集整理 带说明

 

SPSCollisions SPS碰撞

Babylonjs 官网demo预览图合集整理 带说明

SSAO 环境光屏蔽

Babylonjs 官网demo预览图合集整理 带说明

 

SSAO2 环境光屏蔽 参数控制Babylonjs 官网demo预览图合集整理 带说明

 

StandardRenderingPipeline 输送线渲染

Babylonjs 官网demo预览图合集整理 带说明

 

TheCar 车 光晕就是白色面片

Babylonjs 官网demo预览图合集整理 带说明

 

Train 火车移动

Babylonjs 官网demo预览图合集整理 带说明

 

Tunnel 地穴洞Babylonjs 官网demo预览图合集整理 带说明

 

V8 引擎动画Babylonjs 官网demo预览图合集整理 带说明

 

VertexData 顶点 云滚动动画Babylonjs 官网demo预览图合集整理 带说明

 

Views 多镜头Babylonjs 官网demo预览图合集整理 带说明

 

Viper 蝰蛇飞机Babylonjs 官网demo预览图合集整理 带说明

 

VolumetricLightScattering 体积光分散Babylonjs 官网demo预览图合集整理 带说明

 

WCafe 咖啡厅Babylonjs 官网demo预览图合集整理 带说明

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文地址:https://blog.csdn.net/maki077/article/details/109249786

相关标签: babylonjs 前端