Interactive Map 3D

Owned by Sofie Desombere
Last updated: 10 May 2022 by Dries
4 min read

General

The Interactive 3D Map module is an interactive 3D touch map on which different points of interest can be indicated.

When you click on “Interactive 3D Map” in the module menu, you will get an overview of all existing Interactive 3D Map modules, as well as a button to add an Interactive 3D Map module.

 

Examples

No examples available yet.

 

General functionalities

  • Delete an interactive 3D map module: the entire module is deleted

  • Duplicate an interactive 3D map module: the entire module, including all its contents, is duplicated

  • Cancel an interactive 3D map module: all changes that were made before saving can be cancelled by clicking the cancel button

The management of an Interactive 3D Map consists of several parts:

Basic

  • Module name: internal work name

  • Has introduction: determines whether the module should show an introductory pop-up

  • If ‘has introduction’ is activated, you can add text and title in any language:

    • Title

    • Text

Models

It is possible to create multiple models within an Interactive 3D Map module, each of which has its own information. A list of all created models can be seen on the left-hand side and the details of the selected model on the right-hand side.

You can determine the following for the selected model:

  • Model name: internal work name

  • Model thumbnail: miniature image that is used for navigation between different models
    (Optimal resolution: 94px x 94px)

  • Model background: the background ‘space’ in which you move the model
    (optimal resolution: depending on the base)

  • General model info: text and title as general information of the model itself, to be added in any language

  • Model file: initial 3D model

Exploded model

3D interactive map supports a normal view of the model and an exploded view. The exploded view is normaly used to show a disassembled version of your model.
The exploded view is NOT a seperate model, you can only move existing parts of your model in the exploded view.
Defining the position of the exploded position and rotation of an element is done by:

  • Adding a child with the name exploded

  • Move that child so it’s position and rotation is the desired position/rotation of the parent

  • The mesh that is attached to the child will never be shown. The parent mesh will just be moved/rotated to this position.

Uploaden 3D model

This way you can create a GLB file (it also contains textures). You can also preview GLBs in Windows with Paint3d.

  • Only .jpg and .png files may be used as textures in the 3D model (no .psd or .bmp files)

Categories

You can add different categories, which serve as filtering for multiple touch points, within the “Categories” tab. A list of all created categories can be seen on the left-hand side; the details of the selected category on the right-hand side . You can determine the following per category:

  • Icon Image: determines the indicator of the touch point itself.
    (Optimal resolution: 90px x 150px)

  • Category Title: set a title for each category per language

It is mandatory to always create at least 1 category. If there is only 1 category, this button will not be shown in the front-end

Touchpoints

You can determine where the touch points will be visible and what their content is within the tab “Touch points”.

A list of all created touch points can be found on the left-hand side; the details for the selected touch point on the right-hand side.

You can choose between a file card or a custom popup.

A custom popup has the following properties:

General Info

  • Connected maps: here you can determine on which model, or various models, the touch point will be visible

  • Select Category: here you can assign a category within which the touch point falls, this serves for the Touch Point Content filtering:

    • Title and textual information touch point

  • Touch point position:

    • Is the touch point visible around the 3D model, or its exploded view? Remark: a point can only be visible on 1 of the 2 views

    • Set the touch point position: determine the position of your starting point and your icon of your touch point (info how to navigate is displayed in the pop-up)

    • Set the model rotation & zoom: when a user clicks on the touch point in the frontend, you determine here how the model should be oriented and how far it should be zoomed in

Assets

The following files are possible:

  • jpg

  • png

  • gif

  • pdf

  • mp4

  • wav

Add a new asset:

  1. Upload the asset from your computer

  2. If the asset can be the same for all languages, press ‘apply asset to all languages’

  3. Press ‘add to list’; only then will your photo or photos be added to the media carousel

Tip: Optimal resolution: according to ratio 16:9

Tip: ‘apply to all languages’ will only work after you have uploaded a photo and before you press save