Intersection of a surface with a plane (threejs) and projecting it on plane XoY (3D)

Question

I need to highlight intersection with color and project it on plane.

EllipticParaboloid:

const init = (a, b) => {
    return (u, v) => {
        const height = 100;
        const size = 5;

        u = u * height;
        v = 2 * v * Math.PI;

        const x = a * size * Math.sqrt(u) * Math.cos(v);
        const y = u;
        const z = b * size * Math.sqrt(u) * Math.sin(v);

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

const ellipticParaboloid = (a, b) => {
    const geom = new Three.ParametricGeometry(init(a, b), 25, 25);
    const mat = new Three.MeshPhongMaterial({ color: 0xcc3333a, wireframe: true });
    const mesh = new Three.Mesh(geom, mat);

    return mesh;
}

Plane:

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;
}

Maybe some equation of intersection i can get? It's look like this: http://joxi.ru/L21GRWau5vKzrX But i need to project this intersection on plane XoY: http://joxi.ru/RmzozYwcq7aK2O

How i can do it? Maybe some example (it's will be good for me) or some material

score 3 · Accepted Answer · edited May 23 '17 at 11:47

I don't know if there is a function to do this, but I have a way to do this with math.

To get the projection of the intersection contour, first, we need to get the intersection contour, second, get the orthographic projection on the projected plane of this intersection.

So, how to get the intersection? there is a nice answer from prisoner849. and my post was built on his answer.

After we get the intersection, we need to project it. we can use an orthographic projection matrix to do that. we have stored all the points of intersection in an array, just make every point apply the orthographic projection matrix, then, translate the point to the plane surface.

        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)
          );

Apply the matrix and translate:

        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);
        }

Complete jsfiddle example.

If you want to know more about orthographic projection, you can look this book in section 8.4.

Update: I found that THREE.Vector3 has a function .projectOnPlane ( planeNormal ), don't need to calculate project matrix and apply anymore, just make every vertex in intersection contour call this function.

Wish it helps.

Can i make gradient of function for this project? https://en.wikipedia.org/wiki/Gradient . Function of two variables like z = 2x^2 + 3y^2. — Daxik, May 17 '17 at 19:56
Now, we just get a contour of the projection, you need to make a single face by the contour, then, put texture to the face, maybe you need to write a shader, but, I don't know how to write a shader. — Craig.Li, May 17 '17 at 23:43

Intersection of a surface with a plane (threejs) and projecting it on plane XoY (3D)

1 Answers1