Transformation Example

In this example, you will load a model with different coordinate systems and links. You will learn how translations and rotations work on the different objects and children.

Fig. 25 The coordinate systems in the 3D visualization as result of this example

Open the Example in VSCode

Open the folder /examples/transforms/ in VSCode, press ctrl + shift + p and select Dev Containers: Rebuild and Reopen in Container . It takes a moment for the dev container to be started.

Load the Coordinate Systems

The Python file transforms.py loads the 3D model of the coordinate systems into the 3D visualization.

"""Example for object and children transformation.

All children A, A1 and B are in the same model with the coordinate system 'obj'.
All transformations applied to 'obj' do also influence A, A1 and B.
A1 is linked to A such that A is the parent of A1.
"""

from math import radians
from pathlib import Path

from animation import Animation

from voraus_3d_visu import Visu

visu = Visu("http://voraus-3d-visu/", clear_all=True)
model = Path(__file__).parent / "transforms.glb"


if __name__ == "__main__":
    with visu.connection():
        obj = visu.add_model(model)

Open a terminal in VSCode and start the transforms.py Python script with the following command.

python transforms.py

Open localhost:8077 in your web browser to display the 3D visualization. The coordinate systems will appear in the 3D visualization in the web browser as shown in the image below.

Fig. 26 The loaded coordinate systems in the 3D visualization in the web browser

Move and rotate the Object

After the coordinate systems have been loaded, the Python script transforms.py waits until you press the <enter> key.

        input("Press enter to move the object with all children.")
        for step in Animation(0, -1, duration=1):
            visu.update(obj.position.y(step))

After you have pressed enter, the obj, and therefore the Obj coordinate system, is moved in negative y direction (within the world coordinate system). This effects all other coordinate systems since they are all part of the object as shown in the image below.

Fig. 27 The obj in the 3D visualization in the web browser

The Python script transforms.py waits until you press the <enter> key again.

        input("Press enter to rotate the object with all children")
        for step in Animation(0, radians(25), duration=1):
            visu.update(obj.rotation.z(step))

After you have pressed enter, the obj, and therefore the Obj coordinate system, is rotated around the z axis (within the world coordinate system). This effects all other coordinate systems since they are all part of the object as shown in the image below.

Fig. 28 The obj in the 3D visualization in the web browser

Reload with initial Transforms

The Python script transforms.py waits until you press the <enter> key again.

        input("Press enter to reload model with initial transforms.")
        visu.client.clear()
        obj = visu.add_model(
            model,
            position=[-0.5, -0.5, 0],
            rotation=[0, 0, radians(26)],
        )

After you have pressed enter, the visu is cleared and the obj is reloaded with initial position and rotation. Therefore the Obj coordinate system, is moved in negative x and y direction and rotated around the z axis (within the world coordinate system). This effects all other coordinate systems since they are all part of the object as shown in the image below.

Fig. 29 The obj in the 3D visualization with initial transforms

Rotate and Move the Child B

The Python script transforms.py waits until you press the <enter> key again.

        input("Press enter to rotate B in obj CS.")
        for step in Animation(0, radians(90), duration=1):
            visu.update(obj.child("B").rotation.x(step))

After you have pressed enter, the child "B", and therefore the B coordinate system, is rotated around the x axis (within the Obj coordinate system) as shown in the image below.

Note

The child "B" refers to the name of the child in the glTF file.

Fig. 30 The child B in the 3D visualization in the web browser

The Python script transforms.py waits until you press the <enter> key again.

        input("Press enter to move B in obj CS.")
        for step in Animation(0, 1.0, duration=1):
            visu.update(obj.child("B").position.y(step))

After you have pressed enter, the child "B", and therefore the B coordinate system, is moved in negative y direction (within the Obj coordinate system) as shown in the image below.

Fig. 31 The child B in the 3D visualization in the web browser

Rotate the Child A

The Python script transforms.py waits until you press the <enter> key again.

        input("Press enter to rotate A in obj CS.")
        for step in Animation(0, radians(-20), duration=1):
            visu.update(obj.child("A").rotation.y(step))

After you have pressed enter, the child "A", and therefore the A coordinate system, is rotated around the y axis (within the Obj coordinate system). This also influences the child "A1" of "A" as shown in the image below.

Fig. 32 The child A and A1 in the 3D visualization in the web browser

Move the Child A1

The Python script transforms.py waits until you press the <enter> key again.

        input("Press enter to move A1 in A CS.")
        for step in Animation(1.0, 0, duration=1):
            visu.update(obj.child("A1").position.x(step))

After you have pressed enter, the child "A1", and therefore the A1 coordinate system, is moved in negative x direction (within the A coordinate system) since "A1" is linked to "A". The result of the movement is shown in the image below.

Fig. 33 The child A1 in the 3D visualization in the web browser

The Docker compose File

Three services (Docker containers) are defined in the docker-compose.yml file. The codemeter service is required for licensing the software. The voraus-3d-visu service starts the web-based 3D visualization backend. The devcontainer service is intended for development with VSCode. The complete docker compose file is shown below.

docker-compose.yml

services:
  codemeter:
    hostname: codemeter
    image: artifactory.vorausrobotik.com/docker/voraus-codemeter:1.0.0
    environment:
      LICENSE_SERVER: host.docker.internal
    extra_hosts:
      - host.docker.internal:host-gateway

  voraus-3d-visu:
    image: artifactory.vorausrobotik.com/docker/voraus-3d-visu:0.15.1
    hostname: voraus-3d-visu
    ports:
      - 8077:80
    environment:
      CODEMETER_HOST: codemeter
    depends_on:
      - codemeter

  devcontainer:
    image: artifactory.vorausrobotik.com/docker/voraus-3d-visu:0.15.1
    volumes:
      - .:/home/localuser/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    environment:
      CODEMETER_HOST: codemeter
    depends_on:
      - codemeter