![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
BabylonJS
文章平均质量分 60
入门介绍
_菠菜
这个作者很懒,什么都没留下…
展开
-
Babylongjs-音频和声音
如何播放声音和音乐Babylon.js 声音引擎基于Web Audio 规范。我们决定不提供音频标签或其他机制的后备。因此,要使用我们的声音引擎,您需要使用兼容网络音频的浏览器。尽管如此,如果您在不兼容的浏览器上使用它,它不会破坏我们引擎的其余部分,它只会不播放声音。声音引擎提供环境声音、空间化声音和定向声音。它可以通过代码或通过加载 .babylon 文件来创建。正如您将看到的,它遵循引擎其余部分的简单而强大的理念。支持的声音格式是浏览器中的一种。通常至少是.mp3和.wav。创建环境声音原创 2021-12-28 09:37:12 · 548 阅读 · 0 评论 -
Babylongjs-动画高级API
从 Babylon.js v3.3 开始,您可以使用 promise 来等待动画结束:var anim = scene.beginAnimation(box1, 0, 100, false);console.log("before");await anim.waitAsync();console.log("after");控制动画每个 Animation 都有一个被称为currentFrame指示当前动画关键点的属性。对于高级关键帧动画,您还可以定义用于在关键帧之间插入(过渡)的函原创 2021-12-25 20:43:45 · 1048 阅读 · 0 评论 -
Babylongjs-动画
动画使您的游戏或应用程序变得生动起来。在 BABYLON.js 中有两种主要的方法或制作动画。您可以在渲染周期期间更改场景中对象的属性,我们将在描述Animation方法后查看该属性。动画导论动画的实现必须考虑到所需的动作、时间、产生所需流动性所需的帧数和序列中的关键点。帮助理解如何Babylon.js 处理动画动画是如何实现的。动画是由一系列图像、帧产生的,这些图像一个接一个地显示。这一系列的帧可以是单独的图画,也可以是定格动画、逐帧轻微移动的模型照片在设计阶段,创作者需要考虑一.原创 2021-12-21 13:57:43 · 1644 阅读 · 1 评论 -
Babylongjs-相机控制器及VR设置
目前我们正在使用ArcRotateCamera,它让我们从远处环绕村庄世界。从村里看风景怎么样?让我们将摄像机设置为角色在村子里走来走去,并通过一些调整值从他的肩膀上环顾四周。ArcRotateCamera的创建具有这种形式,与所有相机一样,为了响应用户输入而移动它,我们需要将它附加到画布上。const camera = new BABYLON.ArcRotateCamera("name", alpha angle, beta angle, radius, target position);ca原创 2021-12-16 10:52:01 · 1074 阅读 · 1 评论 -
Babylongjs-光源,阴影
村子里的常年灯光会让睡眠变得非常困难,所以我们将通过关灯来介绍夜间。当然,人们不想在晚上完全黑暗中行走,所以我们将添加一些路灯。由于永恒的夜晚并不比永恒的白天好,我们将添加一个界面来从一个转换到另一个。我们想晚上关灯,白天开灯。让我们添加一个 GUI 控件来执行此操作。有光的地方也有阴影,Babylon.js 也可以添加它们。到目前为止,我们只是在所有场景中使用了半球光。有一系列灯,但目前我们将介绍的唯一新灯是聚光灯。这可以放置在任何地方,并给出一个发光的方向。光的传播由以弧度为单位的角度给出,角度越大原创 2021-12-16 10:28:02 · 663 阅读 · 0 评论 -
Babylongjs-粒子系统和鼠标指针事件
使用粒子系统,利用一个喷泉来展示,构建喷泉主体建筑首先需要一个创建一个喷泉形状的网格,可以利用MeshBuilder的CreateLathe方法来构建:const fountainProfile = [ new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(10, 0, 0), new BABYLON.Vector3(10, 4, 0), new BABYLON.Vector3(8, 4, 0), n.原创 2021-12-16 09:45:21 · 2482 阅读 · 0 评论 -
Babylongjs-高度图,天空盒,图片精灵及K帧动画
我们想把村庄建在山谷里。可以从网格创建山丘,但是还有另一种方法可以为地面网格添加垂直高度。这是使用高度图来实现的,该高度图使用灰色阴影来确定地面的高度。白色区域最高,黑色最低。这个简单的高度图:中间有一个大的黑色区域来容纳村庄,白色区域创造了山丘,而灰色区域则是从山谷中出来的道路。在这张图片中,相机被拉得更远,垂直高度被夸大了。const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGrou..原创 2021-12-16 08:56:39 · 954 阅读 · 0 评论 -
Babylongjs-角色动画
人物动画有时,将模型添加到场景的最简单方法是从其他地方获取模型。这可能是您在最喜欢的模型构建软件中创建的,也可能是您购买的。该模型是一个已建成了自己的骨骼动画。导入后,角色及其骨架将从结果对象的网格和骨架属性中获得。BABYLON.SceneLoader.ImportMeshAsync("mesh name", "path to model", "model file", scene).then((result) => { var dude = result.mes.原创 2021-12-15 16:04:12 · 1038 阅读 · 0 评论 -
Babylongjs-村庄动画
我们村现在不是很热闹,所以让我们添加一些动画。我们仍处于学习 Babylon.js 的早期阶段,离添加 Simms 系列还差得很远。您将要介绍的父级和子级是无声类型和一种将网格链接在一起的方式,以便对父网格的更改也应用于其子网格。我们将为一个非常简单的汽车制作动画,其车轮是父车身的子级。与真正的汽车不同的是,它是车身带动车轮。有一种方式可以让我们的网格父母和孩子表现得像一个真正的家庭,孩子们可以独立于父母行事。干得好,因为我们不希望汽车随车轮旋转。父母和孩子我们将添加一辆穿过村庄的非常简单的汽车原创 2021-12-15 15:48:03 · 614 阅读 · 0 评论 -
Babylongjs-Web应用的布局
虽然您可能希望您的游戏或应用程序占据大部分页面,但您可能需要一些空间作为示例说明。只需将<canvas>元素放在<div> 中并根据需要排列元素。<div id = "holder"> <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->&...原创 2021-12-15 14:21:58 · 3169 阅读 · 0 评论 -
Babylongjs-默认查看器
当我们将村庄作为模型放在查看器中时会发生什么?我们看到地面在闪烁。这是为什么?这是因为默认情况下,查看器已经添加了一个地面,并且在它们重叠的地方显示不正确。我们如何解决这个问题?我们在≤babylon>元素中使用extends属性并将其设置为最小。<babylon extends="minimal" model="path to model file"></babylon>删除默认地面已停止闪烁。然而,默认查看器会计算模型的范围并相应地调整相机。通过...原创 2021-12-15 14:20:36 · 415 阅读 · 0 评论 -
Babylongjs-复制网格
复制网格复制网格的两种主要方法是克隆它或创建它的实例。克隆为您提供了一个独立的网格副本,而实例仍然链接到其材质的原始副本。您无法更改网格实例的材质。网格章节中还提供了创建副本的高级方法。克隆房子使用:clonedHouse = house.clone("clonedHouse")实例化使用:instanceHouse = house.createInstance("instanceHouse")在我们世界的这一点上,所有的房子都将使用与createInstance相同的材料。在我原创 2021-12-15 18:30:00 · 1302 阅读 · 0 评论 -
Babylongjs-组合网格
使用合并网格组合网格const combined = BABYLON.Mesh.MergeMeshes(Array_of_Meshes_to_Combine)在我们的例子中,这将是:const house = BABYLON.Mesh.MergeMeshes([box, roof]);但它会出一些问题,比如这样:我们注意到的第一件事是整个房子只用一种材料覆盖。幸运的是,这可以使用 MergeMeshes 的 multiMultiMultiMaterial 参数来纠正,不幸的是,这原创 2021-12-15 15:30:00 · 660 阅读 · 0 评论 -
Babylongjs-材质的面
每个房子边的材料在方块的属性中,一个是faceUV和Vector4s数组。我们可以使用它来获取图像区域的一部分以应用于框的一个面。在faceUV阵列中,背面编号为 0,正面编号为 1,右侧编号为 2,左侧编号为 3,顶部编号为 4,底部编号为 5。房子的单独示例:其中按顺序包含房屋正面、右侧、背面和左侧的相同尺寸的图像。每个图像的宽度是整个图像宽度的 0.25。为了指定要使用的图像部分,我们给出了两个坐标,一个用于左下角,一个用于右上角。对于整个图像,我们将使用 (0, 0.原创 2021-12-15 15:15:00 · 554 阅读 · 0 评论 -
Babylongjs-纹理
添加纹理:接上一章,房子的雏形完成了。我们需要给房子添加一个标准材质:const material = new BABYLON.StandardMaterial("name", scene);接下来我们让地板变成绿色的草地://创建了一个标准材质,由于只有一个场景,我们可以删除该参数并让它默认为当前场景。const groundMat = new BABYLON.StandardMaterial("groundMat");//让材质变成绿色groundMat.diffuseCol原创 2021-12-15 15:00:00 · 3014 阅读 · 0 评论 -
Babylongjs-创建三棱柱
结合上一篇,我们想要做一个房子出来,但很明显,那个方块还不太够,所以我们可以利用网格生成器,创建一个三棱柱和方块结合起来就像这样代码如下:const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3});roof.scaling.x = 0.75;roof.rotation.z = Math.PI / 2;roof.posi.原创 2021-12-15 15:00:00 · 485 阅读 · 0 评论 -
Babylongjs-放置网格
通常我们创建一个立方体const box = BABYLON.MeshBuilder.CreateBox("box", {width: 2, height: 1.5, depth: 3})创建后没有改变大小的选项,为了改变立方体大小, 我们使用缩放来改变它的大小:const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cubebox.scaling.x = 2;box.scaling.y = 1.5;box.s原创 2021-12-15 14:45:00 · 367 阅读 · 0 评论 -
Babylongjs-在Web上构建一个应用
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Babylon Template</title> <style>...原创 2021-12-14 15:38:47 · 876 阅读 · 0 评论 -
Babylongjs-导入模型
BabyonJS导入模型的API:BABYLON.SceneLoader.ImportMeshAsync(model name, folder path, file name, scene);参数1: Model name : 可以是两种类型:“”或者["1","2"…]参数2: Folder path : 文件路径参数3: File name : 文件名参数4: Scene : 可以指定场景 , 不填写就是默认场景。例如://empty string al...原创 2021-12-14 15:24:19 · 2026 阅读 · 0 评论