Wiew端口组中的网格在threejs
问题描述:
在三个js中创建一组网格的视口的最佳方式/实践是什么?
在我的情况下,我有很多THREE.Mesh
实例的THREE.Group
。我的目标是为该组创建视口,其中网格将可见。
我看到的一个解决方案是使用本地剪切平面。 threejs example
但我担心我必须为每个THREE.Mesh
材质分配剪切平面,而不是为THREE.Group
设置一次。
当我移动或旋转THREE.Group
时,还需要重新剪切剪切平面。Wiew端口组中的网格在threejs
答
你可以看看模板缓存:
不管有没有threejs,其原理是一样的。
- 禁用深度写入
- 禁用深度测试
- 禁用颜色写
- 使模版操作(写入值模板缓冲区)
- 绘制写入到模版缓冲器中的不可见的形状(你可能想要一个屏幕空间四)
- 启用1,2,3
- 更改模板操作(只绘制模板缓冲区为1例如)
- 提请组
- 取决于当你这样做时,你可以在此更改模板运
- ,然后绘制场景的其余部分,其中缓冲区为0(从外5中的形状)
Three.js没有模板抽象,除非它们最近已经实现。这意味着没有“魔法”属性transparent
管理一堆webgl状态,你必须自己实际管理它。这意味着您必须手动获取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。
目前还不清楚你的意思是“视口”。 – 2pha
@ 2pha我想要像HTML5块溢出一样的行为:隐藏,但只适用于THREE.Group –
你将不得不更清楚地解释你想要达到的目标。 – 2pha