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:

var transparentMaterial = new THREE.MeshBasicMaterial({
  color: 0x7094FF,
  opacity: 0.1,
  transparent: true })

viewer.impl.matman().addMaterial(
  'transparent',
  transparentMaterial,
  true)

var geometry = new THREE.CircleGeometry(500, 50)
var mesh = new THREE.Mesh(
  geometry,
  transparentMaterial)

// prevents issue when running viewer selection
mesh.geometry.attributes = {position:{array:[]}}

viewer.impl.sceneAfter.add(mesh)
viewer.impl.invalidate(true)

// prevents your mesh from being hidden
// when hidding other viewer components
viewer.setGhosting(false)

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