Web Deployment

Prerequesite

Interactive 3D content produced with 3DVIA Studio is called an experience. You can deploy experiences on the Web thanks to the 3DVIA Player which is supplied as a browser plugin. We assume that you have already published your experience on www.3DVIA.com and thus you have:

  • A Unique ID: the 3DVIA identifier made of 16 alphanumeric characters used by the 3DVIA Player to determine which experience to load
  • Set the audience as public

If you need to know how to publish an experience, you may refer to the Web Publishing reference. If you have already published your experience but have forgotten its ID, you can retrieve it:

  • From 3DVIA Studio: click “Export to 3DVIA” in the Build workset and then copy the content ID from the export pop-up
  • From 3DVIA Studio Pro: click “Export” in the Build workset and then copy the content ID from the export pop-up
  • From 3DVIA.com: go to your experiences page, and choose the relevant experience by clicking its thumbnail and retrieving its ID from the embed tab

Embed my experience

Like any browser plugin, you can embed the 3DVIA Player with the standard <object> and <embed> HTML tags (see the Pure HTML Alternative section).

We also provide a JavaScript helper that facilitates experience embedding. This is especially useful when the 3DVIA Player installation is required on the client machine. To do this, copy and paste the following script in your HTML:

<script type="text/javascript" language="JavaScript" src="http://player.studio.3dvia.com/embed.js"></script>
<script type="text/javascript" language="JavaScript">
player3dvia.embedHere('610', '343', 'C29EA5F8CADCEEC0');
</script>

…and change the values of the player3dvia.embedHere arguments:

  • First Argument: the 3DVIA player width
  • Second Argument: the 3DVIA player height
  • Third Argument: the 3DVIA.com ID of the experience you want to load in the 3DVIA Player
  • Fourth (optional) Argument: the DOM ID of the 3DVIA Player (default setting: 3dvia-player). Thanks to this ID, you will be able to set up communication between the 3DVIA Player and the Web page (see the Browser Interaction article for more information).

Extended JavaScript embedding

Another option is to create a <div> element in your page and replace its contents just before the end of the HTML body. This method has two advantages:

  • When JavaScript includes are moved to the bottom of the HTML body, the page renders faster.
  • You can display a custom message in this <div> element when the player is not installed on the client machine.

Here is an illustration of this method:

<body>
<!-- HTML body beginning -->
<div id="player-wrapper"></div>
<!-- HTML body following -->
<script type="text/javascript" language="JavaScript" src="http://player.studio.3dvia.com/embed.js"></script>
<script type="text/javascript" language="JavaScript">
player3dvia.embedAt('player-wrapper', '610', '343', 'C29EA5F8CADCEEC0');
</script>
</body>

…with the player3dvia.embedAt arguments to be changed:

  • First Argument: the ID of the DOM wrapping element whose inner contents will be replaced by the 3DVIA Player. This DOM element has to be created before the player3dvia.embedAt call
  • Second Argument: the 3DVIA Player width
  • Third Argument: the 3DVIA Player height
  • Fourth Argument: the 3DVIA.com ID of the experience you want to load in the 3DVIA Player
  • Fifth (optional) Argument: the DOM ID of the 3DVIA Player (not to be confused with its DOM wrapping element ID) — by default set to 3dvia-player. Thanks to this ID, you will be able to set up communication between the 3DVIA Player and the Web page (see the Using JavaScript article for more information)
  • Sixth (optional) Argument: boolean defining if the player3dvia.embedAt always has to replace the DOM wrapping element inner contents (default setting: true). If set to true, the wrapping element inner contents will be replaced by the 3DVIA Player if it is installed on the client machine. It the player is not installed, it will be replaced by a link toward the installer. If set to false, the wrapping element inner contents will be replaced by the 3DVIA Player if it is installed, and will remain untouched otherwise.

Thus calling player3dvia.embedAt with the optional arguments should look like:

<script type="text/javascript" language="JavaScript">
player3dvia.embedAt('player-wrapper', '610', '343', 'C29EA5F8CADCEEC0', '3dvia-player', true);
</script>

Pure HTML alternative

You may also copy and paste the following HTML sample if you prefer not to use JavaScript:

