Building the Tesla 360° view example

Tutorial how to build the Tesla Model-S 360° view example as it can be seen here:

https://www.yofla.com/3d-rotate/3drt_examples/example_tesla_1/

Source images can be downloaded from here:

The finished example archive can be downloaded here:
download example_tesla_1.zip

Basic Info
The example could have been built using the multiple-level feature. Using the multiple-level feature all images (with closed doors and open doors) would need to load first, until the 360 rotation starts.
The Vespa Color Selector example is built like that.

This Tesla example is built in a different way:

  1. The view with door closed is loaded first and starts to play
  2. When the first view is loaded, the view with the doors open starts to load
  3. When the second view is loaded (with doors open), the toggle views button shows
Steps to re-create the example
  1. Create 360° view with doors closed

    1. You can downlaod the closed door images here (you need to unzip the archive): images_tesla_closed.zip. Load them into the 3DRT Setup Utility and set the output size to: 927x562px to match the exact site of the images.
    2. In Advanced Settings > Player > UI tab, uncheck all options – we want to keep the design of the example clean i.e. not to show any control buttons.
    3. In Advanced Settings > Player > Control tab, set maximum zoom to 100 – so no zooming can occur. Wa are not doing zooming for this example.
    4. In Advanced Settings > Player > Rotation tab, check the “Rotate on start” option, so the rotation starts automatically when the view is loaded.
    5. In home screen, Uncheck the option “Include original Images for HI-RES zoom”, since we do not do zooming in this example.
    6. Create/Export the 360° view into a folder named e.g. tesla_closed.
  2. Create 360° view with doors open

    1. Click on “New Project” Button in the 3DRT Setup Utility. The images get removed, but the settings will stay. Import the car images with doors open (you need to unzip the archive first): images_tesla_open.zip
    2. Create/Export the 360° view into a folder named e.g. tesla_open
  3. Combine the two views

    1. create a folder where the final example will be located, e.g. tesla_example
    2. from tesla_closed folder, copy all files over
    3. rename config.js in tesla_example to configClosed.js
    4. open configClosed.js file in an editor and rename the first line from:

      to

      It is because there will be two config files loaded into one html page and we need to identify which data belongs to which rotation/view.

    5. Remove all lines in configClosed.js that come after:

      We do not need them since the rotation data in configClosed.js have now an unique variable name productRotationData_teslamodels_closed.

    6. copy all files from tesla_open folder to tesla_example folder. It is safe to overwrite files.
    7. rename config.js to configOpen.js
    8. open configOpen.js file in an editor and rename the first line from:

      to

    9. Remove all lines in configOpen.js that come after:
      We do not need them.
    10. Update showStartButton value in configOpen.js like this: Why? We need to achieve that the second 360° view does not load before the first view (with doors closed) finishes loading. When we set the showStartButton value to true, the second view will not load and wait until the “start button” is pressed. We won’t actually press the button, but call a JavaScript function. The JavaScript function is triggered after the first view finishes loading and starts to play. In this way the user can interact with the fist rotation while the second is loading in background.
    11. create the toggle views button in Photoshop (or any other editor):
      tesla-button
    12. For mobile views, where the width of the 360 view, create a smaller button:
      tesla-button-smaller
    13. Copy the tesla-button.jpg, tesla-button-small.jpg to the tesla_example/assets folder.
      Note: The single toggle button image holds both button states. If you use another size for your button, you will need to update the corresponding sizes in styles definition in iframe.html.
  4. Modifying iframe.html
  5. The 360° view is shown in an iframe, so it is easy to embed into any other site using the iframe embed tag. The iframe.html is called from the index file – index.html.

    The iframe.html is the file where all the “magic” happens. Replace the content of iframe.html in the tesla_example folder with this content:

  6. Preview the 360° view by opening or reloading the index.html file
  7. After you open the index.html in a browser, you should see the first 360° view load and start to rotate. Soon after (after the second rotation finishes loading) the toggle button should show. Pressing on the toggle button will swtich rotations.

    If you can’t see the rotation, please contact me – I have screwed something in this tutorial. Please attach also your tesla_example folder… 🙂

How all the magic happens

Let’s take a look into the code in iframe.html.

The two rotations (with doors closed and doors open) are defined with these two divs:

Note the configFile data-attribute. One points to configOpen.js, the other to configClosed.js. Other important value is the “id”, it is set and used to construct the variable name that holds the product rotation data.

Then there is the toggle-views button:

And the link to the rotatetool.js engine:

Please replace this with:

So the rotatetool.js engine is loaded from your tesla_example folder. There is no guarantee that the above url-link to rotatetool.js on yofla.com will work on your site.

The Entry Point

The entry point for the JavaScript is this function:

It is triggered when any instance of the 360° view in the page finishes loading of the images. the instanceId is passed as parameter.

Id of the instance is the id of the div, where the 360° view instance is defined.

As we can see, after the door-closed animation finishes loading, the doors-open animation starts to load. When the doors-open animation is loaded, the toggle button is shown.

Keeping views in sync

The toggle button just hides/shows one of the view by setting the CSS display: none/block property on the divs in the onViewToggle function.

We need to have the views in sync. Therefore this piece of code handles synchronising the views, so they show always the same view:

In a similar way the state whether the view was rotating before the view was toggled is read and set.

If you made it all the way down here you can also take a look on the JavaScript API page.

Note: I run in few issues when positioning the two overlapping divs correctly. Please contact me if you run into simmilar issues.