Section A Model

I am brand new to Three.js (or javascript in general). I’ve been prototyping a tool (not in JS) that will section a 3D model and produce a 2D representation of the cross-section. I am thinking I would like to put this on a website, so that is how I stumbled on Three.js.

The user can move the cross-section in the X, Y, or Z axis and it will produce a 2D drawing of the intersection between the plane and the mesh (STL).

I searched Google and this Discord for an example of how to do this with Three.js but could not find an example.

Does anyone have some sample code for putting an arbitrary plane through a 3D mesh (STL) and generating the resulting 2D interface?

I don’t have any example (yet). but I would probably use a second camera, probably orthographic, with a near and far of 1 unit, and render to an adjacent canvas.

1 Like

This seems pretty close. There must be a way to get a vector out (programmatically) that is the representation of the red boundaries.

Ok, I think I’ve worked out how to get a 2D cross-section of a 3D mesh in JS. Thanks for the tips.

2DSectionView

2 Likes

@yepher
As an option, have a look at the using of three-mesh-bvh plugin: Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries! - #18 by gkjohnson

2 Likes

Could you share how this was done? I’m curious which approach ended up working for you.

Why not sharing a simple example of the approach you used? Not my case, at least not yet, but it could be useful for others looking for the same thing. Three.js is already complicated as it is despite its aim to simplify 3D graphics in the browser, lots of updates that change things and break backward compatibility by making good code becoming obsolete very fast, so such a forum should be also about giving back, not just taking in, considering the scarcity and volatility of the available information on doing one thing or another.

Here is my example that I was imagining that I might be able to use the orthographic cameras near/far.


Link : https://sbcode.net/extra_html/section.html

1 Like

This is pretty amazing too:
https://gkjohnson.github.io/three-mesh-bvh/example/bundle/edgeProjection.html