Seeking Guidance on Implementing 2D Drawing Features in a 3D Application

Questions
1

Hello everyone,

I’m working on a Three.js application where users can create geometry by drawing directly in a 2D space. Here’s the workflow I’m aiming for:

  1. In the 3D space, users create axes on the XZ plane.
  2. When users select a specific axis, they are redirected to the corresponding plane for drawing.

To achieve this, I suppose that I should calculate the plane’s normal vector and its distance from the origin based on the selected axis. No problem for doing this.

My main question is: How should I handle the camera and scene to provide a 2D view where users can focus solely on the selected plane?

  • The view should ensure that anything before or behind the plane is hidden.
  • The interface should resemble a clean, 2D drawing environment aligned with the defined plane.

At this point, I’m not looking for specific code but rather the key concepts or techniques I should understand to implement this. If there are any existing projects or examples that align with this functionality, I’d love to explore them as well.

Thank you in advance for your insights!

2

I’m not quite sure how to understand it. Can you illustrate it with a sketch?

I have created a simple construction with predefined planes.
Construction of frames with contour/profile

3

It’s basically this : https://www.youtube.com/watch?v=dPHYi-fYcnk

I would create these line grids, each corresponding to a section of my 3D model, meaning a plane where I can draw in it.

4

I’m not sure I understand correctly the question. I assume there are many parallel planes and you want the camera to see just one of them, frontal view. If my assumption is correct, here is what I suggest:

  • for frontal view - place the camera along the normal vector and against the center of the plane
  • for filtering just one plane - I can see three options:
    • use layers, so that you could easily isolate and see just one plane
    • make all planes invisible, keep just the one special plane visible
    • set very flat camera frustum by setting cameras near and far so that just one plane fits in between