Javascript Threejs将剪裁应用于对象的特定区域

我用三个平面来剪辑我的STL模型

localPlane = new THREE.Plane( new THREE.Vector3( 0, -1, 0 ), 4);
.
.
.
material = new THREE.MeshPhongMaterial( {
    color: 0xffffff,
    side: THREE.DoubleSide,
    clippingPlanes: [
        localPlane,
    ],
    clipShadows: true
} );

它正在工作；但问题是，整个物体的顶部被这个无限大的平面剪断了。我希望它只剪辑其中的一小部分（似乎没有办法缩放3.Plane）

我也尝试过使用ThreeCSG.js，但使用STL对象似乎不方便

以下是我得到的： 编辑：听从韦斯特兰利的建议。我将把这个留给她，作为一种执行剪辑的替代方法，尽管效率较低

剪裁平面是无限的。这是绕不开的。那你能做什么呢？多个渲染过程中的多个剪裁平面

要做到这一点，您需要关闭自动清除，并进行自己的手动缓冲区清除

renderer = new THREE.WebGLRenderer();    
renderer.autoClear = false;

现在让我们假设

plane1

是您当前拥有的剪裁平面

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

var myMesh = new THREE.Mesh(geometry, material);

在调用render时剪辑myMesh的上半部分。因此，您需要处理其余的部分

首先，制作另一个平面，

plane2

，与

plane1

相反

plane2

然后将剪裁myMesh的底部。但是，如果使用

plane1

渲染一个过程，使用

plane2

渲染另一个过程，则返回完整网格。因此，您需要第三个剪辑平面，

plane3

，它只剪辑所需的

myMesh

的一半。将

plane2

和

plane3

放在同一渲染过程中，只会导致

myMesh

渲染的1/4

var pass1ClipPlanes = [
        plane1
    ],
    pass2ClipLanes = [
        plane2, // this plane is the inverse of plane 1, so it clips the opposite of plane1
        plane3 // this clips the left/right half of the model
    ];

然后，在转到渲染时，首先清除绘制缓冲区，然后调用两个渲染过程，更新它们之间的剪辑平面

// clear the draw buffers
renderer.clear();

// clip the top
myMesh.material.clipPlanes = pass1ClipPlanes;
renderer.render(scene, camera);

// clip the bottom and one side
myMesh.material.clipPlanes = pass2ClipPlanes;
renderer.render(scene, camera);

第一个过程渲染模型的底部，第二个过程渲染顶部的一半

预计到达时间：示例

var渲染器、场景、摄影机、控件、统计信息；
var cube，
飞机，
通过平面；
变量宽度=window.innerWidth，
高度=窗内高度，
FOV=35，
近=1，
FAR=1000；
函数init（）{
document.body.style.backgroundColor=“slateGray”；
renderer=new THREE.WebGLRenderer({
反别名：是的，
阿尔法：是的
});
renderer.localClippingEnabled=true；
renderer.autoClear=false；
document.body.appendChild（renderer.doElement）；
document.body.style.overflow=“隐藏”；
document.body.style.margin=“0”；
document.body.style.padding=“0”；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（视野、宽度/高度、近距离、远距离）；
摄像机位置z=50；
场景。添加（摄影机）；
控件=新的三个.trackball控件（摄影机、渲染器.doElement）；
controls.dynamicDampingFactor=0.5；
controls.rotateSpeed=3；
var灯光=新的三点灯光（0xffffff，1，无穷大）；
相机。添加（灯光）；
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domElement.style.top='0'；
document.body.appendChild（stats.domeElement）；
调整大小（）；
window.onresize=调整大小；
//填充示例
var plane1=新的三个平面（新的三个向量3（0，-1，0），0），
plane2=新的三个平面（新的三个向量3（0，1，0），0），
plane3=新的三个平面（新的三个向量3（-1,0,0），0）；
pass1ClipPlanes=[plane1]；
pass2ClipPlanes=[plane2，plane3]；
var cubeGeo=新的3.BoxBufferGeometry（10,10,10），
cubeMat=新的三点网格材质({
颜色：“红色”，
侧面：三个。双面
});
立方体=新的三个网格（立方体、立方体马特）；
场景.添加（立方体）；
制作动画（）；
}
函数resize（）{
宽度=window.innerWidth；
高度=窗内高度；
if（渲染器和摄影机及控件）{
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
controls.handleResize（）；
}
}
函数render（）{
.clear（）；
cube.material.clippingPlanes=pass1ClipPlanes；
渲染器。渲染（场景、摄影机）；
cube.material.clippingPlanes=pass2ClipPlanes；
渲染器。渲染（场景、摄影机）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
控件更新（）；
stats.update（）；
}
函数threeReady（）{
init（）；
}
（功能（）{
函数addScript（url，回调）{
callback=callback | | function（）{}；
var script=document.createElement（“脚本”）；
script.addEventListener（“加载”，回调）；
setAttribute（“src”，url）；
document.head.appendChild（脚本）；
}
添加脚本（“https://threejs.org/build/three.js“，函数（）{
添加脚本（“https://threejs.org/examples/js/controls/TrackballControls.js“，函数（）{
添加脚本（“https://threejs.org/examples/js/libs/stats.min.js“，函数（）{
三就绪（）；
})
})
})
})();编辑：遵循WestLangley的建议。我将把这个留给她，作为一种执行剪辑的替代方法，尽管效率较低

剪裁平面是无限的。这是绕不开的。那你能做什么呢？多个渲染过程中的多个剪裁平面

要做到这一点，您需要关闭自动清除，并进行自己的手动缓冲区清除

renderer = new THREE.WebGLRenderer();    
renderer.autoClear = false;

现在让我们假设
plane1
是您当前拥有的剪裁平面

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

var myMesh = new THREE.Mesh(geometry, material);

在调用render时剪辑myMesh的上半部分。因此，您需要处理其余的部分

首先，制作另一个平面，
plane2
，与
plane1
相反
plane2
然后将剪裁myMesh的底部。但是，如果使用
plane1
渲染一个过程，使用
plane2
渲染另一个过程，则返回完整网格。因此，您需要第三个剪辑平面，
plane3
，它只剪辑所需的
myMesh
的一半。将
plane2
和
plane3
放在同一渲染过程中，只会导致
myMesh
渲染的1/4

var pass1ClipPlanes = [
        plane1
    ],
    pass2ClipLanes = [
        plane2, // this plane is the inverse of plane 1, so it clips the opposite of plane1
        plane3 // this clips the left/right half of the model
    ];

然后，在转到渲染时，首先清除绘制缓冲区，然后调用两个渲染过程，更新它们之间的剪辑平面

// clear the draw buffers
renderer.clear();

// clip the top
myMesh.material.clipPlanes = pass1ClipPlanes;
renderer.render(scene, camera);

// clip the bottom and one side
myMesh.material.clipPlanes = pass2ClipPlanes;
renderer.render(scene, camera);

第一个过程渲染模型的底部，第二个过程渲染r