3D-Viewer

The 3D Viewer is a WebWidget based on WebGL technology, which displays any 3D models in glTF format and allows the user to interact with these models.

The WebWidget offers easy navigation with the arrow keys and mouse from the first-person perspective (FPP) and detects collisions by means of simple ray castings. The arrow keys are used to move horizontally forwards, backwards, right and left. If you want to change your vertical position, you have to hold down the CTRL key and use one of the arrow keys "up" or "down" at the same time. With the mouse you can set the direction of rotation of the camera. Simultaneous rotation (with the mouse) and translation (with the arrow keys) is not possible at the moment.

This message transfers a camera position to the WebWidget, specified by the name of a camera position saved in the design or by directly specifying the coordinates or rotation angle as CX_JSON_OBJECT of the following format:

{x: x-coordinate, y: y-coordinate, z: z-coordinate, rx: rotation angle to x-axis, ry: rotation angle to y-axis, rz: rotation angle to z-axis}

The coordinates are in distance units and the rotation angles in radians. Individual coordinates or angles of rotation can also be specified.

This message is sent when the user clicks on an interaction area defined in the design. The ID of the area is sent as a string parameter.

Allows you to activate the design mode using the widget menu in the upper right corner. This should not be set to TRUE in productive use, so that the user does not change the default design.

Warning: Since the WebWidget is based on JavaScript, manipulating the source code in the browser may cause the user to enter design mode despite this setting. Although this client-side manipulation is not very easy, the IV developer must ensure that the user is authorised to change the design when processing the SAVE_DESIGN_SOCKET message.

Distance of the front cut plane of the perspective camera. (see frustration)

Either an absolute value in the distance unit of the scene or the string 'auto' for auto-adjustment must be entered. An inappropriate value could cause the scene to be partially or completely hidden.

Distance of the rear cut plane of the perspective camera. (see frustration)

Either an absolute value in the distance unit of the scene or the string 'auto' for auto-adjustment must be entered. An inappropriate value could cause the scene to be partially or completely hidden.

Exit design mode.

The changes are not discarded. You can start and stop the design mode at any time to test if you can interact with the defined regions as desired.

Save design.

Saves the defined design as a design object and sends it to the running ClassiX instance via the message SAVE_DESIGN_SOCKET

Adding an interaction area or camera position

When you click on this button, a drop-down menu with two entries appears:

• Add interaction area: After that the mouse pointer changes into a cross and you can add a cuboid as interaction area at any position. This process can be cancelled with the ESC key. After adding an interaction area a dialogue appears for naming this area. The name of an interaction area must be unique among all interaction areas of this design.
• Save the camera position: Clicking this menu item opens a dialog box asking you to give a name to the current camera position and rotation. This name must be unique among all saved camera positions of this design. The IV developer can refer to it using the message SET_POSITION and thus easily change the camera position programmatically without having to worry about coordinates and rotation angle.

Rename interaction area/camera position

With this button you can change or display the unique ID of the selected interaction area or camera position.

Delete interaction area/camera position

Use this button to delete the selected interaction area or camera position.

Move area

This button displays a coordinate system around the selected interaction area, which can be used to move the interaction area in translation.

enlarge/reduce area

This button displays a coordinate system around the selected interaction area, which can be used to enlarge or reduce the interaction area.

Rotate area

This button displays a coordinate system around the selected interaction area, which can be used to rotate the interaction area.

Selecting saved positions

If the design contains saved camera positions, this button is activated and a list of saved camera positions appears when clicked. When a menu item is clicked, the corresponding camera position is selected and navigated to.

Show or hide collision beams

This button shows or hides the collision beams and collision points. The lines help to visualise how the WebWidget recognises the boundaries of the objects when navigating. This function is purely informative and serves only as an aid.

Show or hide camera visualisation

This button shows or hides the visualisation of the camera. This allows you to see the exact target direction of the camera. This function is purely informative and serves only as an aid.

Switch permeability

This button switches collision detection on or off. When collision detection is switched on, you cannot leave a closed room. Sometimes in design mode it is necessary to navigate through obstacles. This function only serves as an aid in the design mode.

Positioning the camera

This button opens a dialog where you can enter the desired coordinates and rotation angle of the camera, if number-based navigation in the design mode is desired.

Camera position and scene dimensions

To determine various distance-relevant parameters, it is necessary to know the scene dimensions or the current camera position or angle of rotation. This information is displayed on the right side of the toolbar. Here the distances are in the distance unit of the loaded scene.