Babylon.js 第13章背景材料

一、背景材料

    var backgroundMaterial = new BABYLON.BackgroundMaterial("backgroundMaterial", scene);backgroundMaterial.diffuseTexture = new BABYLON.Texture(imgURL[3], scene);//地面不透明度backgroundMaterial.diffuseTexture.hasAlpha = true;//菲涅耳不透明度，为防止相机与地面很近时地面消失。//防止在场景中导航时出现刺耳的剪切，所以禁用backgroundMaterial.opacityFresnel =false;//阴影深度backgroundMaterial.shadowLevel = 0.4;//禁用rgb颜色//为了使用颜色混合backgroundMaterial.useRGBColor=falsebackgroundMaterial.primaryColor=BABYLON.Color3.Green()//使用镜子创建映像var mirror = new BABYLON.MirrorTexture("mirror", 512, scene);//接受映像的平面mirror.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);mirror.renderList.push(sphere);//设置反射纹理为镜子backgroundMaterial.reflectionTexture = mirror;//设置反射菲尼尔backgroundMaterial.reflectionFresnel = true;//反射的明暗度backgroundMaterial.reflectionStandardFresnelWeight = 0.5;ground.material = backgroundMaterial;

二、镜头光晕

    //在场景创建镜头光晕let lensFlareSystem=new BABYLON.LensFlareSystem('lensflareSystem',light1,scene)//创建每个镜头光晕//参数1：光晕大小//参数2：光晕位置，介于-1到1，小于0，在对象之后。//然后添加光晕颜色和材料let flare0=new BABYLON.LensFlare(0.1,0.1,new BABYLON.Color3(1,0,0),imgURL[1],lensFlareSystem)var flare1=new BABYLON.LensFlare(0.13,-0.1,new BABYLON.Color3(1,0,1),imgURL[1],lensFlareSystem)var flare2=new BABYLON.LensFlare(0.2,0.2,new BABYLON.Color3(1,1,0),imgURL[1],lensFlareSystem)

三、反射探针

    let probe=new BABYLON.ReflectionProbe('main',512,scene)probe.renderList.push(sphere)probe.renderList.push(sphere1)ground.material.reflectionTexture=probe.CubeTexture

必须谨慎使用反射探针，因为它们实际上需要每帧生成 6 个纹理（每个面一个）。

四、360度全景照片

photoDome = new BABYLON.PhotoDome("testdome", url, {<options>}, scene);

至少需要提供一options个对象参数，主要参数：

resolution：分辨率
size:大小
useDirectMapping：true，使用直接映射技术来渲染视频。除非您想使用该fovMultiplier属性，否则您应该保留此值

有时 360 度全景照片会让人感觉与相机的距离不舒服，为此可以使用基于材质的 FOV 调整。使用以下代码在 0.0 和 2.0 之间调整它。

photoDome.fovMultiplier = newValue;

fovMultiplier仅在使用useDirectMapping = false创建选项时有效。作为警告，该值距离 1 越远，可见的失真越多。摄影穹顶上的更高分辨率有助于减少但不能消除这种情况。

可以使用以下命令更改以适应图像源的类型：

photoDome.imageMode = BABYLON.PhotoDome.MODE_MONOSCOPIC;
photoDome.imageMode = BABYLON.PhotoDome.MODE_SIDEBYSIDE;
photoDome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;

将 360 度全景照片与 WebVR 结合使用：

var vrHelper = scene.createDefaultVRExperience();

它还将在屏幕右下角创建一个 enterVR 按钮，单击该按钮将开始渲染到 HMD。可以通过添加以下代码返回 2D 视图。

scene.actionManager = new BABYLON.ActionManager(scene);scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({trigger: BABYLON.ActionManager.OnKeyDownTrigger,parameter: 's'},function () { vrHelper.enterVR(); }
));scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({trigger: BABYLON.ActionManager.OnKeyDownTrigger,parameter: 'e'},function () { vrHelper.exitVR(); document.exitFullscreen();}
));

