岳麓区专业的建设网站公司,产品开发的流程,网站建设 上海,做网站那个搜索引擎好诡异的问题 下面是给一个材质设置发光颜色周期变化和纹理偏移的代码#xff0c;你能感觉到这里面可能出现的问题吗#xff1f; var passTime 0;var uOffset 0;var deltaTime 0;function SetEmissiveColor() {passTime scene.deltaTime * 0.05;if(passTime 6.2…诡异的问题 下面是给一个材质设置发光颜色周期变化和纹理偏移的代码你能感觉到这里面可能出现的问题吗 var passTime 0;var uOffset 0;var deltaTime 0;function SetEmissiveColor() {passTime scene.deltaTime * 0.05;if(passTime 6.2832) passTime - 6.2832;var multi (Math.sin(passTime) 1) * 0.5;material.emissiveColor new BABYLON.Color3(9 * multi, 2.75 * multi, 0);var offset scene.deltaTime * 0.001;material.diffuseTexture.uOffset - offset;material.opacityTexture.uOffset - offset;}scene.onBeforeRenderObservable.add(SetEmissiveColor); 实际在浏览器中运行时你会发现有可能完全没有实现预期的效果。如果你打印一下passTime的值可能是一直都是NaN所以最终会导致material.emissiveColor 的值完全不可用。 这是咋回事呢原来scene.deltaTime 在场景的第一帧渲染之前是 undefined这导致 passTime变量在下面这行代码
passTime scene.deltaTime * 0.05;
执行的时候就变成了NaN然后NaN的自增就一直是NaN了所以计算得到的颜色值也就一直错了哈哈。 下面说说解决方法。
解决方法一 添加if语句检查scene.deltaTime的值是否可用参考代码如下 var passTime 0;var uOffset 0;var deltaTime 0;function SetEmissiveColor() {if (scene.deltaTime ! void 0 !isNaN(scene.deltaTime)){passTime scene.deltaTime * 0.05;if(passTime 6.2832) passTime - 6.2832;var multi (Math.sin(passTime) 1) * 0.5;material.emissiveColor new BABYLON.Color3(9 * multi, 2.75 * multi, 0);var offset scene.deltaTime * 0.001;material.diffuseTexture.uOffset - offset;material.opacityTexture.uOffset - offset;}}scene.onBeforeRenderObservable.add(SetEmissiveColor); 上述代码在执行passTime的自增的之前通过 if 语句对scene.deltaTime进行了检查这样就不会在scene.deltaTime不可用的时候进行计算了。 知识点scene.deltaTime ! void 0 这个判断里面也可以写成 scene.deltaTime ! undefined但是这里为啥用的是 void 0 而没有用undefined 呢下面这个链接讲了这个问题 关于void 0 与 undefined。
解决方法二 使用定时器由于scene.deltaTime只是在第一帧渲染完成之前有问题就没有必要每帧判断下面的代码在定时器中判断scene.deltaTime的值待其合理之后再把SetEmissiveColor方法添加到scene.onBeforeRenderObservable事件中与此同时移除了这个定时器这样就避免了每帧都要检查scene.deltaTime的合理性。参考代码如下 var passTime 0;var uOffset 0;var deltaTime 0;function SetEmissiveColor() {passTime scene.deltaTime * 0.05;if(passTime 6.2832) passTime - 6.2832;var multi (Math.sin(passTime) 1) * 0.5;material.emissiveColor new BABYLON.Color3(9 * multi, 2.75 * multi, 0);var offset scene.deltaTime * 0.001;material.diffuseTexture.uOffset - offset;material.opacityTexture.uOffset - offset;}var checkDeltaTime setInterval(function () {if (scene.deltaTime ! void 0 !isNaN(scene.deltaTime)) {scene.onBeforeRenderObservable.add(SetEmissiveColor);//scene.deltaTime可用之后再添加到事件中clearInterval(checkDeltaTime); // 清除定时器}}, 20); // 每20毫秒检查一次
解决方法三 不使用scene.deltaTime改用engine.getDeltaTime()方法参考代码如下 var passTime 0;var uOffset 0;var deltaTime 0;function SetEmissiveColor() {passTime engine.getDeltaTime() * 0.05;console.log(engine.getDeltaTime());if(passTime 6.2832) passTime - 6.2832;var multi (Math.sin(passTime) 1) * 0.5;material.emissiveColor new BABYLON.Color3(9 * multi, 2.75 * multi, 0);var offset engine.getDeltaTime() * 0.001;material.diffuseTexture.uOffset - offset;material.opacityTexture.uOffset - offset;}scene.onBeforeRenderObservable.add(SetEmissiveColor); 这里的engine.getDeltaTime()在第一帧渲染完成之前会被赋值为0不会出现值为NaN的情况scene.deltaTime为啥就不能这么干呢。 好了就到这里通过这个问题又学会了一些东西大家共勉。
