Custom transparent meshes with View & Data API

By Philippe Leefsma (@F3lipek)

Here is a quick post for the road, the topic was raised by Bill Malcom in that forum thread:

"I have been adding my own custom THREE.js objects in the existing viewer.impl.scene for a while with no problem. However, I need to set the transparency on a simple THREE.CircleGeometry. For some reason these custom objects don't display the transparency in the viewer. Maybe the viewer renderer in affecting this? I have done similar in a pure THREE.js viewer (non LMV) and it works. [...]"

It comes from the fact is that the custom geometry is added to a scene which is rendered before the actual model. In order for this to work correctly, the mesh have to be rendered after the model. It works when adding it to the sceneAfter:

 1 var transparentMaterial = new THREE.MeshBasicMaterial({
 2   color: 0x7094FF,
 3   opacity: 0.1,
 4   transparent: true });
 5 
 6 viewer.impl.matman().addMaterial(
 7   'transparent',
 8   transparentMaterial,
 9   true);
10 
11 var geometry = new THREE.CircleGeometry(500, 50);
12 var circlegeom = new THREE.Mesh(
13   geometry,
14   transparentMaterial);
15 
16 viewer.impl.sceneAfter.add(circlegeom);
17 viewer.impl.invalidate(true);

Unfortunately this has a side-effect: the native viewer selection mechanism has to deal with meshes that do not have the properties it expects.

It can be fixed but you likely have to edit the code of the viewer and load a custom version, see my fix below (viewer3D.js #L21962). Another option would be to create the custom geometry the same way the viewer does, so it could participate in the selection, but probably more work. If you have a better fix, I'm happy to hear it ...

Here is a screenshot of the transparent custom mesh circle with a loaded model: