如何将剪切面渲染为实体对象 [英] How to render clipped surfaces as solid objects

问题描述

在 Three.js 中，我有一个 3d 对象，我在其中使用本地剪裁平面仅渲染对象的一部分.

然而，由于 3d 对象是空心的"(意味着只渲染外表面)，当我们从该表面剪下任何东西时，我们可以看到"对象.这是我的意思的一个例子，

或者，请参阅https://threejs.org/examples/webgl_clipping_stencil.html.

three.js r.117

In Three.js, I have a 3d object where I am using local clipping planes to only render a part of the object.

However, since 3d objects are "hollow" (meaning only the outer surface is rendered), when we clip anything off that surface we can "see into" the object. Here's an example of what I mean, clipping a corner off a cube. Notice how we can see the backside of the opposite corner.

I would like to give the appearance of the object being solid. Based on this issue, it seems that the best way to accomplish this is to create a surface over the clipped region, thus capping the hole and making the object appear like it isn't hollow.

My question is, how do I know where to build this surface? Does Three.js provide a way to get a list of vertices that intersect between a plane and any arbitrary surface? If not, how might I approach this problem myself?

I found this question, but the author didn't describe how they solved the problem I am having here.

解决方案

You want to render a clipped surface as if it were a solid -- i.e., not hollow.

You can achieve that effect with MeshPhongMaterial -- or any three.js material for that matter -- with a simple hack to the material shader.

material.onBeforeCompile = function( shader ) {

    shader.fragmentShader = shader.fragmentShader.replace(

        `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,

        `gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( diffuse, opacity );`

    );
};

This should look pretty good. It will require material.side = THREE.DoubleSide;

Alternatively, see https://threejs.org/examples/webgl_clipping_stencil.html.

three.js r.117

这篇关于如何将剪切面渲染为实体对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！