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.

Let’s start with some background around how our scene tree works and how three.js objects are created internally. Our scene tree is built out of nodes. Each node can have 0-n child nodes which therefore create the tree structure of the scene tree. Each node can have 0-n data items which represent data that can be either visualized or be used in other ways. In these data items you find the geometry, materials, animations and much more. Whenever a node of the scene tree is created or updated, the node and it's descendants are processed and three.js Object3D are created per node and per data item. For the data items, the data of that item is processed and is loaded as the corresponding three.js type (for geometry, a Mesh is created for example). For both, nodes and data items, the created three.js objects can be found in the threeJsObject property with the key in that dictionary being the id of the viewport where you want to access the object from. This also means that three.js objects further down the scene tree structure are added/removed whenever there are customization calls.

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.