Examples

Animations动画

Animation 101动画

如何添加一个动画

DocumentationPlayground

Animation blending混合动画

将多个动画混合在一起,然后从动画片段移动到另一个动画片段

DocumentationPlayground

Animation weights权重动画

使用权重来把多个动画混合在一起

DocumentationPlayground

Bones 101骨骼

使用骨骼创建复杂动画

DocumentationPlayground

Easing functions缓动函数

以不同缓动函数来创建动画

DocumentationPlayground

Instanced bones骨骼实例

人物行走的骨骼动画

DocumentationPlayground

Morph targets变形目标

在多个目标之间变形一个物体

DocumentationPlayground

Cameras相机

Cameras 101相机

介绍Babylonjs中的相机类型,可以自行调整代码尝试

DocumentationPlayground

Device orientation camera设备方向相机

对诸如移动设备向前或向后倾斜等事件做出反应的相机

DocumentationPlayground

GUI交互组件

3D GUI

Babylon.js的3D图形用户界面,提供3D按钮、3D容器等控件

DocumentationPlayground

3D GUI - MeshButton3D物体3D按钮

使用物体3D按钮来创建自定义的3D按钮

DocumentationPlayground

App Bar (AttachToBoxBehavior)

附加一个菜单到边框上,使菜单里的组件始终面向用户

DocumentationPlayground

GUI

Babylon.js的2D图形用户界面,提供滑块、按钮、多选框等控件

DocumentationPlayground

Interactions & events交互及事件

Actions行为

行为是一种为场景添加交互操作的简单方法

DocumentationPlayground

Drag and drop拖拽操作

用鼠标来移动场景中的物体

DocumentationPlayground

Gizmo/Manipulator操纵杆

用鼠标来调整物体的位置、旋转和缩放

DocumentationPlayground

Keyboard + game loop键盘和场景渲染的应用

使用键盘来移动球体

DocumentationPlayground

Picking选中对象

在屏幕上使用鼠标或触摸选中物体

DocumentationPlayground

Pointer events handling事件处理

处理pointer事件的输入,在控制台看输出效果

DocumentationPlayground

Using DeviceSourceManager

使用键盘或游戏手柄控制船。

DocumentationPlayground

Lights灯光

Directional light直射光

灯光从一个方向照射过来,就像太阳光

DocumentationPlayground

Hemispheric light半球光

模拟环境光

DocumentationPlayground

Light projected texture光投影纹理

模拟聚光灯spotLight的投射效果

DocumentationPlayground

Lights 101灯光

为场景添加灯光

DocumentationPlayground

Point light点光

光源来自于一个固定点,就像灯泡

DocumentationPlayground

Simultaneous lights多个灯光作用

使用多个灯光照射在同一个物体上

DocumentationPlayground

Spot light聚光灯

定义一个照射在指定位置的圆锥形光束

DocumentationPlayground

Loaders外部模型加载器

Asset container资源容器

使用资源容器从一个场景中批量添加或者移除资源

DocumentationPlayground

Assets manager资源管理

使用资源管理器来集中载入多个资源文件

DocumentationPlayground

Cornell box康奈尔盒子

载入一个glTF文件并设置一个环境,已经作为全世界渲染器测试渲染结果的首要选择之一

DocumentationPlayground

Import meshes导入物体

从文件载入一个物体并加入到场景中

DocumentationPlayground

Load glTF model载入glTF格式模型

演示何如简单的载入一个glTF格式3D模型

DocumentationPlayground

Materials材质

Cell Shading赛璐珞(卡通)着色

赛璐珞(卡通)着色材质

DocumentationPlayground

Fire火焰

火焰材质

DocumentationPlayground

Float on Water漂浮于水面

水纹材质的漂浮效果

DocumentationPlayground

Fur动物毛皮

动物毛皮材质

DocumentationPlayground

Glossiness and roughness光泽度和粗糙度

关于标准材质的光泽度和粗糙度功能演示

DocumentationPlayground

Materials材质

为物体添加材质

DocumentationPlayground

MultiMaterial多材质

使用MultiMaterial类,应用多个材质到同一个物体

DocumentationPlayground

PBR材质

基于物理的渲染材质

DocumentationPlayground

ShaderMaterial着色器材质

使用ShaderMaterial着色器材质来创建高阶效果

DocumentationPlayground

Water水流

水纹材质

DocumentationPlayground

X-ray material with Fresnel X射线材质

使用菲涅尔参数来模拟x射线效果

DocumentationPlayground

Meshes物体

Basic elements基本元素

球体, 立方体, 平面, 线条等基本物体

DocumentationPlayground

Basic scene基本场景

展示简单的球体和平面

