为什么我的three.js画布遮罩不起作用? [英] Why does my three.js canvas masking not work?

问题描述

我正在尝试重现此处提出的Szenia Zadvornykh的示例 https://medium.com/@Zadvorsky/webgl-masking-composition-75b82dd4cdfd

他的演示基于three.js r80，因此我引用了r101并尝试删除了大多数不相关的部分，只在顶部带有网格和png蒙版的场景.

这是我的代码: http://jsfiddle.net/mmalex/y2kt3Lrf/

已注释// composer.addPass(maskPass)，将显示网格.但这似乎不像uniform sampler2D tDiffuse那样具有render pass的输出.

我希望在画布下看到网格助手和基础HTML内容，其中遮罩使画布透明.

更新，现在可以工作了，这要感谢@ Mugen87: http://jsfiddle .net/mmalex/y2kt3Lrf/

解决方案

小提琴中的文件不匹配.如果我使用最新版本的three.js和相应的后期处理类，则您的代码可以正常工作:

http://jsfiddle.net/pk24zby7/

three.js已将WebGLrenderer.render()和forceClear参数从WebGLrenderer.render()和R102中弃用.更改完成后，有必要更改示例目录中的许多文件，以避免出现警告甚至损坏.因此，使用具有较旧版本three.js的最新后处理类将无法正常工作.

由于更改已在发行说明中列出，我建议您阅读相应的PR以获得更多详细信息.

I'm trying to reproduce example of Szenia Zadvornykh presented here https://medium.com/@Zadvorsky/webgl-masking-composition-75b82dd4cdfd

His demo is based on three.js r80, so I referenced r101 and tried to remove most of unrelated parts, and just have scene with grid and png mask on top.

Here's my code: http://jsfiddle.net/mmalex/y2kt3Lrf/

Having commented // composer.addPass(maskPass) the grid shows up. But it does not seem like uniform sampler2D tDiffuse has the output of render pass.

I expect to see the grid helper and underlying HTML content under the canvas, where mask makes canvas transparent.

UPDATE, working now, thanks to @Mugen87: http://jsfiddle.net/mmalex/y2kt3Lrf/

解决方案

There is a mismatch of files in your fiddle. If I use the latest version of three.js and the respective post processing classes, your code works fine:

http://jsfiddle.net/pk24zby7/

three.js has deprecated the renderTarget and forceClear parameter from WebGLrenderer.render() with R102. When the change was done, it was necessary to change many files in the examples directory in order to avoid warnings and even breakage. So using the latest post-processing classes with an older three.js version does not work.

Since the change is listed in the release note, I suggest you read the respective PRs for more details.

这篇关于为什么我的three.js画布遮罩不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！