使用 Three.js,(虽然我相信这与数学更相关)我有一组可以创建二维几何体的二维点。例如正方形、矩形、五边形或自定义 2D 形状。基于原始的 2D 形状,我想创建一种方法来像附图那样均匀地向内或向外偏移点。
我不知道是否有一种简单的方法可以向内或向外均匀地偏移/增长/收缩 2D 形状上的所有点 (vector3)。如果是这样,如果我可以将点偏移 X 距离,那会很酷吗?有点像说将 2D 形状上的点向外或向内偏移 X 距离。
不,我指的不是从中心点开始缩放。虽然缩放可能适用于对称形状,但它不适用于非对称形状。
提前致谢。
最佳答案
您可以阅读 forum thread .
我对 ProfiledContourGeometry
做了一些更改并得到了 OffsetContour
,所以我把它留在这里,以防万一,如果它有帮助的话会怎样:)
function OffsetContour(offset, contour) {
let result = [];
offset = new THREE.BufferAttribute(new Float32Array([offset, 0, 0]), 3);
console.log("offset", offset);
for (let i = 0; i < contour.length; i++) {
let v1 = new THREE.Vector2().subVectors(contour[i - 1 < 0 ? contour.length - 1 : i - 1], contour[i]);
let v2 = new THREE.Vector2().subVectors(contour[i + 1 == contour.length ? 0 : i + 1], contour[i]);
let angle = v2.angle() - v1.angle();
let halfAngle = angle * 0.5;
let hA = halfAngle;
let tA = v2.angle() + Math.PI * 0.5;
let shift = Math.tan(hA - Math.PI * 0.5);
let shiftMatrix = new THREE.Matrix4().set(
1, 0, 0, 0,
-shift, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
let tempAngle = tA;
let rotationMatrix = new THREE.Matrix4().set(
Math.cos(tempAngle), -Math.sin(tempAngle), 0, 0,
Math.sin(tempAngle), Math.cos(tempAngle), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
let translationMatrix = new THREE.Matrix4().set(
1, 0, 0, contour[i].x,
0, 1, 0, contour[i].y,
0, 0, 1, 0,
0, 0, 0, 1,
);
let cloneOffset = offset.clone();
console.log("cloneOffset", cloneOffset);
shiftMatrix.applyToBufferAttribute(cloneOffset);
rotationMatrix.applyToBufferAttribute(cloneOffset);
translationMatrix.applyToBufferAttribute(cloneOffset);
result.push(new THREE.Vector2(cloneOffset.getX(0), cloneOffset.getY(0)));
}
return result;
}
随意修改它:)
关于vector - Threejs - 如何按距离偏移二维几何体上的所有点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50957349/