<object width="610" height="343" classid="CLSID:F705A1E9-0E4C-4F32-A647-2DE40809969A" codebase="http://player.studio.3dvia.com/3DVIAPlayer-Installer.exe"><param name="content_src" value="C29EA5F8CADCEEC0"/><embed width="610" height="343" type="application/x-3dvia-mpweb" pluginspage="http://player.studio.3dvia.com/3DVIAPlayer-Installer.exe" content_src="C29EA5F8CADCEEC0"/></object>

NOTE: in this case the user will have to deal with his/her browser-specific plugin mechanism rather than having a simple link towards the 3DVIA Player installer. Currently, Chrome does not support the pluginspage attribute so it is highly recommended to prefer the JavaScript methods discussed before.

Furthermore, our JavaScript embedding script automatically sets 3dvia-player as the DOM ID of the <object> or <embed> element depending on the browser running (Internet Explorer for the <object> tag Vs Mozilla-based browsers like Firefox for the <embed> tag). Thus, it’s easy to do a browser-independent DOM selection like:

<script type="text/javascript" language="JavaScript">
document.getElementById('3dvia-player').ExecuteCommand(...);
</script>

Please refer to the Using JavaScript article for more information on this technique.

3DVIA Player startup options

Whatever embedding technique you choose (JavaScript Vs pure HTML), you can set options to the 3DVIA Player at startup. To do so, you can use the extra attribute “startup_options”.

The startup options are:

  • autoplay: with this option, the 3DVIA Player will automatically start playing the experience when the page loads. Values can be: true / false
  • forcescheme: force the scheme to be used for the player transactions with the server. Values can be: http / https

Depending on the embedding technique you choose, the syntax is as follow:

Using JavaScript:

<script type="text/javascript" language="JavaScript">
player3dvia.embedHere('610', '343', 'C29EA5F8CADCEEC0', '3dvia-player', 'autoplay=true');
</script>

Using extended JavaScript:

<script type="text/javascript" language="JavaScript">
player3dvia.embedAt('player-wrapper', '610', '343', 'C29EA5F8CADCEEC0', '3dvia-player', true, 'autoplay=true');
</script>

Using pure HTML:

<object width="610" height="343" classid="CLSID:F705A1E9-0E4C-4F32-A647-2DE40809969A" codebase="http://player.studio.3dvia.com/3DVIAPlayer-Installer.exe"><param name="content_src" value="C29EA5F8CADCEEC0"/><param name="startup_options" value="autoplay=true"/><embed width="610" height="343" type="application/x-3dvia-mpweb" pluginspage="http://player.studio.3dvia.com/3DVIAPlayer-Installer.exe" content_src="C29EA5F8CADCEEC0" startup_options="autoplay=true"/></object>

Please note that the options names and values are not case-sensitive.

3DVIA Player startup parameters

Whatever embedding technique you choose (JavaScript Vs pure HTML), you can pass parameters to the 3DVIA Player at startup by appending them after the experience ID, respecting the syntax MY_EXPERIENCE_ID?param1=value1&param2=value2. Just split the ID from the parameters with a ? sign, and separate as many parameters as you need with & signs.

Here is the relevant JavaScript example:

<script type="text/javascript" language="JavaScript" src="http://player.studio.3dvia.com/embed.js"></script> <script type="text/javascript" language="JavaScript"> player3dvia.embedAt('player-wrapper', '610', '343', MY_EXPERIENCE_ID?param1=value1&param2=value2'); </script>

And the HTML one:

<script type="text/javascript" language="JavaScript" src="http://player.studio.3dvia.com/embed.js"></script> <script type="text/javascript" language="JavaScript"> player3dvia.embedAt('player-wrapper', '610', '343', MY_EXPERIENCE_ID?param1=value1&param2=value2'); </script><object width="610" height="343" classid="CLSID:F705A1E9-0E4C-4F32-A647-2DE40809969A" codebase="http://player.studio.3dvia.com/3DVIAPlayer-Installer.exe"><param name="content_src" value="MY_EXPERIENCE_ID?param1=value1&param2=value2'"/><embed width="610" height="343" type="application/x-3dvia-mpweb" pluginspage="http://player.studio.3dvia.com/3DVIAPlayer-Installer.exe" content_src="MY_EXPERIENCE_ID?param1=value1&param2=value2'"/></object>

To retrieve these parameters’ values from your experience, you can use the following building blocks: Get Web Player Content URI Param and Get Web Player Content URI Query.