ThreeJS切割ExtrudeGeometry形状深度的角落

Question

我在 Threejs 中使用一些顶点创建了一个 3D 形状 (THREE.Shape)。然后我使用 ExtrudeGeometry 使其成为 3D看形状。我需要这个边缘切割成 45 度的形状。但主要问题是我必须切割几何图形的拉伸部分的边缘。我无法在任何地方找到任何单一的解决方案。 我会尽力让您了解真正的需求。

我想剪切挤出部分的边缘而不是面部。您可以查看下图以供参考

所以记住这不是形状的脸。没有拉伸部分的简单形状看起来像这样

谁能帮我解决这个问题？如果他能帮助我解决这个问题，他将非常感激。

Answer 1

你如何做的一个选项：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var w = 1;
var h = 3;
var d = 10;

var pts = [
  new THREE.Vector2(-w, h),
  new THREE.Vector2(-w, -h),
  new THREE.Vector2(w, -w),
  new THREE.Vector2(w, w)
]

var shape = new THREE.Shape(pts);
var shapeGeom = new THREE.ExtrudeBufferGeometry(shape, {
  depth: d * 2,
  bevelEnabled: false
});
shapeGeom.center();
shapeGeom.rotateY(-Math.PI * 0.5);

// 45 deg cut
var pos = shapeGeom.getAttribute("position");
var temp = new THREE.Vector3();
for (let i = 0; i < pos.count; i++) {
  temp.fromBufferAttribute(pos, i);
  let signX = Math.sign(temp.x);
  let shift = h - temp.y;
  pos.setX(i, temp.x - (shift * signX));
}
pos.needsUpdate = true;

var shapeMat = new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
});
var mesh = new THREE.Mesh(shapeGeom, shapeMat);
scene.add(mesh);




renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>