表面与平面(三个)的交点并将其投影在平面XoY(3D)上

时间:2017-05-06 15:34:21

标签: javascript reactjs 3d three.js

我需要突出显示与颜色的交点并将其投影到平面上。

EllipticParaboloid:

const init = (c) => {
    return (u, v) => {
        const height = 300;
        const size = 1;

        u = u * height;
        v = v * height;

        const x = size * u - height / 2;
        const y = c;
        const z = size * v - height / 2;

        return new Three.Vector3(x, y, z);
    }
}

const levelSurface = (c) => {
    const geom = new Three.ParametricGeometry(init(c), 25, 25);
    const mat = new Three.MeshPhongMaterial({ color: 0x00ff0000, wireframe: true });
    const mesh = new Three.Mesh(geom, mat);

    return mesh;
}

平面:

def format_set(given):
    if isinstance(given, (set, frozenset)):
        return '{' + ', '.join(format_set(i) for i in given) + '}'
    else:
        return str(given)

也许我可以得到一些交集方程式? 它看起来像这样:http://joxi.ru/L21GRWau5vKzrX 但是我需要在XoY平面上投射这个交叉点:http://joxi.ru/RmzozYwcq7aK2O

我怎么做?也许一些例子(这对我有好处)或一些材料

1 个答案:

答案 0 :(得分:2)

我不知道是否有这样做的功能,但我有办法用数学做这个。

要获得交点轮廓的投影,首先,我们需要得到交点轮廓,其次,得到该交点投影平面上的正交投影。

那么,如何获得交集?有一个很好的answer来自囚犯849。我的帖子建立在他的答案之上。

我们得到交叉路口后,我们需要预测它。我们可以使用正交投影矩阵来做到这一点。我们已经将所有交点存储在一个数组中,只需将每个点应用于正交投影矩阵,然后将该点转换为平面。

        var n = mathPlane.normal;
        //make the orthographic projection matrix
        projectMatrix.set(
          1 - Math.pow(n.x , 2) ,     -1 * n.x * n.y ,        -1 * n.x * n.z,
          -1 * n.x * n.y ,            1 - Math.pow(n.y , 2) , -1 * n.y * n.z,
          -1 * n.x * n.z ,            -1 * n.y * n.z ,        1- Math.pow(n.z , 2)
          );

应用矩阵并翻译:

        transformMatrix = getProjectMatrix(mathPlane.normal);
        for (var i = 0 ; i < pointsOfIntersection.vertices.length ; i++)
        {
            projectionGeom.vertices[i] = new THREE.Vector3().copy(pointsOfIntersection.vertices[i]).applyMatrix3(transformMatrix);
            projectionGeom.vertices[i].addScaledVector( mathPlane.normal , mathPlane.constant * -1);
        }

完成jsfiddle示例。

如果您想了解有关正交投影的更多信息,可以在第8.4节中查看book

更新:我发现THREE.Vector3有一个函数.projectOnPlane ( planeNormal ),不需要再计算项目矩阵并应用,只需使交叉轮廓中的每个顶点调用此函数即可。

希望它有所帮助。