glClipPlane-webGL中是否有等效项? [英] glClipPlane - Is there an equivalent in webGL?

问题描述

我有一个3D网格.是否有可能像OpenGL中的glClipPlane那样渲染截面图(剪切)?

I have a 3D mesh. Is there any possibility to render the sectional view (clipping) like glClipPlane in OpenGL?

我正在使用Three.js r65.

I am using Three.js r65.

我添加的最新着色器是:
片段着色器:

The latest shader that I have added is:
Fragment Shader:

uniform float time;
uniform vec2 resolution; 
varying vec2 vUv; 
void main( void ) 
{ 
vec2 position = -1.0 + 2.0 * vUv; 
float red = abs( sin( position.x * position.y + time / 2.0 ) ); 
float green = abs( cos( position.x * position.y + time / 3.0 ) ); 
float blue = abs( cos( position.x * position.y + time / 4.0 ) ); 
if(position.x > 0.2  && position.y > 0.2 ) 
{  
discard; 
 } 
gl_FragColor = vec4( red, green, blue, 1.0 ); }

顶点着色器:

varying vec2 vUv;
void main() 
{ 
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); 
gl_Position = projectionMatrix * mvPosition; 
}

推荐答案

在是一个名为clippingPlanes 的数组属性，您可以在其中添加自定义裁剪平面(THREE.Plane实例).

对于three.js，您可以检查以下两个示例:

For three.js you can check these two examples:

1) WebGL裁剪 (代码在GitHub上)

2) 高级WebGL裁剪 (代码此处GitHub上的)

要将剪切平面添加到renderer中，您可以执行以下操作:

To add a clipping plane to the renderer you can do:

var normal = new THREE.Vector3( -1, 0, 0 );
var constant = 0;
var plane = new THREE.Plane( normal, constant );
renderer.clippingPlanes = [plane];

在这里摆弄小提琴 .

Here a fiddle to demonstrate this.

还可以通过在对象材料上添加剪切平面来在对象级别上进行剪切.为此，您必须将renderer localClippingEnabled属性设置为true.

You can also clip on object level by adding a clipping plane to the object material. For this to work you have to set the renderer localClippingEnabled property to true.

// set renderer
renderer.localClippingEnabled = true;

// add clipping plane to material
var normal = new THREE.Vector3( -1, 0, 0 );
var constant = 0;
var color = 0xff0000;
var plane = new THREE.Plane( normal, constant );
var material = new THREE.MeshBasicMaterial({ color: color });
material.clippingPlanes = [plane];
var mesh = new THREE.Mesh( geometry, material );

---

注意::在r.77中，将THREE.WebGLRenderer中的某些剪辑功能移到了单独的THREE.WebGLClipping类中，请检查

---

Note: In r.77 some of the clipping functionality in the THREE.WebGLRenderer was moved moved to a separate THREE.WebGLClipping class, check here for reference in the three.js master branch.

这篇关于glClipPlane-webGL中是否有等效项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！