Jake N-优快云博客

原创 VUE3所有类型对象的完整响应方案

【代码】VUE3所有类型对象的完整响应方案。

2023-03-06 14:33:40 572

原创 VUE3对象和数组完整响应原理代码和详解

【代码】VUE3对象和数组完整响应原理代码和详解。

2023-02-28 21:01:47 1788

原创 Babylon.js 第37章变形网格

spher是要变形的目标。然后添加要变成的目标，两个目标之间顶点数据必须相同。如果同时需要多种变形，需要添加多个变形管理器进行设置。要使用变形目标，您首先必须创建一个。并将其影响到一个网格。

2022-09-11 19:04:38 365

因此，如果您的网格不需要反射光（例如仅发射颜色），您可以跳过法线重新计算，这是一个消耗 CPU 的过程。但是，您可能出于任何原因需要更高的速度（例如，具有数十万个顶点的巨大网格）。例：如果我们需要在渲染循环中更新一个Lines网格，也就是说每帧更新。更新函数尝试尽可能多地优化以在渲染循环中快速运行。方法需要重新设置法线计算过程，请使用一次。数组，最好改变每个数组元素的值（CreateXXX()方法。循环中，而不是实例化一个新的。其实这是非常容易实现的。然后在创建网格后使用。

2022-09-11 18:25:04 687

原创 Babylon.js 第35章网格层次渲染

每个级别都是独立的，可以有自己的材料。通过将细节级别定义为 null，您可以禁用当前网格的渲染，当它被查看到与相机的指定距离之外时。当一个网格用作另一个网格的细节层次时，它会链接到另一个网格并且不能直接渲染。这与第一种的方法是相反的，距离越大意味着尺寸越小，因此细节层次越少。二、使用屏幕的覆盖范围。一、使用距离层次结构。

2022-09-11 16:09:42 383

原创 Babylon.js 第34章合并网格

注意：当你合并克隆的网格时，你需要在调用函数之前用 computeWorldMatrix 更新网格的世界矩阵。，不仅仅是一个“管”网格，它是一个没有“厚度”的曲面）。这可以通过首先创建一个“圆柱”网格，然后从它的内部。默认为 false，因此生成的合并网格将仅应用一个材质（取自第一个网格）假设要创建一个具有内径和外径的“管道”形状（轻松地将多个网格合并到单个网格，请使用类的。一个“管”网格来构建。方法构造复杂的网格。

2022-09-11 13:32:22 1004

原创 Babylon.js 第33章网格高亮与发光

默认情况下，发光层将使用自发光纹理和自发光颜色来生成每个活动网格的发光颜色。

2022-09-11 12:39:40 1611

原创 Babylon.js 第32章绘制边界框

以上两者的不同点是：第一个的边界会随着spher的位置而转移，第二个不会。如果你想获得定位对象的世界边界呢？这实际上很容易做到。我们将对 sphereMin、sphereMax、groundMin、groundMax 值进行一些小的修改。

2022-09-11 11:16:59 787

原创 Babylon.js 第31章碰撞与网格拾取

但是这个边界框可以或多或少精确，这就是我们有第二个参数的原因。简而言之，如果这个参数设置为true（默认为false），那么边界框更接近网格（OBB边界类型），但计算成本更高。请注意，当您的网格旋转到某个角度时，这种类型的边界框特别有用。为了避免通过检查网格上的许多细节来进行昂贵的计算，Babylon 引擎在对象周围创建了一个边界框，并测试此框与碰撞网格之间的相交。可以定义一个自定义谓词来过滤选择要针对传入光线进行测试的三角形。如果box在旋转过程的射线击中其他网格，就会改变其他网格的属性。

2022-09-10 23:47:41 763

原创 Babylon.js 第30章网格变换

将形成网格的当前旋转，进一步围绕 x 轴旋转 π/2，然后围绕 z 轴旋转 π/3，然后围绕 y 轴旋转 π/8。指定轴的方向矢量和角度是产生旋转的另一种方法。这就是在世界空间或局部空间中使用旋转方法的方式。

2022-09-10 17:39:25 1357

