Three.js - 仅在某些对象上使用模板

问题描述

我正在考虑使用 Three.js 制作一种门户效果。

主要思想是能够通过多个窗口看到另一个场景。

就像在这个例子中一样： https://www.ronja-tutorials.com/post/022-stencil-buffers/（请参阅文章中的 gif，太大无法在此处上传）

我找到了一个使用three.js尝试做的事情的确切示例。

这是链接： https://sites.google.com/site/cgwith3js/home/masking-with-stencil

小提琴不起作用，但我对其进行了更改以使其起作用： http://jsfiddle.net/yzhreu6p/23/

  scene = new THREE.Scene();
  sceneStencil = new THREE.Scene();
...
  scene.add(box); // red one
...
  function animate() {

  requestAnimationFrame(animate);
  renderer.clear();
    
  // animate the box
  box.position.x = Math.cos(clock.getElapsedTime()) * 10;

  var gl = renderer.getContext();

  // enable stencil test
  gl.enable(gl.STENCIL_TEST);
  //renderer.state.setStencilTest( true );

  // config the stencil buffer to collect data for testing
  gl.stencilFunc(gl.ALWAYS,1,0xff);
  gl.stencilOp(gl.REPLACE,gl.REPLACE,gl.REPLACE);

    // render shape for stencil test
  renderer.render(sceneStencil,camera);
  
  // set stencil buffer for testing
  gl.stencilFunc(gl.EQUAL,0xff);
  gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);

  // render actual scene
  renderer.render(scene,camera);

  // disable stencil test
  gl.disable(gl.STENCIL_TEST);
  }

然后我在我的项目中重用了代码，在那里我有一个有建筑物的城镇，并且隐藏的场景有一个 nyan cat 纹理框。

我遇到的问题是当建筑物在后面时飞机会消失，更严重的问题是，当建筑物后面有 nyan cat 纹理时，我们会看到建筑物中的纹理。

为了更好地解释这里是一个 image

我正在寻找图像在建筑物内不可见的解决方案，我发现有人在谈论 stencilMask，但它对我来说是新的。

我是否需要创建另一个场景才能使其独立工作？

如果有人可以帮助我，感谢您的阅读。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）