CODEWITHSUNDEEP
javascriptreactjs3dthree.js
Daxik
Daxik

Reputation: 153

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

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

Upvotes: 1

Views: 1411

Answers (1)

Craig.Li
Craig.Li

Reputation: 1366

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.

Upvotes: 3

Related Questions