Three.js 剪裁模型

Question

通过 Three.js 数学模块的API平面 Plane 可以对 Three.js 的网格模型对象进行剪裁。

WebGL 渲染器 .clippingPlanes 属性

通过Threejs的平面构造函数Plane可以创建若干个用于剖切模型的平面对象。然后把平面Plane的集合赋值给Three.js材质对象的 .clippingPlanes 属性即可。

除了设置WebGL渲染器对象WebGLRenderer的.clippingPlanes属性外，还需要设置WebGL渲染器的 .localClippingEnabled属性。

var renderer = new THREE.WebGLRenderer();
// Plane作为元素创建数组，Plane的方向法向量、位置根据需要随意定义
var PlaneArr = [
  //创建一个垂直x轴的平面，方向沿着x轴负方向，沿着x轴正方向平移20,
  new THREE.Plane(new THREE.Vector3(1, 0, 0), 20),
  // 垂直y轴的平面
  // new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
  // 垂直z轴的平面
  // new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)
];
renderer.clippingPlanes = PlaneArr;
// 开启模型对象的局部剪裁平面功能
// 如果不设置为true，设置剪裁平面的模型不会被剪裁
renderer.localClippingEnabled = true;

可视化显示剪裁平面

// 通过PlaneHelper辅助可视化显示剪裁平面Plane
var helper = new THREE.PlaneHelper(PlaneArr[0], 300, 0xffff00);
scene.add(helper);
// var helper2 = new THREE.PlaneHelper(PlaneArr[1], 300, 0xff00ff);
// scene.add(helper2);

剪裁特定的模型 材质对象.clippingPlanes属性

通过WebGL渲染器.clippingPlanes属性设置的剪裁平面对象Plane会剪裁场景中的所有模型对象。如果你想剪裁场景中特定的模型对象可以通过Three.js材质对象.clippingPlanes属性实现，Three.js材质对象的.clippingPlanes属性和WebGL渲染器对象对象的.clippingPlanes属性设置方式是一样的。一个网格模型所绑定材质对象的.clippingPlanes属性如果没有设置，自然不会被剪裁，你想剪裁那个网格模型对象，你就设置那个模型对象的.clippingPlanes属性。

网格模型 mesh1 被剪裁

Three.js材质对象的.clipIntersection属性用于设置剪裁的方式，默认值是false，剪裁所有平面要剪裁的并集，设置为true，改变剪裁方式为交集，你可以通过改变属性的布尔值测试查看具体效果。

// 立方体网格模型 设置了剪裁平面，模型会被剪裁
var geometry = new THREE.BoxGeometry(100, 100, 100);
// Plane作为元素创建数组，Plane的方向法向量、位置根据需要随意定义
var PlaneArr = [
  //创建一个垂直x轴的平面，方向沿着x轴负方向，沿着x轴正方向平移20,
  new THREE.Plane(new THREE.Vector3(-1, 0, 0), 20),
  // 垂直y轴的平面
  // new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
  // 垂直z轴的平面
  new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)
];
var material = new THREE.MeshLambertMaterial({
  color: 0xff11ff,
  side: THREE.DoubleSide,
  // 设置材质的剪裁平面的属性
  clippingPlanes: PlaneArr,
  //改变剪裁方式，剪裁所有平面要剪裁部分的交集
  clipIntersection: true,
});

网格模型 mesh2 不被剪裁

// 球体网格模型   没有设置剪裁平面不会被剪裁
var geometry2 = new THREE.SphereGeometry(60, 40, 40);
var material2 = new THREE.MeshLambertMaterial({
  color: 0xff11ff,
  side: THREE.DoubleSide,
});
var mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
scene.add(mesh2);