Skip to main content
Version: 2.x

Override CAD nodes transforms

Reveal supports overriding transforms of individual objects by providing tree indices to identify 3D nodes.

Note that any transformation override is applied with respect to the THREE.js world coordinate space. Also note that the node transform is not accounted for when determining geometry to load. Due to this node transforms shouldn't apply too drastic changes to the position and extend of the nodes. For model wide changes Cognite3DModel.setModelTransformation should be used instead. Also note that non-uniform scaling of nodes are not currently supported and may give unexpected results.

Examples

Setting node transform

Setting the transform of a given node is done by Cognite3DModel.setNodeTransformByTreeIndex and takes a tree index, a matrix transformation and a flag if the transformation also should be applied to children of the given node.

Live Editor

Reset node transform

Resetting the transformation is done with Cognite3DModel.resetNodeTransformByTreeIndex and takes the given tree index,

and a flag that determines if the node transform reset also should be applied to any child nodes of the given tree index.

Live Editor

Animations

Creating animations is a matter of applying transformations multiple times. As stated above, any transformation

is applied in the global world coordinate system of THREE.js. This means that if you want to rotate a model around a given point (and not around the world origin), you first need to transform the model to that given point, then rotate, then transform back into the world coordinate space. An example of this is done below to create an animation of the crane rotating. First we get the center of the bounding box for node with id 533010 which is close to the base of the crane. Then we set up an interval which triggers a function that transforms the entire crane (532261): first to the base of the crane, then rotates the model, then transforms it back, thus giving us the wanted rotation. Keep in mind that THREE.js uses column matrix notation, such that

the following statement:

  const matrixOverride = modelToWorld.multiply(rotationMatrix.multiply(worldToModel));

first applies worldToModel, then rotationMatrix and finally modelToWorld.

Live Editor