原创 Babylon.js 第29章创建自定义网格

/顶点数据里每3个元素组成一个vector3。indices是vector3的索引let normals=[]//空数组添加法线，法线方向，与光照有影响//Color3数组//uv2维数组//添加法线//将法线分配给顶点数组//添加顶点颜色//第二个参数表示网格可更新通常，平面的法线是与平面成直角的向量，使用将位置、索引和法线的数组作为参数的方法在 vertexData 对象上计算法线。

2022-09-10 13:26:44 1100

原创 Babylon.js 第28章多面体

主要是通过custom属性来自定义。

2022-09-09 22:56:25 445

原创 Babylon.js 第27章创建参数化网格

与网格不同，线条在创建后使用颜色属性而不是材质进行着色。( function(i, distance) )从。( function(i, distance) )从。

2022-09-09 21:26:44 1216

原创 Babylon.js 第26章基本的3D网格形状

当平面的宽度或高度无法容纳整数个瓦片时，“切割”瓦片并使用部分瓦片填充平面。发生这种情况时，您可以安排零件拼贴的放置位置，可以在平面的一个边缘上，也可以均匀地在两个相对的边缘上。您可以通过在选项中设置。意味着最左边的瓦片列将是整个瓦片，而部分瓦片将在最右边的列中。ntal 以及您希望放置整个图块的位置来执行此操作。

2022-09-09 18:39:25 720

原创 Babylon.js 第25章物理渲染

【代码】Babylon.js 第25章物理渲染。

2022-09-08 22:14:48 812

原创 Babylon.js 第24章混合模式

请注意，混合操作实际上是对像素值的 R、G 和 B 分量分别进行的简单数学运算，每个分量都介于 0 和 1 之间。因此，具有绿色网格（R=0，G=1， B=0) 设置用 ALPHA_SUBTRACT 绘制在黄色 (R=1, G=1, B=0) 上将发出红色值 (R=1, G=0, B=0)。在 alpha 混合网格的情况下，新像素不会简单地覆盖现有像素：它们根据网格的透明度进行。您可以通过使不透明网格变得非常透明来强制不透明网格进行 alpha 混合，材料的属性来完成的，将其设置为上面列出的常数之一。

2022-09-08 20:08:49 392

原创 Babylon.js 第23章视频纹理

VideoTexture 在内部创建和使用 HTML 视频元素。为 true（默认）时，如果第一次尝试自动播放失败，Babylon.js 将自动静音。要播放带音频的视频，通常需要用户交互（例如点击）。可通过 VideoTexture.video 属性访问，它允许您控制某些特征并监视视频的状态。数组中可以加载的第一个视频......是用作内容源的视频。作为方便的替代方案或视频照明助手，您可能需要在网格的基础材质上设置。设置的属性中提供加载期间或直到用户与视频交互时显示的图像的 URL。

2022-09-08 19:38:51 669

原创 Babylon.js 第二十二章动态纹理

【代码】Babylon.js 第二十二章动态纹理。

2022-09-08 19:12:37 857

原创 Babylon.js 第21章材质映射到网格+贴花

当然faceUV的Vector4有四个参数（x,y,z,w）,其实际意思很简单，就是图像的比例，x，y，左下角开始的一个坐标，z,w，右上角的一个坐标，只是其取值是图像的比例，介于0到1之间。（0，0，0.5，1），意识就是截取图像左半部分的图像。frontUVs 和 backUVs 都具有 Vector4(u0, v0, u1, v1) 的形式，其中 0

2022-09-08 16:36:01 1849

原创 Babylon.js 第20章材料

视差映射是一种算法，它基于高度图，在材质纹理上应用偏移，以突出几何体表面的浮雕效果。原因很简单，执行 Parallax Mapping 所需的高度图大部分时间都编码在 Normal Map 纹理的 Alpha 通道中。材质的显示方式取决于场景中使用的一个或多个灯光以及它的反应设置方式。将材质应用于网格时，用于纹理的图像根据坐标进行定位。要平铺图像，您可以使用纹理的。可以使用具有不同透明度的图像对材料的不透明度进行分级。环境色需要设置场景的环境色，给环境背景照明。要在网格上偏移纹理，请使用纹理的。

