javascript - 将几何体/网格锚定到其 Angular 以缩放 three.js

Question

我在 three.js 中基于 2 个坐标创建了一个矩形。第一个坐标是用户第一次点击的单元格，第二个坐标是用户拖动光标的位置。

正在创建的矩形尺寸正确，但是它从中心“增长”，而我希望它从第一次用户点击的 Angular 开始“增长”。我已经尝试了一些可能的解决方案来更改几何体的原点，但我还没有找到修复方法。

The demo can be see here - 使用以下代码。

    var startPoint = startPlace;
    var endPoint = endPlace;
    var zIntersect = new THREE.Vector3(startPoint.x, 0, endPoint.z);
    var xIntersect = new THREE.Vector3(endPoint.x, 0, startPoint.z);

    var differenceZ = Math.abs(startPlace.z - zIntersect.z);
    var differenceX = Math.abs(startPlace.x - xIntersect.x);
    floorGeometryNew.rotateX(-Math.PI / 2);


    var floorGeometryNew = new THREE.PlaneGeometry(differenceX, differenceZ);
    floorGeometryNew.rotateX(-Math.PI / 2);

    var x = startPoint.x;
    var y = startPoint.y;
    var z = startPoint.z;

    var voxel = new THREE.Mesh(floorGeometryNew, tempMaterial);
    voxel.position.set(x, y, z);

Answer 1

矩形的中心位于 startPoint 和 endPoint 之间，它是它们的平均值:

voxel.position.addVectors(startPoint, endPoint).divideScalar(2);

方法 1. 每次更改矩形大小时无需创建新几何体。想法是:

1. 从双面 Material 开始创建平面网格
2. 设置平面几何的第一个顶点与当前交点
3. 跟踪交点并将其值应用于平面几何的最后一个顶点，并根据第一个和最后一个顶点的位置相应地更改第二个和第三个顶点

例如，我们在 mouseDown 事件上创建了一个平面网格 newRect 并将其几何图形的第一个顶点设置为当时的交点:

newRectGeom.vertices[0].set(onPlanePoint.x, onPlanePoint.y + .5, onPlanePoint.z);

然后在 mouseMove 上我们得到交点并将其坐标应用到第四个(最后一个)顶点，同时我们更改顶点 1 和 2 的值:

newRect.geometry.vertices[1].set(onPlanePoint.x, newRect.geometry.vertices[0].y, newRect.geometry.vertices[0].z);
newRect.geometry.vertices[2].set(newRect.geometry.vertices[0].x, newRect.geometry.vertices[0].y, onPlanePoint.z);
newRect.geometry.vertices[3].set(onPlanePoint.x, onPlanePoint.y + .5, onPlanePoint.z);

它比听起来更简单:)

jsfiddle例子。关闭构建模式 - 启用 OrbitControls；构建模式打开 - 控件被禁用，您可以绘制矩形。

方法 2.我们可以控制矩形的位置和缩放，而不是控制顶点。

在 mousedown 事件中，我们将设置 startPoint 为交点

startPoint.copy(onPlanePoint);

然后我们将找到矩形的位置和比例:

newRect.position.addVectors(startPoint, onPlanePoint).divideScalar(2);
newRect.position.y = 0.5; // to avoid z-fight
newRect.scale.set(Math.abs(onPlanePoint.x - startPoint.x), 1, Math.abs(onPlanePoint.z - startPoint.z))

jsfiddle例子。在视觉上和功能上，它与 方法 1 相同。在我看来，方法 2 更简单。