Babylongjs-高度图,天空盒,图片精灵及K帧动画

我们想把村庄建在山谷里。可以从网格创建山丘,但是还有另一种方法可以为地面网格添加垂直高度。这是使用高度图来实现的,该高度图使用灰色阴影来确定地面的高度。白色区域最高,黑色最低。这个简单的高度图:

 

中间有一个大的黑色区域来容纳村庄,白色区域创造了山丘,而灰色区域则是从山谷中出来的道路。

 在这张图片中,相机被拉得更远,垂直高度被夸大了。

const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to height map", {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 10});

选项的细分属性将地面分成 20 x 20 = 400 个部分。细分越多,高度计算的层次就越精细。minHeight 和 maxHeight 这两个属性分别确定黑色和白色区域的垂直高度,灰色区域相应地缩放。

但显然我们的地面不仅仅是只有高度变化,还应该有草地:

//Create Village ground
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseTexture = new BABYLON.Texture("url to ground texture");
groundMat.diffuseTexture.hasAlpha = true;const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:24, height:24});
ground.material = groundMat;//large ground
const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat");
largeGroundMat.diffuseTexture = new BABYLON.Texture("url to large ground texture");const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to heightmap", {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 4});
largeGround.material = largeGroundMat;
//为了防止出现闪烁的情况
largeGround.position.y = -0.01;

天空盒:

我们可以通过将六个合适的图像应用于大型天空盒立方体的内部来模拟天空的外观。(图像比 3D 对象更容易、更快速地渲染,并且对于远距离的风景也一样好。)

Skybox 图像通常使用CubeTexture加载。CubeTexture 的构造函数接受一个基本 URL 并(默认情况下)附加“ _ px.jpg”、“ _ nx.jpg”、“ _ py.jpg”、“ _ ny.jpg”、“ _ pz.jpg”和“ _ nz.jpg”以加载立方体的 +x、-x、+y、-y、+z 和 -z 面。

 即使天空盒不是反射贴图,也必须使用reflectionTexture应用立方体纹理。将坐标模式设置为 SKYBOX _ MODE 将直接在立方体上绘制纹理而不是模拟反射。

const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:150}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;//限制相机不能穿过地面
camera.upperBetaLimit = Math.PI / 2.2;

图片精灵:

我们将在我们的世界中种植几片树林,每片树林都有 500 棵树。为了保持渲染速度,我们将使用精灵。这些是始终面向相机的二维图像。图如下:

我们需要为精灵图集设置一个管理器:

const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "url to tree image", 2000, {width: 512, height: 1024}, scene);//在一定范围内随机生成500棵树
for (let i = 0; i < 500; i++) {const tree = new BABYLON.Sprite("tree", spriteManagerTrees);tree.position.x = Math.random() * (-30);tree.position.z = Math.random() * 20 + 8;tree.position.y = 0.5;
}for (let i = 0; i < 500; i++) {const tree = new BABYLON.Sprite("tree", spriteManagerTrees);tree.position.x = Math.random() * (25) + 7;tree.position.z = Math.random() * -35  + 8;tree.position.y = 0.5;
}

参数是管理器的名称、图像的 url、精灵的最大数量、指定精灵宽度和高度的对象,在这种情况下它是图像的宽度和高度。

精灵动画

 可以使用精灵贴图中的一组图像来制作动画。

上面的地图由相同大小的单元格框架组成,5 横 4 下。这次在管理器中给出的宽高就是一个单元格的宽高。

精灵的动画是通过给出要使用的第一个和最后一个单元格来设置的,无论它是否循环(真)以及单元格帧之间的时间:
 

const spriteManagerUFO = new BABYLON.SpriteManager("UFOManager","url to ufo image", 1, {width: 128, height: 76});const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
ufo.playAnimation(0, 16, true, 125);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1380629.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

「Python海龟画图」利用海龟画笔绘制分形树

绘制旋转图形 功能要求 利用函数递归绘制由多条直线组成的旋转图形&#xff0c;每条直线的颜色随机产生&#xff1b;并且隐藏画笔、设置画笔的速度、设置画布的背景色。 实例代码 import turtle # 导入海龟模块import random # 导入随机数turt…

qpython3手机版turtle_使用Python turtle画一片树林

原标题&#xff1a;使用Python turtle画一片树林 使用Python Turtle绘制一片树林代码 这段代码结合了随机函数来使树林更多样化&#xff0c;同时设置了颜色的渐变。几乎每句都有注释&#xff0c;还有不懂的函数可以到官方手册查 示例中的yield语句和pass语句的用法非常精髓&…

DC电源模块关于的电路布局设计

BOSHIDA DC电源模块关于的电路布局设计 DC电源模块是现代电子设备中常用的电源模块之一&#xff0c;其功能是将市电或其他输入电源转换成定电压、定电流的直流电源输出&#xff0c;以满足电子设备的供电需求。电路布局的设计是DC电源模块的重要组成部分&#xff0c;它直接影响…

chrome V3 插件开发 基础

目录 准备popup通信popup 发消息给 backgroundpopup 发消息给 content长期连接 如何页面上添加一个按钮&#xff1f;tabs.onUpdatedcontent-script.jsinject.js 右键菜单chrome.contextMenus举个例子添加关于报错&#xff08;cannot create item with duplicate id XXX&#xf…

论如何科学的看小本子

看本子的问题一直困扰着很多人&#xff0c;有些需要注册&#xff0c;有些没有资源&#xff0c;有些广告很多。 这里&#xff0c;推荐一款用起来比较好的本子应用。 大概长这个样子 这个东西怎么用&#xff1f;我不知道。 这个东西能干什么&#xff1f;我也不知道。 但是&am…

