现在学习也不晚

用户可以通过三种主要的方式与场景交互：键盘，GUI以及鼠标/移动端的手指事件或游戏手柄。本节主要讲解键盘和鼠标/手指的事件使用。键盘事件通过设置一下代码，你可以得到场景中不同的键盘按键的事件反馈。scene.onKeyboardObservable.add((kbInfo) => { switch (kbInfo.type) { case BABYLON.Key...

对于很多人来说，只是创建了Babylon.js项目相关的gui，其实还需要场景的Observables，特别是scene.onPointerObservable（获取场景触摸事件）。介绍Babylon.js提供了很多事件（比如scene.beforeRender），在v2.4之前没有统一的方法处理它们。从v2.4开始，我们介绍了一种新模式（不会破坏向后兼容性）：Observables。它分为...

凹凸纹理凹凸贴图是一种模拟渲染去面试的凹凸和凹痕的技术。这些是通过从图像穿件发现贴图来实现的。可以在网上查找相关生成方法。 来自图像的原始图像法线贴图凹凸贴图可以与颜色一起使用; 原始图像或下图中的其他图像。创建凹凸贴图示例只需要将凹凸贴图创建一个凹凸纹理设置给材质的bumpTexture即可：var myMaterial = new BABYLON.StandardMateri...

Action是在场景中添加模型交互的一种简单方式。触发器触发需要指定一个动作触发。例如，你可以指定用户单击（或者触摸）模型时，触发回调。要使用Action，你必须实例化BABYLON.ActionManager并添加给模型或场景：mesh.actionManager = new BABYLON.ActionManager(scene);创建ActionManager后，你可以注册触发事件：...

相机默认会在我们我们将其绑定（attachControl）到画布上面时，给我们自动处理操作输入事件。你还可以使用detachControl函数来解除事件的绑定。大多数Babylon.js的专家都使用两步：//第一步，设置相机的activeCamera为你创建的相机scene.activeCamera = myCamera;//第二步，将相机绑定到画布//配置项：画布对象canvas，不阻止...

限制相机距离焦点的距离我们可以通过设置弧形旋转相机的lowerRadiusLimit和upperRadiusLimit来设置相机距离焦点的距离范围。camera.lowerRadiusLimit = 2;camera.upperRadiusLimit = 6;upperRadiusLimit的值不应小于lowerRadiusLimit，避免出现错误或不起作用。反弹效果反弹效果是弧形旋...

Babylon.js声音引擎基于Web Audio规范。官方不决定提供音频标签和其他回退的备用机制。因此，要使用声音引擎，必须使用与Web Audio兼容的浏览器（一般支持WebGL的浏览器都支持）。尽管如此，如果你在不兼容的浏览器上使用，也不会出现异样，只是没有声音播放而已。声音引擎提供背景音频（ambient sound），空间音频（spatialized sound）和定向音频（direct...

为了方便开发者加载多个模型，Babylon.js从1.14版本引入了AssetsManager类。此类可用于将模型导入场景活加载文本和二进制文件。注意：导入的模型具有旋转四元数设置，因此使用rotation设置旋转会发现会旋转到意想不到的位置，如果使用rotation请将rotationQuaternion设置为空。使用AssetsManager初始化和创建任务要使用它，首先要先通过场景...

Babylon.js内置的模型格式是.babylon，Babylon.js可以不需要其它额外的插件即可加载。注意：由于你导入的模型可以具有rotationQuaternion的设置，因此再设置rotate可能出现无法预测的问题，警告基本用法要加载指定的类型的文件，Babylon.js首先需要引入相应文件的插件。目前支持的文件格式类型：glTFOBJSTL如果想要快速添加对所...

在本节中，我们将学习如何在Babylon.js中创建阴影。阴影现在实现的是动态阴影，它们会根据光源动态生成。你可能需要首先查看一个案例：点击这里。实现阴影使用Babylon.js的ShadowGenerator对象很容易实现阴影。此功能使用到了阴影贴图：从光源的角度生成场景的贴图。创建阴影生成器需要两个参数：阴影贴图的大小，以及用于阴影贴图计算的光。var shadowGenerator ...

这一节，我们的目标是了解高度图，并学习如何生成真实的地面。最后效果。如何实现？实现没有高度的一个平面效果很简单，直接可以用Babylon.js的方法生成：var groundMaterial = new BABYLON.StandardMaterial("ground", scene);groundMaterial.diffuseTexture = new BABYLON.Textur...

现在，我们已经学了很多的东西，了解了光，精灵，粒子，材质。但是场景中还缺少一样东西：合适的环境。接下来，我们将从简单的场景颜色（clearColor）开始，再到设置场景的天空盒子，然后使用雾来实现场景效果。一张照片显示Babylon.js场景中移动的雾我们将如何实现这些功能？首先，我们先了解场景类上的两个有趣的属性：scene.clearColor - 更改“背景”颜色。scene....

本教程将讨论Babylon.js中的粒子系统。粒子通常是小型的精灵，用于模拟难以再现的现象，如火，烟，水，或抽象的视觉效果，如魔法闪光和技能特效。这是通过一个区域发出很多粒子组成的云来完成的。从V3.2版本开始，有特定的发射器将该区域约束为一个盒子、球体或圆锥体的形状。你还可以编写自己的自定义函数来控制粒子云和约束区域。GPU粒子是粒子系列的最新成员，可以使用适当的浏览器来提高性能。点击查看...

在本教程中，我们将学习如何使用精灵图。精灵图是2D的图像/动画，并且始终朝向相机，我们将使用它来显示带有alpha通道（透明度）的图像。如今，精灵通常用于显示动画角色和例子，以及模拟像树木这样的复杂3D对象。接下来，我们将实现以上效果：精灵管理器如果你想使用精灵，你需要创建一个“精灵管理器”来优化GPU资源，方法是在一个地方将精灵的多个实例分组。即使你想创建一个精灵，管理器也是必需的。你...

射线Ray就相当于一束光。它用于检查模型网格和细线之间在场景中的碰撞或交叉。在上一个教程中，我们使用函数scene.pick(scene.pointerX,scene.pointerY)：使用鼠标去拾取模型网格（射线从相机位置移动鼠标位置）但本教程中，我们将实现我们从任何点和任何方法投射射线进行拾取。例如，在第三人称视角的射击游戏中：我们的子弹和障碍物之间的碰撞。相关API：https:/...

在使用鼠标拾取对象时，主要困难是单击3D对象，而屏幕是平面2D显示。让我们来看看我们如何通过这个枪支射击示例将鼠标位置转换到3D场景中：上图最后显示效果。如何实现？Babylon.js可以通过提供的功能让你实现这个功能。首先，创建代表墙的平面和显示纹理效果的平面。我们必须要检测UI（用户界面）上面点击，触发事件或，使用pick函数来获取点击位置和场景中的关系的信息。//绑定点击事件...

在动态场景中，对象正则相互移动和交互。要获得最佳渲染效果，你需要知道网格物体何时相互接触。在本教程中，我们将了解碰撞系统的工作原理。如何实现本教程将向你展示两种碰撞检测方法：第一种是在两个网格接触时引发碰撞事件，另一种是检测网格与单个点之间的接触。我们将讨论上面的场景。第一个和第二个球体（气球）将在旋转的地面上碰撞，最后一个球体劲和一个点碰撞。创建此基本场景后，继续阅读以了解如何检查碰撞。...

你玩过第一人称的射击游戏吗？大作CF，CS类型的。本教程，我们将模拟相同的相机运动：摄像机在地面，将和地面产生碰撞效果，并可以与场景中的任何其他模型也会发生碰撞。如何实现碰撞为了实现这种效果，我们必须要做三个步骤：定义并应用重力首先要做的是定义重力矢量，定义重力。在地球这样的世界中，重力的方向是沿Y轴向下，我们可以随意改变它scene.gravity = new BABYLON.Vect...

通过之前的知识，我们可以创建一个完整的场景，添加几何模型，光源，材质等等。但是它是一个静态的场景，接下来，我们将实现让场景动起来。设置场景中的动画主要有两种方式。第一种是方式是定义一组对象，并在每一个对象上面定义模型的情况。第二种方法更复杂的动画，就是在动画运行时修改。基本动画我们需要使用Babylon.js封装的Animation类去实现动画。动画由各种属性和一组键定义。每个键给定当前时间...

光源会在照射方式和颜色方面影响模型网格的显示效果。除非你开启阴影效果，要不然光线可以穿透所有的网格。场景默认的光源数量为4个，可以通过修改增加。光源的类型在Babylon.js中，有四种光源的类型和一系列光源属性。下面介绍一下哪四种点光源点光源是有三维空间中的一个点定义的光。从这一点开始，光向每一个方向发射光线。点光源的一个很好的例子是灯泡。创建点光源需要配置：光源名称，光源位置，场景对...

在Babylon.js中，最常用的两个相机有可能是：用于第一人称运行的通用相机用于查看物体的弧形旋转相机虽然随着WebVR的出现，这可能会改变。对于创建的相机对象，必须要将相机附加到canvas画布上面，才可以被用户使用。camera.attachControl(canvas, true);第二个参数是可选的，默认值为false。如果值为false，Babylon.js会阻止ca...

我们可以将设置颜色和纹理材质应用到网格上面，并且需要有光源才能显示出来。一种材质可以用于任意数量的模型网格。对光的反应通过不同的方法设置材质的颜色和纹理，会出现不同的反应。Diffuse - 漫反射 - 在光下面观察到的材质的基本颜色或者纹理Specular - 高光 - 光线给材质的高亮点Emissive - 自发光 - 材质的颜色和纹理，自身的亮光Ambient - 环境 - 由...

坐标轴在讲这篇之前，我们应该先了解一下坐标轴的含义。大家经常看到的坐标轴是2d坐标轴，就是定义了一个原点，横向x轴，纵向y轴。而在3d坐标系内，我们需要增加第三个轴Z轴。之前了解过Three.js的朋友应该知道，Three.js是使用的右手坐标系，向右方向为X轴正方向，向上为Y轴正方向，指向屏幕的方向为Z轴正方向。而Babylonjs使用的坐标系是左手坐标系，刚好和Three.js 的Z轴正方向...

画线线是由在三维空间中一系列的线段组成的，一个线段的结尾也是下一个线段的开头。线条可以由在三维空间中的一组点进行描述。接下来我们实现一条线，这条线将由三个点组成，这三个点的位置坐标分别是：（0,0,0），（0,1,1），（0,1,0）。我们将使用这些点的位置创建出Babylon.js可以识别的Vector3对象，并将这些Vector3放入按顺序放入一个数组内供Babylon.js使用。第一...

此内容通过官方文档加个人理解制作而成。由于个人能力有限，如果有不理解的请去官网寻找资料，或者加我群互相讨论。MeshBuilder 方法创建模型的方法一般是：var shape = BABYLON.MeshBuilder.Create Shape（名称，配置项，场景）;配置项的参数允许你设置形状大小以及是否可以更新它之类的操作。创建立方体创建一个默认的立方体var box = BA...

最近准备使用业余时间做一款游戏玩玩，为了专注前端三十年称号，所以，准备研究一下浏览器端免费开源的WebGL游戏引擎Babylon.js。首先，查看一下官网的案例：案例可以看到案例当中有一个球和一个平面。这个案例也是相对很简单的。接下来看一下源码实现：在页面当中，首先设置一下css样式和canvas标签<!DOCTYPE html><html lang="zh">...