DocumentationPlayground

Constructive solid geometries构造立体几何

使用CSG方法采用布尔运算来构造新物体

DocumentationPlayground

Curved lines曲线

使用Path3D方法创建一条曲线

DocumentationPlayground

Decals贴花

使用decals贴花来为物体的某一特定部位添加额外的纹理

DocumentationPlayground

Displacement map (CPU)移位贴图

使用移位贴图更新物体的几何形状

DocumentationPlayground

Extrude polygon挤压多边形

使用MeshBuilder方法来生成挤压几何形状数据

DocumentationPlayground

Height map高低图

使用高低图来创建一座高山

DocumentationPlayground

Look at看向某个物体

使用lookAt()函数让物体朝某个特定目标对齐

DocumentationPlayground

Polygon mesh多边形物体

使用PolygonMeshBuilder方法从多边形数据创建物体

DocumentationPlayground

Raycast on height map光投射在高低图的应用

用光投射来获取高低图中的高低位置信息

DocumentationPlayground

Render lines线条的渲染

使用LinesMesh在3D空间中渲染线条

DocumentationPlayground

Ribbons缎带

使用ribbons缎带来创建复杂形状的物体

DocumentationPlayground

Rotating mesh to look at a target让物体'看向'一个目标

使物体面朝指针的方向

DocumentationPlayground

Rotation and scaling旋转和缩放

在3D空间中对物体进行定位布局

DocumentationPlayground

Optimizations性能优化

Clip planes裁剪平面

使用裁剪平面你能够对场景进行整体裁剪

DocumentationPlayground

Hardware instancing硬件实例化

采用硬件实例化方法来高效的复制物体

DocumentationPlayground

Level of detail多层次细节

根据距离来控制多种物体的显示效果,以此来优化场景渲染速度

DocumentationPlayground

Octrees八叉树

处理数千个对象时,使用八叉树来选择显示哪些物体,提升性能

DocumentationPlayground

Particles粒子

A lot of triangles with SPS立体粒子系统

使用立体粒子系统来组成一个立方体

DocumentationPlayground

GPU particles

使用GPU渲染模式,创建海量粒子

DocumentationPlayground

Low lying fog模拟体积雾

使用粒子来模拟形成体积雾效果volumetric fog

DocumentationPlayground

Particle editor粒子编辑器

在线调整粒子的参数并马上看到效果

DocumentationPlayground

Particle helper粒子助手

轻松创建复杂的粒子特效

DocumentationPlayground

Particle sub emitters子粒子发射器

粒子移动或死亡时产生新的粒子,按a键发射

DocumentationPlayground

Particles 101粒子

创建一个粒子系统,并把它附加到物体上

DocumentationPlayground

Particles and mirrors产生粒子镜像效果

产生镜像效果的粒子应用示例

DocumentationPlayground

Particles with custom shader自定义着色器的粒子

使用自定义着色器来显示粒子特效(CPU)

DocumentationPlayground

Solid Particle System and shadows立体粒子系统和阴影

实时计算SPS的阴影

DocumentationPlayground

Solid Particle System collisions立体粒子碰撞检测

使用基础几何形状模拟SPS碰撞

DocumentationPlayground

Solid Particle System facet collision立体粒子三角面碰撞

使用立体粒子系统来模拟复杂的物体碰撞

DocumentationPlayground

Collisions & intersections碰撞和相交

Collisions碰撞

处理基本的碰撞效果,避免相机穿透立方体

DocumentationPlayground

Intersections物体相交

检测物体是否彼此相交

DocumentationPlayground

Physics物理

Cloth模拟衣服

使用物理引擎模拟一件衣服

DocumentationPlayground

Physics物理

在babylon中使用物理引擎

DocumentationPlayground

Shadows阴影

Contact hardening接触强化

当阴影距离投射对象更远时,它会变得更柔和

DocumentationPlayground

Different shadow filters不同类型的阴影滤镜

不同种类的阴影演示

DocumentationPlayground

Multi directional lights with soft shadows多个平行光产生柔和阴影

使用多个平行光投影出柔和阴影

DocumentationPlayground

Point light shadows点光阴影

使用点光来投射阴影

DocumentationPlayground

Self shadowing #1自身阴影-案例1

在做旋转运动的对象上,使用阴影的指数模式来启用对象自身的阴影

DocumentationPlayground

Self shadowing #2自身阴影-案例2

在具有动画的对象上,使用阴影的指数模式来启用对象自身的阴影

DocumentationPlayground

Shadow on transparent textures透明纹理上的阴影

用一个透明的纹理创建真实阴影

DocumentationPlayground

Shadows 101阴影

