Visiblity modes : volumes and central lines / plans

I’d like to toggle between two display modes in Three.js: “3D volumes” (extruded meshes) and “only central lines” (the axis/centerline of each element).

Right now, I create both a 3D mesh and a Line2 for each element and simply toggle their visibility. However, this requires keeping two separate objects in the scene.

Is there a way to achieve this toggle using a single Three.js object ?

Is there a recommended pattern for this (it’s a very common case in some commercial software) ?

Thanks

Nothing obvious or specific to achieve that that I know of.. maintaining two scenes or separate objects sounds legit.

You could maybe simplify some logic by using “layers” to hide/show the different sets en-mass.

I’d do this:

  • both geometries are merged one after another in a single geometry, then with .setDrawRange I’d pick what part of the whole geometry to draw (the first part or the second part)

And here are other crazy ideas (most likely just a waste of time):

  • A single geometry with the mesh and the line together, but as two groups. Each may have own material, so setting individual transparency can toggle them.
  • A single geometry with different UV for the mesh part and for the line part. Then a texture half-transparent, half-oblique is applied then swapped.
  • Mesh and lines are two morph states of skinmesh. Switching between the two is just setting the morph influence to 0 or 1.
  • If the issue is you want just one top-level variable, you can add the mesh and the line in a single THREE.Group object and work with it.
3 Likes

So needs 2 different materials.

1 Like