360° Viewer

This chapter declares how to configure a function-plugin 360degree. For example a 360-degree-plugin can be used e.g. in FSNavigation.

General information:

A 360d-file is a container for the following files:

  • .jpg product-images;

  • .omn-compound-meta.json (this file contains metadata);

  • previews of the 360d-model (extension .png or .jpg).

You can add several previews from different perspectives.

How to create a 360d file?

To create a 360d-file, a user should do the following steps:

  1. Create a new folder and name it (e.g. Schraubenzieher resp. screwdriver).

    360 deg folder

  2. Copy or add to this folder images (files) of a product. It will be easier to manage those files if their names are the same and they differ only by numerical order.

    degree 360 all pictures

  3. Copy or add to this folder a template for .omn-compound-meta.json file.

    degree 360 json template

  4. Copy or add to this folder image(s) with previews of a 360d model (one or more).

    degree 360 previews

  5. Make amendments to the template .omn-compound-meta.json file. (Add images names of your 360-D-product-model file and preview file(s). You can edit this file e.g. with notepad or notepad ++.

    degree 360 amendment
    schraubzieh 2

    The following template can be used to create JSON-files for 360-degree-images with one plane:

    JSON FILE need to have a filename start with "."

    		 
    {
    "previews": [
        {
            "name": "Preview 1",
            "file": "Schraubenzieher_preview_1.jpg"
        },
        {
            "name": "Preview 2",
            "file": "Schraubenzieher_preview_2.jpg"
        }
    ],
    "yPlanes": [
        {
            "name": "1 plane",
            "images": [
                {
                    "source": "Schraubenzieher_1_1.jpg"
                },
                {
                    "source": "Schraubenzieher_1_2.jpg"
                },
                {
                    "source": "Schraubenzieher_1_3.jpg"
                },
                {
                    "source": "Schraubenzieher_1_4.jpg"
                },
                {
                    "source": "Schraubenzieher_1_5.jpg"
                },
                {
                    "source": "Schraubenzieher_1_6.jpg"
                },
                {
                    "source": "Schraubenzieher_1_7.jpg"
                },
                {
                    "source": "Schraubenzieher_1_8.jpg"
                },
                {
                    "source": "Schraubenzieher_1_9.jpg"
                },
                {
                    "source": "Schraubenzieher_1_10.jpg"
                },
                {
                    "source": "Schraubenzieher_1_11.jpg"
                },
                {
                    "source": "Schraubenzieher_1_12.jpg"
                },
                {
                    "source": "Schraubenzieher_1_13.jpg"
                },
                {
                    "source": "Schraubenzieher_1_14.jpg"
                },
                {
                    "source": "Schraubenzieher_1_15.jpg"
                },
                {
                    "source": "Schraubenzieher_1_16.jpg"
                },
                {
                    "source": "Schraubenzieher_1_17.jpg"
                },
                {
                    "source": "Schraubenzieher_1_18.jpg"
                },
                {
                    "source": "Schraubenzieher_1_19.jpg"
                },
                {
                    "source": "Schraubenzieher_1_20.jpg"
                },
                {
                    "source": "Schraubenzieher_1_21.jpg"
                },
                {
                    "source": "Schraubenzieher_1_22.jpg"
                },
                {
                    "source": "Schraubenzieher_1_23.jpg"
                },
                {
                    "source": "Schraubenzieher_1_24.jpg"
                }
            ]
        }
    ]
}

    The following template can be used to create JSON-files for 360-Degree-images with several planes:

    {
    "previews": [
        {
            "name": "Preview 1",
            "file": "Schraubenzieher_preview_1.png"
        },
        {
            "name": "Preview 2",
            "file": "Schraubenzieher_preview_2.png"
        }
    ],
    "yPlanes": [
        {
            "name": "1 plane",
            "images": [
                {
                    "source": "Schraubenzieher_1_1.jpg"
                },
                {
                    "source": "Schraubenzieher_1_2.jpg"
                },
                {
                    "source": "Schraubenzieher_1_3.jpg"
                },
                {
                    "source": "Schraubenzieher_1_4.jpg"
                },
                {
                    "source": "Schraubenzieher_1_5.jpg"
                },
                {
                    "source": "Schraubenzieher_1_6.jpg"
                },
                {
                    "source": "Schraubenzieher_1_7.jpg"
                },
                {
                    "source": "Schraubenzieher_1_8.jpg"
                },
                {
                    "source": "Schraubenzieher_1_9.jpg"
                },
                {
                    "source": "Schraubenzieher_1_10.jpg"
                },
                {
                    "source": "Schraubenzieher_1_11.jpg"
                },
                {
                    "source": "Schraubenzieher_1_12.jpg"
                },
                {
                    "source": "Schraubenzieher_1_13.jpg"
                },
                {
                    "source": "Schraubenzieher_1_14.jpg"
                },
                {
                    "source": "Schraubenzieher_1_15.jpg"
                },
                {
                    "source": "Schraubenzieher_1_16.jpg"
                }
            ]
        },
        {
            "name": "2 plane",
            "images": [
                {
                    "source": "Schraubenzieher_2_1.jpg"
                },
                {
                    "source": "Schraubenzieher_2_2.jpg"
                },
                {
                    "source": "Schraubenzieher_2_3.jpg"
                },
                {
                    "source": "Schraubenzieher_2_4.jpg"
                },
                {
                    "source": "Schraubenzieher_2_5.jpg"
                },
                {
                    "source": "Schraubenzieher_2_6.jpg"
                },
                {
                    "source": "Schraubenzieher_2_7.jpg"
                },
                {
                    "source": "Schraubenzieher_2_8.jpg"
                },
                {
                    "source": "Schraubenzieher_2_9.jpg"
                },
                {
                    "source": "Schraubenzieher_2_10.jpg"
                },
                {
                    "source": "Schraubenzieher_2_11.jpg"
                },
                {
                    "source": "Schraubenzieher_2_12.jpg"
                },
                {
                    "source": "Schraubenzieher_2_13.jpg"
                },
                {
                    "source": "Schraubenzieher_2_14.jpg"
                },
                {
                    "source": "Schraubenzieher_2_15.jpg"
                },
                {
                    "source": "_2_16.jpg"
                }
            ]
        }
    ]
}

  6. A user will have to mention the existing file-names instead of samples, add or remove previews according to what he actually has.

    You can download the template of .omn-compound-meta.json using this links: .omn-compound-meta.json

  7. Add all files from a folder to a zip-archive with zero compression (e.g. Schraubenzieher.zip)

    degree 360 ziparch

  8. Change the file extension from .zip to .360d manually (rename archive file).

    degree 360 3d extens

Welcome to the AI Chat!

Write a prompt to get started...