Three.JS对象剪辑？ [英] Three.JS Object Clipping?

问题描述

我试图以类似于Unity的方式使用three.js来划分我的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.html
https://threejs.org/examples/webgl_clipping_advanced.html

three.js r.85

three.js r.85

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