三.JS对象裁剪? [英] Three.JS Object Clipping?

问题描述

我正在尝试使用 Three.js 以类似于 Unity 的方式分割我的 3D 模型:

I am trying to section my 3D models using three.js in a way similar to how Unity can:

我一直在玩相机控制，当然我可以调整近/远场以在相机的方向上剪辑，但是如果我只想在 X 或 Y 平面上剪辑怎么办?我考虑可能添加一个可以在该轴上滑动的大透明块，然后使用二元运算合并/减去它与对象相交的位置，但这些工具最终会沿新平面创建一个新网格，而不是实际删除沿该平面的所有内容轴.

I have been playing around with the camera controls and of course I can adjust the near / far fields to clip in the direction of the camera, but what if I wanted to just clip in the X or Y plane? I looked at potentially adding a large transparent block that could slide on that axis and then use binary operations to merge / subtract where it intersects the object, but the tools end up creating a new mesh along the new plane rather than actually removing everything along that axis.

我需要处理多个视口，还是有更简单的方法?

Do I need to be working with multiple viewports, or is there a simpler way?

推荐答案

现在支持剪辑.

这是要遵循的模式.根据您的用例进行调整.

Here is the pattern to follow. Adapt it according to your use case.

var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 1 );

var globalPlane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 1 );

renderer.clippingPlanes = [ globalPlane ];

renderer.localClippingEnabled = true;

var material = new THREE.MeshPhongMaterial( {
    clippingPlanes: [ localPlane ],
    clipShadows: true
} );

查看这三个.js示例:

See these three.js examples:

https://threejs.org/examples/webgl_clipping.htmlhttps://threejs.org/examples/webgl_clipping_advanced.html

three.js r.85

three.js r.85

这篇关于三.JS对象裁剪?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！