Guide: How to Determine Distortion of a "3D Panel Images"

Once the 3D designer publishes the panorama from 3D Vista, the next step would be determining the different distorted panels. These panels are content holders on the venue, so a cover image is needed to represent the content. Uploading an image to be used as the cover image for the panels has to be distorted to fit perfectly on a 3D perspective. So we need to determine the different distorted panels and get the exact coordinates of each point to define the distortion of the Panel.

How to determine the distortion of the 3D Panel images:

Step 1. Get the extracted 3D file components from the 3D designer. These come with different files and folders and distorted panel images are saved in the folder called media.

💡

Pro tip: The extracted file image names are auto-generated in a gibberish manner which can be confusing to distinguish which Panel is which. Ask your 3D designer to define these and rename those for easy and better distinction

Step 2. Import these Panel images on Figma.

💡

Pro Tip: You may use other designing tools (i.e Photoshop, Illustrator, or Sketch) as long as it allows you to get the x and y coordinates of the different points of the Panel images.

Step 3. Put the image on a frame by right-clicking the image and select 'Frame selection'

Step 4. Using the pen tool, trace the shape of the distorted image. This will create a vector later on top of the image.

Step 5. Shift to move tool and select the four different points of the vector image. This will show the x and y coordinate values of each point which the developer will be needing to define the distortion of each panel for building the 3D venue.

Top Left

Top Right

Bottom Left

Bottom Right

The above example will result in the following JSON configuration:

"backgroundCoverImageDistortion": {
     "topLeft": ["0, 0", "16, 7"],
     "bottomLeft": ["0, 409", "4.5, 397"],
     "bottomRight": ["450, 409", "441, 381"],
     "topRight": ["450, 0", "436, 85.5"]
}