svg - 结束并从 Three.js 中的挤压 SVG 开始

Question

我在三个.js 中挤压 svg 时遇到问题。这是我的代码的结果。

但我必须像下一张图片一样剪掉这个模型的结尾和开头。

挤出svg后我该怎么做？

Answer 1

剪裁允许从渲染中剪掉部分几何图形。
在这里做了一个codepen：https ://codepen.io/cdeep/pen/LYjGNxR

renderer.localClippingEnabled = true;

const clippingPlane1 = new THREE.Plane( new THREE.Vector3( 1, -1, 0 ), 1 );
const clippingPlane2 = new THREE.Plane( new THREE.Vector3( -1, -1, 0 ), 1 );

const material = new THREE.MeshStandardMaterial({
  side: THREE.DoubleSide,
  clippingPlanes: [clippingPlane1, clippingPlane2],
});

示例部分有更复杂的裁剪示例。
https://threejs.org/examples/?q=clipping#webgl_clipping_intersection

官方文档clippingPlanes：
https ://threejs.org/docs/#api/en/materials/Material.clippingPlanes