Sometimes it's useful to add custom content to the 3D scene to model data Reveal doesn't
support or to customize the 3D environment. Reveal supports this by using the
Cognite3DViewer.addObject3D-function which accepts ThreeJS objects.
There are a few restrictions to the 3D content that is to be combined with Reveal models:
- Reveal uses an "implicit lighting model", i.e. no lights are added to the scene. If you need lights this needs to be added to the viewer scene.
- Geometry is expected to use "default depth testing", meaning
LessEqualDepth. You might experience unexpected results if you are using materials where this doesn't hold.
- Objects with opacity less than 1.0 will appear transparent regardless of if
false. The final composited image is always blended as if
OneMinusSrcAlphaFactorand the blending settings on the material won't have any effect on the composition.
Adding markers to the scene on clicks
The following example reacts to clicks in the scene and adds markers to the positions clicked.
To make a model feel more natural it might be useful to add an environment. The following example adds sky and a sea effect for the example oil rig.
Below you'll find an interactive example, but first lets walk through the different parts. See the bottom of this page for an interactive example.
First, let's encapsulate the model in a large sky-textured sphere to create an illusion of skies. The sphere map is available from Free HDR - EXR SKIES-blog.
This looks a bit better, but the oil rig appears to be floating mid-air at this point. Lets add an ocean. A plane is rendered at the sea level.
Below is the complete code for adding a skybox and ocean to the scene.