五、全景视频

    var videoDome = new BABYLON.VideoDome("videoDome",["./MP4/exam.mp4"],{resolution: 32,clickToPlay: true,useDirectMapping:false,halfDomeMode:true},scene);videoDome.fovMultiplier=1videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;videoDome.halfDome = true;

对象参数：

resolution = 32：整数，定义用于承载视频的球体的分辨率。较低的分辨率在极端 fovs 处有更多的伪影
clickToPlay = false：为视频添加点击播放监听器，不阻止自动播放
autoPlay = true：自动尝试开始播放视频。如果由于浏览器策略而第一次尝试播放失败，将自动静音并重试。
loop = true：结束时自动循环播放视频
size = 1000：创建圆顶的物理半径，默认约为远裁剪平面的一半
poster：在视频加载期间或用户与视频交互之前显示的图像的 URL
useDirectMapping = true：使用直接映射技术来渲染视频。除非您想使用该fovMultiplier属性，否则您应该保留此值
halfDomeMode = false：启用对 180 视频的支持，而不是 360。

有时 360 度视频会感觉与相机的距离不舒服，为此可以使用基于材质的 FOV 调整。使用以下代码在 0.0 和 2.0 之间调整它。

videoDome.fovMultiplier = newValue;

fovMultiplier仅在使用useDirectMapping = false创建选项时有效。可以使用以下方法更改以适应源视频的类型：

videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;

Babylon.js 第13章背景材料相关推荐

Babylon.js 第19章体积光散射后期处理
一.做一个太阳 var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays',1.0,camera,null,100 ...
Babylon.js 第27章创建参数化网格
目录一.线 1.绘制线 2.绘制曲线 3.3D路径二.虚线三.线路系统四.网格生成器五.管子六.挤压形状 1.挤压 2.定制挤压方式七.车床八.不规则多边形九.不规则多边形挤出 1. ...
Babylon.js 第25章物理渲染
PBR金属材料 baseColor / baseTexture:基础颜色根据金属度的值有两种不同的解释.当材料是金属时,基色是在法向入射 (F0) 下测得的特定反射率值.对于非金属,基色表示材料反射的 ...
Babylon.js 第34章合并网格
目录一.合并网格方法二.详细内容一.合并网格方法轻松地将多个网格合并到单个网格,请使用类的MergeMeshes静态Mesh var newMesh = BABYLON.Mesh.MergeM ...
Babylon.js 第33章网格高亮与发光
目录一.创建高亮网格 1.示例二.发光网格 1.创建: 2.添加属性 3.完整示例一.创建高亮网格 let h1=new BABYLON.HighlightLayer('h',scene,{ca ...
Babylon.js 深入 - 第 2 章 - 声音(2)
Babylon.js 深入 - 第 2 章 - 声音(2) 声音 Babylon.js 声音引擎基于 Web Audio 规范,要使用它,您需要使用与 Web Audio 兼容的浏览器.声音引擎提供环 ...
Babylon.js 入门 - 第 7 章 - 点亮夜晚
Babylon.js 入门 - 第 7 章 - 点亮夜晚点亮村庄村子永远是明亮的会使睡眠变得非常困难,因此我们将通过调暗光线来展示夜间时间.当然人们不想晚上在完全黑暗中行走,所以我们会添加一些路灯 ...
Babylon.js 深入 - 第 3 章 - 行为(2)
Babylon.js 深入 - 第 3 章 - 行为(2) 行为行为是 Babylon.js v3.1 引入的一个新的基于组件的工具.行为是一个简单的类,可以附加到一个目标上,它将提供一组特定的功能 ...
Babylon.js 入门 - 第 6 章 - 构建粒子喷泉
Babylon.js 入门 - 第 6 章 - 构建粒子喷泉粒子喷泉每个村庄都需要水,所以让我们安装一个喷泉.我们将使用一个旋转对称的网格来创建它.细颗粒将被回收以产生水效果.为了不浪费水,让我们 ...

Babylon.js 第13章背景材料

Babylon.js 第13章背景材料相关推荐

最新文章

热门文章

Babylon.js 第13章 背景材料

Babylon.js 第13章 背景材料相关推荐

最新文章

热门文章

Babylon.js 第13章背景材料

Babylon.js 第13章背景材料相关推荐