Three.js Objects

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

• three.js gizmo
  An example of adding the three.js gizmo and how the scene can be interacted with it.

• three.js lines between selected points
  The three.js lines can be added to the scene and provide visual feedback for selections.

• three.js object occlusion
  Specific three.js properties (like in this case colorWrite and renderOrder) can still be used.

• three.js clipping
  Clipping of objects via clipping planes.

• three.js objects (transparent grounplane)
  If needed, three.js objects can be used instead of our scene tree nodes.

• Curve Preview
  Previewing curves with three.js objects before they get computed.

• Curve Preview 2
  Previewing curves with three.js objects before they get computed.