2022-09-08 13:06:42 843

原创 Babylon.js 第19章体积光散射后期处理

【代码】Babylon.js 第19章体积光散射后期处理。

2022-09-07 22:44:20 509

原创 Babylon.js 第18章阴影-联级

但是，它可能会产生一些视觉伪影，因为用于截头分割的值现在落后于实际值一帧，因此请进行测试以查看最适合您的值。如果您已经在场景中启用了深度渲染器，则应该调用，以避免每帧进行多次深度渲染。，如果您通过某些自定义方式知道最小和最大 z 值，您也可以调用自己（最小值和最大值介于 0 和 1 之间的值）。启用后，首先执行深度渲染过程（使用内部创建的深度渲染器或您通过调用提供的深度渲染器。然后，在深度图上应用最小/最大缩减以计算地图的最小和最大深度值，并将这些值用作。请注意，如果您通过调用提供了自己的深度渲染器。

2022-09-07 20:25:57 376

原创 Babylon.js 第17章阴影

PCSS 可以被视为 PCF 的改进版本，但尽管看起来更好，但它们的处理器成本也更高，应该保留给桌面应用程序。从 Babylon.js 3.0 开始，我们引入了一种新的指数阴影贴图方法来处理自阴影问题：闭合指数阴影贴图 (CESM)。PCF 阴影受益于 Webgl2 中可用的新硬件过滤功能，并产生更平滑的泊松采样版本。在 PCSS 中，阴影在远离投射它们的对象时会变得更柔和，模拟现实生活中发生的情况。属性根据您的经验选择质量和性能之间的最佳折衷（质量越低，性能越好）。四、PCSS 阴影的接触硬化阴影。

2022-09-07 19:31:16 807

原创 Babylon.js 第16章灯光

半球灯是一种模拟环境光的简单方法。半球光由一个方向定义，通常“向上”朝向天空。然而，正是通过设置颜色属性才能实现完整的效果。以弧度为单位的角度定义了聚光灯锥形光束的大小（照明场），指数定义了光随距离（范围）衰减的速度。聚光灯由位置、方向、角度和指数定义。这些值定义了一个从该位置开始向该方向发射的光锥。灯光的三个属性会影响颜色。适用于所有四种类型的光，第三种是。六、可设定需要和不需要照亮的网格。

2022-09-07 16:26:09 1027

原创 Babylon.js 第15章 GUI

在复杂的网格上处理指针移动事件可能代价高昂，因此您可以使用第四个参数关闭支持指针移动事件。二、observables属性。一、创建GUI的两种模式。

2022-09-07 13:48:47 1504

原创 Babylon.js 第14节网格点击事件

使用.then可以连续添加方法，每单击一次，执行一个then。同时还可以添加条件判断。只有条件满足的时候才执行。OnKeyUpTrigger 和 OnKeyDownTrigger 触发器都接受一个字符串参数值，该值与事件的。此字符串定义要影响操作的属性的路径。您可以使用直接值，例如。目前，网格有 14 种不同的触发器，场景有 3 种。这允许创建仅在特定键上触发的键触发器。点击球体一次，地面淡出，再点击一次，地面又淡入。但是您也可以提供复杂的路径，例如。五、网格中的条件判断。

2022-09-06 22:04:04 1153

原创 Babylon.js 第13章背景材料

有时 360 度全景照片会让人感觉与相机的距离不舒服，为此可以使用基于材质的 FOV 调整。使用以下代码在 0.0 和 2.0 之间调整它。有时 360 度视频会感觉与相机的距离不舒服，为此可以使用基于材质的 FOV 调整。使用以下代码在 0.0 和 2.0 之间调整它。作为警告，该值距离 1 越远，可见的失真越多。它还将在屏幕右下角创建一个 enterVR 按钮，单击该按钮将开始渲染到 HMD。可以通过添加以下代码返回 2D 视图。四、360度全景照片。

2022-09-06 18:03:24 778

原创 Babylon.js 第12章基本环境

