Three.js中使用MarkPass(掩码)的高级效果组合器

JavaScript020

Three.js中使用MarkPass(掩码)的高级效果组合器,第1张

可以对指定的scene运行后期效果。

（1）创建一个作为背景图片的场景。

（2）创建一个场景，里面包含一个看起来像地球的球体。

（3）创建一个场景，里面包含一个看起来像火星的球体。

（4）创建EffectComposer对象，用于将这三个场景渲染到一个图片中。

（5）在渲染为火星的球体上应用彩色效果。

（6）在渲染为地球的球体上应用褐色效果。

1、 我们直接使用场景的背景属性来添加星光背景图片。还有一种可选方式也可以同于添加背景图片，那就是利用THREE.OrthoGraphicCamera（正交摄像机）。因为THREE.OrthoGraphicCamera不会根据物体距离摄像机的距离来缩放物体，所以可以添加一个正对摄像机的THREE.PlaneGeometry几何体，然后在上面添加图片。

2、场景渲染时候需要将渲染器改为组合器的渲染器，并且需要将WebGLRenderer中autoClear设置为false

javascript这门脚本语言，多用于辅助性开发，位运算如非必要，不推荐使用。虽然位运算在高级语言里，有时候能优化性能。但毕竟javascript是一门解释性语言，位运算也是解释后执行，性能并没有突出。

有两种情况下，

1）宿主是v8之类的虚拟化的引擎，但就我对虚拟化的理解，位运算在虚拟机里，应该还是不如c语言等编译性语言的；

2）大面积矩阵式运算，这时候有时候会用到位运算。当然，位运算应该学通，这对内存，以及优化程序性能有帮助。

位运算通常配合二进制来学，比较快一点。可能比较绕人的是高位。中国很多概念式教程说的很烂，都喜欢装13（逼）的用异或取反等来解释，这是很不科学的。

位运算的高位在c语言等里面表现，取决于cpu指令；但在javascript里不是——至少不完全是。我没仔细研究过。

无论哪种语言。位运算的意义有两种

1）或、异或、取反、与，这种叫掩码式运算，主要应用在于给某二进制位进行验证、设置、改变状态（改变状态，其实也是设置）等；

2）是位移，这个在加密解密压缩等科学里面经常看到，平常程序的应用不是很多，或者我短路没想到。

考虑到兼容性的问题，我觉得javascript的整数不应该当作c语言等下的整数来看。你保不齐哪个引擎是32位或者是64位。32位和64位在位移的时候，有时候结果不同的。

所以我的结论是，javascript不要苛求位运算，能避免就避免。但位运算还是要好好学，建议借助于c语言等来学。

我试图在输入大小正好为2时插入连字符。这是我的密码

但问题是-直到输入第三个字符才出现。虽然连字符的位置正确，但我的意思是在两个字符之后。

如何在输入两个字符后立即获得连字符？

我尝试了onkeyup，但问题是当我按下backspace按钮时，它也会触发。当有两个字符时，会出现连字符，但在这一点上，如果我按backspace并删除连字符，它会立即返回。所以我选择onkeypress

发布于 9 月前

回答

在onKeyPress期间，输入文本框的值始终是更改前的值。这允许事件侦听器取消按键。

要在字段值更新后获取值，请计划在下一个事件循环中运行函数。通常的方法是使用0的超时调用setTimeout：

document.getElementById('numberInput').onkeypress = function() {

// arrow function keeps scope

setTimeout(() =>{

// now it is the value after the keypress

if (this.value.length == 2) {

this.value = this.value + '-'

}

}, 0)

}

<input type="text" id="numberInput">

本站已为你智能检索到如下内容，以供参考：

✿ 相关问答 4 个

React.JS如何使用“onKeyPress”只允许在输入中键入数字

如何使用OnKeypress根据按下的键来使用我的按钮

处理ReactJS中的onKeyPress事件

我的JS代码不工作，我没有看到bug

✿ 相关教程 1 个

JavaScript 入门教程

✿ 推荐阅读 4 个

一个香草JS可定制的选择框/文本输入插件⚡️

在Windows子系统Linux上运行（和不工作）的程序列表

React、Angular、Ember、Vue和纯JavaScript的输入掩码

Javascript应用程序的不可变、异步和混合状态