
BabylonJS
文章平均质量分 76
Babylon 官方文档翻译,个人经验整理
arwind gao
这个作者很懒,什么都没留下…
展开
-
BabylonJS 6.0文档 Deep Dive 动画(四):通过动画排序制作卡通片
摄像机显示了一栋带门的建筑物。摄像机靠近门并停止。门打开,摄像机进入房间。当摄像机进入房间时,房间里的灯亮起。门关上,摄像机在房间里扫了一圈。本次目的是展示电影剪辑的制作方式,因此房间和门将简单地用没有纹理的网格制成作为例子。原创 2024-06-06 20:49:24 · 684 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 动画(三):Animation的方法
string类型,动画名称:string类型,目标对象(Performer)的属性。例如Vector3(如位置)或float属性(如light.intensity)。:number类型,每秒动画帧数(与场景渲染帧数无关):number类型,通过此属性来设置目标对象要变化的参数类型。这可以使用以下常量进行设置::number类型(可选),可以使用以下参数进行设置:BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE:从初始值重新启动动画。原创 2024-06-06 15:45:58 · 1413 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 动画(二):动画设计
动画设计的第一步是决定你想在剪辑中看到什么内容,也就是表演是什么。这会给Performer和其动画以指导。在下图中,有一个盒子(即Performer),每秒在两个位置之间移动一次。这个盒子可以从任何角度观看。第一阶段的设计是在关键时间点绘制所需内容,有点像gif动图的设计。一秒钟后,箱子应处于其新位置,再下一秒钟后应处于其起始位置。然后不断重复此系统动作。在Babylon.js中,此动画的表现为盒子沿着x轴改变其位置,x轴的值是浮点数,整个动画应该循环播放。原创 2024-02-22 18:45:22 · 825 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 动画(一):动画介绍
无论动画如何实现,它都必须考虑所需的动作、时间、产生所需流动性所需的帧数以及序列中的关键点。这个介绍应该有助于理解Babylon.js是如何进行动画的,以及它们是如何实现的。动画由一系列图像、帧生成,这些图像、帧一个接一个地显示。这一系列的帧可以是单独的绘图,也可以是定格动画,即逐帧略微移动的模型照片在设计阶段,创作者需要考虑画面序列应该花费多长时间以及需要多流畅。运动越平滑,需要的帧就越多。一旦知道了帧数,就可以推断出每秒的动画数量。原创 2024-02-22 18:44:46 · 612 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 摄像机(六):遮罩层和多相机纹理
LayerMask是分配给每个网格(Mesh)和摄像机(Camera)的一个数。它用于位(bit)级别用来指示灯光和摄影机是否应照射或显示网格物体。默认值为0x0FFFFFFF,处于此值的情况下,网格会被任何备用灯光和相机照亮和显示。为了确定相机是否看到网格物体,执行一个该功能主要在多个摄像机的场景下使用。如果希望网格物体在屏幕上始终可见且可拾取,例如按钮,则可以在场景中添加第二个摄像机和灯光,以专门显示和照亮它。如果你需要第二个摄像头只能看到按钮。该按钮应仅显示一次。原创 2024-01-25 22:19:46 · 1426 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 摄像机(五):多视角(二)
一般来说,一个场景(Scece)使用的activeCamera属性来指定单个active相机。原创 2024-01-25 22:20:38 · 614 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 摄像机(四):多视角(一)
WebGL 多视角(Multiview)扩展允许同时渲染多个视图(例如,VR场景中的每只眼睛)。这可以使渲染速度提高1.5到2.0倍左右。当前并非所有浏览器都支持Multiview。如果需要使用,则需要注意多视角兼容性问题。以下代码为检验是否兼容Multiview注意:多视图渲染时是渲染纹理数组,而不是标准纹理。当你使用自定义着色器、特效或后后处理时,这可能会导致意外问题(例如,高亮层HighlightLayer将没有效果)。原创 2024-01-10 13:43:00 · 603 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 摄像机(三):自定义摄像机输入
要实现自定义输入则需要创建为一个函数对象,这个函数对象需要具备以下几个方法并编写实现代码。方法名称和用途如下:(完成之后,按照第2节的方式配置即可生效以下代码用于使用键盘向左、向右、向前和向后移动摄影机以及在其当前位置进行旋转。首先,删除默认的键盘输入。if (!添加检查输入的方法(可选)index++) {== -1) {== -1) {原创 2024-01-10 13:39:38 · 1229 阅读 · 0 评论 -
BabylonJS 6.0文档 Deep Dive 摄像机(一):摄像机介绍
在Babylon.js的众多的可用摄像机中,最常用的两种可能是用于“第一人称”运动的通用相机、轨道相机ArcRotateCamera,以及用于现代虚拟现实体验的WebXRCamera。为了允许用户输入,摄像机必须被附加在canvas中其中第二个参数是可选的,默认为false,这将阻止画布事件上的默认操作。设置为true可允许画布默认操作。1. 输入设备作为控制器2. 为了触摸控制,需要引入或。原创 2024-01-05 18:35:49 · 1741 阅读 · 1 评论 -
BabylonJS 6.0文档 Deep Dive 摄像机(二):摄像机碰撞
首先要做的是定义重力矢量,定义重力。Babylon.js的Scene类具有重力属性,可以应用于您之前在代码中定义的任何相机。这将沿指定的方向和速度移动摄影机(Vector3对象),除非摄影机的椭球体(参见下面的第2步)在checkCollisions设置为true的情况下与该方向上的另一个网格(如地面网格)发生碰撞。Scene设置重力属性摄像机开启重力属性在现实世界中,重力是一种向下施加的力,即沿Y轴的负方向施加的力。在地球上,这一力大约为9.81m/s²。原创 2024-01-08 18:26:11 · 1348 阅读 · 0 评论 -
BabylonJS 前言-为什么想写这个系列
对于三维知识概念,初学者应该知道,学习3D开发需要了解大量的光学知识,设计知识,物理知识,并不是学一门编程语言,一个技术框架那样的学习曲线,且中文世界的语言和英语并不能完全对应,程序员和设计师也不能完全理解对方,鸡同鸭讲。之前有个中文站点,好像也没啥人维护了,大部分deep dive的文章都是没有翻译的,而且6.0+也有很多更新的文章,新接口更是没人翻译,加了所谓的Babylon中文网QQ群,基本也是没有啥有很大意义的发现,各种群里灌水。B站倒是有些可借鉴的效果,但很多都是商业性质的。原创 2023-12-13 18:01:44 · 630 阅读 · 0 评论