Our Viewer is using three.js an awesome graphics library that uses WebGL to render the contents in 2D and 3D. If you don’t want to, you will never have to touch anything related to three.js, but that might not be the case for all. Therefore, we will explain on this page how to add custom three.js objects and how to access the three.js objects that are created by the Viewer.

Adding custom three.js objects

You can easily add three.js objects to the viewer scene tree by using the ThreejsData item. In the example below, we create a Torus with three.js and add it to the scene. This works for all three.js objects that extend Object3D.

Accessing three.js data

The objects of the scene tree get converted into three.js objects. These objects can be accessed and manipulated. Be careful though, customization request will overwrite the changes you did to those objects.

The objects are stored in the threeJsObject property of every tree node and the same property in every data object. With the updateCallbackThreeJsObject you can listen to changes of these objects when a customization happend and reapply the changes you want to do.

In the example below we use this to our advantage and change properties of the three.js object that are otherwise not exposed.

CodeSandBoxes