How to Create a 2D Elevation Plan with Measurements from a GLTF Model in Three.js

Questions
, , , ,
1

Hello everyone,

I’m currently working on a project in Three.js where I need to generate 2D elevation plans from a 3D GLTF model of a house. My goal is to create a projection of the house’s front (or any other side) into a 2D plane, including accurate heights and measurements, which I will later use to draw on a PDF using libraries like jsPDF.

Here’s what I’ve managed so far:

  • I can generate a floor plan by using a clipping plane to get a section of the house.
  • By taking the intersections of each mesh with the clipping plane, I can draw the edges on a PDF and extract measurement information like lengths.

However, for creating an elevation plan, the clipping plane method doesn’t suffice because it only gives intersections, whereas I need the full projection of the house’s front view into 2D.

What I’m Looking For:

  1. Projection of the Model into 2D: How to project the entire front of the house (or any specified side) into a 2D plane.
  2. Measurement Extraction: How to accurately extract height and other measurements from this 2D projection.
  3. Integration with jsPDF: Any advice or best practices on integrating the extracted measurements and projection into jsPDF for generating the final PDF.

Additional Context:

  • I’m using Three.js for rendering the GLTF model.
  • I have experience with clipping planes and extracting intersections for floor plans, but this approach doesn’t work for my current needs.
  • The final output needs to be a 2D elevation plan with accurate measurements that can be rendered on a PDF.
    something like this but with heights, and measurments:
    image
    image1070×668 110 KB

Any guidance, code snippets, or references to relevant resources would be greatly appreciated!

Thank you in advance for your help!

2

gkjohnson/three-edge-projection should be helpful :relieved:

There are no units in 3D, so there’s no real measurements to extract. That logic is 100% up to you and your calculations.

You can place measurements as text nodes, and projections you can save by setting preserveDrawingBuffer to true in your WebGLRenderer and then using renderer.domElement.toBlob to transform last rendered frame into a Blob image.

2 Likes
5

i tried it and i got something like this, but then it prints every edge. For example here you can see:
image

i want to load it so that it only draws the oter edges of the model. Does you have an idea on how to do it:

6

Rendering the scene with OrthographicCamera is not what you need?

1 Like
7

no, my goal is to have a drawing package for the elevation plan similar to what i showed in the op, i want to be abe to draw it in pdf as well

8

no, my goal is to have a drawing package for the elevation plan similar to what i showed in the op, i want to be abe to draw it in pdf as well.

All i want is a 2d representation of a model like a house model, so that i can draw as 2d, and also in jspdf