STM32入门——DMA数据搬运工

DMA简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取DMA可以提供外设和存储器或者存储器和存储器之间的高速数据传输&#xff0c;无须CPU干预&#xff0c;节省了CPU的资源12个独立可配置的通道&#xff1a; DMA1&#xff08;7个通道&#xff09;&#xff…

HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具

公文一键排版系统基本完成&#xff0c;准备继续完善SysInfo&#xff0c;增加用户帐户信息&#xff0c;其中涉及到Win32_Account结构&#xff0c;其C定义如下&#xff1a; [Dynamic, Provider("CIMWin32"), UUID("{8502C4CC-5FBB-11D2-AAC1-006008C78BC7}"…

分享给大家一个免费使用网络字体的方法

如题&#xff0c;给各位朋友分享一个免费使用字体的方法&#xff0c;因为现在网上的字体大部分都需要付费使用&#xff0c;而我们有时候只需要字体中的一两个字&#xff0c;如果为这一两个字花十几块&#xff0c;还是有点肉疼的&#xff0c;尊重版权的另说&#xff1b; 好了&a…

质心计算公式

求曲线质心&#xff1a; 对于曲线L&#xff0c;设密度公式为F(x,y)&#xff0c;则质心公式为 这是求质心的x坐标&#xff0c;求另外一个坐标类似。同时&#xff0c;这个公式可以推广到多元函数求积分&#xff0c;原理依然是要求的坐标乘以密度公式积分除以密度公式做积分 求区…

能量信号和功率信号

能量信号为功率信号的积分&#xff0c;功率信号为能量信号的密度。对于一个信号&#xff0c;yf(x)&#xff0c;能量相当于曲线和x轴的积分面积&#xff0c;功率相当于y值。当一个信号的积分面积无穷大&#xff0c;但是能找到一个不是无穷大的平均y值&#xff0c;那么这就是功率…

信号能量、功率、功率谱密度、自相关函数公式总结

已知时域求能量与功率 若 x(t) 为能量讯号&#xff0c;其总能量&#xff1a; 若 x(t) 为功率信号&#xff0c;其平均功率&#xff1a; 若 x(t) 为周期信号且基本周期为 &#xff0c;其平均功率&#xff1a; 已知频域求能量 (1)由时域求能量&#xff1a; (2)根据傅立叶逆转…

瞬时功率与有功功率计算公式

一 基本概念 瞬时功率是指某一时刻电压与电流的乘积&#xff0c;记瞬时电压为u(t)&#xff0c;瞬时电流为i(t)&#xff0c;瞬时功率为p(t)&#xff0c;则&#xff1a;   瞬时功率计算公式 在交流电路中&#xff0c;有功功率是指一个周期内发出或负载消耗的瞬时功率的积分的…

关于光伏发电量计算公式疑问

GB50797&#xff0d;2012&#xff0c;光伏发电站设计规范中&#xff0c;对于“ E s E_s Es​——标准条件下的辐照度”的描述&#xff0c;在2.2.1章节中和6.6.2章节中表述不一致。 百度百科上辐照度的概念是&#xff1a; 辐射照度又称辐照度&#xff0c;是受照面单位面积上的辐…

能量估计

能量估计 设 ( x 0 , t 0 ) (x_0,t_0) (x0​,t0​) 为上半平面 Q Q Q 内任意点&#xff0c;通过这点向下做两条特征线 x x 0 a ( t 0 − t ) xx_0\pm a(t_0-t) xx0​a(t0​−t) &#xff0c;这两条特征线与 x x x 轴围成的三角形区域称为以 ( x 0 , t 0 ) (x_0,t_0) (x…

功率谱密度(功率信号)、能量谱密度(能量信号)详解

一、能量信号和功率信号 根据信号可以用能量式或功率式表示可分为能量信号和功率信号。 能量信号&#xff0c;如各类瞬变信号。 在非电量测量中&#xff0c;常将被测信号转换为电压或电流信号来处理。显然&#xff0c;电压信号加在单位电阻&#xff08;R1时&#xff09;上的瞬时…

图像熵的计算公式

【关联文章】&#xff1a;信息熵的数值计算公式_多元信息熵计算_Dust_Evc的博客-CSDN博客 图像熵&#xff08;image entropy&#xff09;是图像“繁忙”程度的估计值。 图像熵表示为图像灰度级集合的比特平均数&#xff0c;单位比特/像素&#xff0c;也描述了图像信源的平均信息…

第二章第十题(科学:计算能量)(Science: calculating energy)

2.10&#xff08;科学&#xff1a;计算能量&#xff09;编写程序&#xff0c;计算将水从初始温度加热到最终温度所需的能量。程序应该提示用户输入水的重量&#xff08;以千克为单位&#xff09;&#xff0c;以及水的初始温度和最终温度。 计算能量的公式是&#xff1a;Q M …

日常BUG —— Java判空注解

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一. 问题描述 问题一&#xff1a; 在使用Java自带的注解NotNull、NotEmpty、NotBlank时报错&#xff0c;…

户外组网摆脱布线困扰,工业5G网关实现无人值守、远程实时监控

在物联网通信技术发达的2023&#xff0c;网络覆盖对所及之处的全面覆盖&#xff0c;科技发展的促使下很多高危户外场景也在思考如何利用无线技术提高人员安全及现场无人化管理。 煤矿是我们国家不可缺少的重要能源&#xff0c;其开采过程的危险系数也是众所皆知的&#xff0c;…