2019年03月_暮志未晚season

12月 11月 10月 08月 07月 06月 05月 04月 03月 02月 01月

翻译 17 Babylonjs入门进阶使用场景加载器加载glTF，OBJ，STL模型

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

2019-03-31 19:40:33 14333 2

翻译 16 Babylonjs基础入门阴影

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

2019-03-22 00:16:53 2407

翻译 15 Babylonjs基础入门高度图

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

2019-03-17 23:28:29 2147

翻译 14 Babylonjs基础入门环境搭建

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

2019-03-17 20:50:51 4351

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

2019-03-10 23:45:34 3548

翻译 12 Babylonjs基础入门精灵图

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

2019-03-10 03:10:40 2468

翻译 11 Babylonjs基础入门射线拾取

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

2019-03-10 01:30:30 2160 1

翻译 10 Babylonjs基础入门鼠标拾取碰撞

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

2019-03-09 21:40:53 2598 2

翻译 9 Babylonjs基础入门模型碰撞

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

2019-03-09 03:57:26 1954 1

翻译 8 Babylonjs基础入门相机，模型碰撞和重力效果

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

2019-03-08 00:30:01 2626

翻译 7 Babylonjs基础入门动画

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

2019-03-06 00:33:26 4805 1

翻译 6 Babylonjs基础入门光源

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

2019-03-03 23:03:08 4165 1