设置一个具有灯光和物体的场景,让物体投射出不同类型的阴影

DocumentationPlayground

Audio音频

Audio analyzer #1音频分析器

实时分析音频的频率

DocumentationPlayground

Basic sounds基本声音

使用babylon来播放声音

DocumentationPlayground

Sound on mesh物体上的声音

向物体附加一个声音,声音将根据对象位置改变声道强弱

DocumentationPlayground

Special FX特效

Color curves色彩曲线

应用色彩曲线到场景中

DocumentationPlayground

Convolution post-process卷积后期特效

使用ConvolutionPostProcess来为场景添加浮雕滤镜

DocumentationPlayground

Dawn Bringer黎明使者

使用自定义后期特效模拟黎明使者效果

DocumentationPlayground

Default rendering pipeline

Bloom全屏泛光, FXAA抗锯齿, sharpen锐化, grain杂点, vignette屏幕暗角, chromatic aberration色差 and DoF景深

DocumentationPlayground

Depth of field景深

景深特效的应用

DocumentationPlayground

Environment环境

天空盒和雾效果的应用

DocumentationPlayground

Fog雾效果

在场景中模拟雾的效果

DocumentationPlayground

Fresnel菲涅尔特效

模拟菲涅尔透镜来渲染一个球体

DocumentationPlayground

Glass wubble ball扭曲的玻璃球

扭曲的球体效果

DocumentationPlayground

Glow layer辉光

在对象周围产生辉光

DocumentationPlayground

Heatwave热浪

使用自定义后期特效模拟热浪效果

DocumentationPlayground

Highlight layer高亮

高亮一个物体

DocumentationPlayground

Hypnotizing infinite loader载入动画(催眠圆环)

视觉吸引(类似催眠)的加载动画

DocumentationPlayground

Lens effects镜头特效

使用LensRenderingPipeline创建虚化效果

DocumentationPlayground

Lens flares光晕

为相机模拟一个光晕

DocumentationPlayground

Motion blur运动模糊

使用standard rendering pipeline模拟运动模糊,移动相机可以看到效果

DocumentationPlayground

Portals传送门

使用自定义着色器创建传送门特效

DocumentationPlayground

RGB Shift Glitch抖音特效

使用自定义后期特效模拟抖音特效

DocumentationPlayground

Realtime reflection实时反射

使用reflection probes来模拟实时反射

DocumentationPlayground

Realtime refraction实时折射

使用reflection probes来模拟实时折射

DocumentationPlayground

Refraction and Reflection折射与反射

模拟灯光如何反射和折射一个球体

DocumentationPlayground

SSAO rendering pipeline

屏幕空间环境光遮挡

DocumentationPlayground

SSAO rendering pipeline (WebGL2)

屏幕空间环境光遮挡,使用WebGL2

DocumentationPlayground

Sprites精灵

载入和显示精灵

DocumentationPlayground

Volumetric Light Scattering体积光散射(神光)

模拟由于光线撞击大气而产生的光散射

DocumentationPlayground

Warp speed !光速

使用自定义着色器来制作穿越星系特效

DocumentationPlayground

Textures

360 photos全景图片

轻松的展示和控制全景图片

DocumentationPlayground

360 videos全景视频

轻松的播放和控制全景视频

DocumentationPlayground

Basis texture loading特殊纹理加载

载入一个Basis格式的纹理

DocumentationPlayground

Bump texture凹凸纹理

使用法线贴图模拟凹凸质感

DocumentationPlayground

Custom render targets自定义渲染目标

使用render target textures生成程序纹理数据

DocumentationPlayground

Equirectangular map as reflection texture全景图作为反射纹理

使用全景图作为反射纹理

DocumentationPlayground

Image texture图片纹理

应用一个具有透明像素的图片到物体

DocumentationPlayground

Local cubemaps立方体贴图

使用局部模式改进立方体贴图的显示

DocumentationPlayground

Mirrors镜面反射

在Babylon中使用镜面反射

DocumentationPlayground

ProceduralTexture程序纹理

使用程序纹理快速生成木纹、草地、大理石和火焰

DocumentationPlayground

Saving dynamic texture on disk动态纹理应用

使用DynamicTexture保存运行时生成的纹理

DocumentationPlayground

Starfield procedural texture宇宙纹理

使用宇宙纹理来模拟太空飞行

DocumentationPlayground

Video texture视频纹理

把视频作为一个纹理添加到物体上

DocumentationPlayground

VR虚拟现实

WebVR

在WebVR中查看一个物体,并与GUI交互

DocumentationPlayground

Misc.其他演示

Charting

创建一个3D柱状图进行演示

DocumentationPlayground

No results found.

Please, choose an example in the list