前提是先设置了scene.ambientColor，否则StandardMaterial.ambientColor和StandardMaterial.ambientTexture将不起作用。注：因为场景一开始就需要渲染大量的网格，所以这种方法会造成一定的画面延迟。（2）使用ambientColor更改网格对象颜色。

2022-09-06 16:12:24 947

原创 Babylon.js 第11节使用babylon开发

这将允许我们的 UMD 定义在 node_modules 中找到 oimo 并使用它。如果您使用 AMD，您需要首先将 oimo 声明为模块（因为 oimo 使用匿名 AMD 定义），然后babylon会将其自动引入。Cannon 和 Oimo（都是物理引擎）作为依赖项交付，Cannon 和 Oimo 都是可选依赖项。如果您想使用其中任何一个。注：不能同时使用Babylon.js ES6的包和往期版本的包。如果使用了node.js，还可以用require引入。mygame.ts是项目的入口点。

2022-09-06 14:20:14 1963

原创 Babylon.js 第10节图层蒙版和多镜头纹理

该功能主要在多个摄像头同时处于活动状态时使用。如果您希望有一个在屏幕上始终可见并且可以选择的网格，例如一个按钮，您可以在场景中添加第二个摄像机和灯光以专门显示和点亮它。是分配给每个网格和相机的编号。它用于位级别以指示灯光和相机是否应该照亮或显示网格。默认值 0x0FFFFFFF 将导致网格被任何库存灯光和相机照亮和显示。以前 4 位为 0 或关闭开始。如果第二台摄像机和按钮都具有。，任何人都看不到 a 为 0 的网格。这可能有利于隐藏东西。您需要第二台相机才能看到按钮。该按钮也应该只可见一次。

2022-09-05 21:03:38 357

原创 Babylon.js 第9节相机多视图

Viewport(x,y,宽度，高度)， x, y 是视口的左下角，后跟其宽度和高度。x、y、宽度和高度的值是介于 0 和 1 之间的数字，分别代表屏幕宽度和高度的分数。VRDeviceOrientationFreeCamera一起使用。

2022-09-05 20:35:57 491

原创 Babylon.js 第8节自定义相机输入

启用输入使用attachControl，禁用输入使用detachControl。当然这只是一种更加标准的方法，通常用在新版本中。

2022-09-05 19:58:54 400

原创 Babylon.js 第七节相机+重力

网格碰撞需要先为网格定义一个ellipsoid属性，随后为这个网格添加方法moveWithCollisions（position）方法，称为移动碰撞，其中的position是一个Vector3矢量，就是方向向量，如果其移动距离太大，可以使用position.scale(0.5)，当网格沿着这个方向移动，遇到设置了碰撞检查的网格时就会停下。DeviceOrientationCamera专门设计用于对设备方向事件做出反应，例如现代移动设备向前、向后、向左或向右倾斜。（7）VR设备方向相机。

2022-09-05 15:47:05 1334

原创 Babylon.js 第六节相机和网格行为

默认情况下，拖动平面/轴将根据对象的方向进行修改。要将指定的轴/平面固定在世界上，请设置。缩放网格使用 MultiPointerScaleBehavior()方法，要在不移动附加网格的情况下使用拖动行为，请设置。2.获取拖动的最后位置。当相机达到边界时就会出现反弹。要禁用所有拖动行为，需设置。（3）在网格上添加UI。

2022-09-04 18:21:39 1148

原创 Babylon.js 第五节播放音乐

setDirectionalCone有三个参数，分别是内锥大小，外锥大小，以及处在锥体之外时的声音大小。参数：音乐名，音乐路径，播放场景，回调函数，JOSN对象。可以通过setVolume()函数来设置播放的音量，通过setPlaybackRate()函数设置播放的速度。如果回调函数play没有传递参数，音乐会立即播放，如果传递参数number，会在number秒后播放。一种更高质量的空间化算法，它使用来自人类受试者测量的脉冲响应的卷积。使用回调函数，确定声音都准备好，便调用play()方法同时播放声音。

2022-09-04 15:37:08 465

空空如也

Electron录制的视频踩坑