开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >用于三个网格组的新端口

问用于三个网格组的新端口
EN

Stack Overflow用户

提问于 2017-08-29 22:35:08

回答 1查看 110关注 0票数 0

在三个js中为一组网格创建视区的最佳方法/实践是什么？

在我的例子中，我有很多THREE.Mesh实例的THREE.Group。我的目标是为这个组创建视口，在那里网格将是可见的。

我看到的一种解决方案是使用局部剪裁平面。threejs example

但我担心的是，我必须为每个THREE.Mesh材质指定剪裁平面，而不是为THREE.Group设置一次。

另外，当我移动或旋转THREE.Group时，我需要重新剪切剪裁平面。

EN

回答 1

Stack Overflow用户

发布于 2017-08-30 04:14:38

您可以查看模板缓冲区：

webgl.stencilFunc()

webgl.stencilOp()

不管有没有the，原则都是一样的。

disable depth write
disable depth
disable color write
enable test(将值写入模板缓冲区)
绘制一个写入模板缓冲区的不可见形状(您可能需要一个屏幕空间四边形)
启用1，2，3
更改模板操作(执行此操作时，仅绘制模板缓冲区为1 for example)
draw your group
depending on时，你可以在这里更改模板操作
，然后绘制场景的其余部分，其中buffer为0(从5开始在该形状之外)

Three.js没有模板抽象，除非它们是最近实现的。这意味着transparent没有“神奇”的属性来管理幕后的一堆状态，你必须自己来管理它。这意味着您必须获取webgl上下文并手动对其执行webgl操作。

有很多方法可以做到这一点。

var myScreenSpaceQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry(2,2,1,1), myQuadShaderMaterial )

var scene1 = new THREE.Scene()
var scene2 = new THREE.Scene()
var sceneMask = new THREE.Scene()

sceneMask.add(myScreenSpaceQuad)

//...

myRenderFunction(){
  //gl stencil op
  //...
  myRenderer.render(myCamera, sceneMask)
  //more stencil
  //...
  myRenderer.render(myCamera, scene1)
  //some more stencil...
  myRenderer.render(myCamera, scene2)
}

我将尝试编写一个有效的示例。对于屏幕空间四边形，你可以看看this。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45941893

复制

相似问题