The 3Defy Embedding API allows you to embed 3D models in your own web pages, and even create your own custom galleries. You can obtain embed code snippets in both the Modeler and Viewer under Share ⇒ Get Embed Code.
You can change the width and height to any values you like, specified in pixels (i.e. 800px) or in percent (i.e. 50%). Make sure you include either the px or the %.
You may wish to make your viewer resizable, which creates a handle on its bottom-right corner. To enable resizing, you must include the jQuery UI libraries in your page and change the resizable parameter to true.
Include this code snippet in the <head> section of your page:
and change your viewer's resizable attribute to true:
After a user resizes the viewer, the width and height are stored in their browser cache and reused each time they view resizable models on your site.
To embed multiple models in a page, copy and paste the embed codes for each model into your desired locations.
Note that each embed code is composed of 2 lines, a <script> line (which is always the same) and a <div> line (which is different for each model). The <script> line is only needed once per page, and it must appear before the model divs. For conciseness, you may wish to just place it once in the <head> and omit it from the <body> section.
Whenever there are multiple models in a page, the 3Defy Viewer will automatically display Next and Previous buttons in its top-right corner to enable easy browsing through the models.
To accomplish this, append display:none; to the style of all the models you wish to hide. These models will not appear in the web page, but will still be shown in order when using the Next and Previous buttons. By hiding all of the models except one, you have effectively created a single viewer which allows browsing of all the models.
The 3Defy viewer automatically filters duplicate models from its internal list. So the following code is an effective way of creating a single 480x360 viewer, and 3 integrated thumbnails:
The Model ID can correspond to any valid model, regardless of whether or not it is already present in the current page.
Summary:
| Control | Type | Description |
|---|---|---|
| width | style | viewer width (ending in px or %) |
| height | style | viewer height (ending in px or %) |
| display | style | specify none to hide a model (it will still be accessible via next/previous buttons) |
| resizable | attribute | specify true if the viewer should be resizable (requires additional jQuery reference) |
| targetActive | attribute | specify true if clicking should target the active viewer |
| gotoVideo(MODEL_ID) | javascript | call this function on the 3defy_viewer element to load a model into the active viewer |
Embedding a Single 3D Model:
To embed a single model, just copy and paste the embed code into the body of an HTML page. The 3Defy Viewer will get embedded at the position of the embed code.<script type="text/javascript" src="http://apps.3defy.com/js/3defyembed.js"></script> <div class="3defy" resizable="false" style="width:480px;height:360px;" model="MODEL_ID"></div>
Changing the Viewer Size:
Embedded models will default to 480x360 pixels, as indicated by the default embed code:style="width:480px;height:360px;"
You can change the width and height to any values you like, specified in pixels (i.e. 800px) or in percent (i.e. 50%). Make sure you include either the px or the %.
Making the Viewer Resizable:
By default, models will be embedded at the width and height you specify, and will not be resizable by the user. This is indicated by the default embed code:resizable="false"
You may wish to make your viewer resizable, which creates a handle on its bottom-right corner. To enable resizing, you must include the jQuery UI libraries in your page and change the resizable parameter to true.
Include this code snippet in the <head> section of your page:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
and change your viewer's resizable attribute to true:
resizable="true"
After a user resizes the viewer, the width and height are stored in their browser cache and reused each time they view resizable models on your site.
Embedding Multiple 3D Models in a Page:
You can embed more than one model in a single web page. For performance reasons, only one model will be active at a time. The others will display thumbnails, and can be activated by clicking on their thumbnails.To embed multiple models in a page, copy and paste the embed codes for each model into your desired locations.
Note that each embed code is composed of 2 lines, a <script> line (which is always the same) and a <div> line (which is different for each model). The <script> line is only needed once per page, and it must appear before the model divs. For conciseness, you may wish to just place it once in the <head> and omit it from the <body> section.
<head>
<script type="text/javascript" src="http://apps.3defy.com/js/3defyembed.js"></script>
</head>
<body>
<div class="3defy" resizable="false" style="width:480px;height:360px;" model="MODEL_ID_1"></div>
<div class="3defy" resizable="false" style="width:480px;height:360px;" model="MODEL_ID_2"></div>
<div class="3defy" resizable="false" style="width:480px;height:360px;" model="MODEL_ID_3"></div>
</body>
Whenever there are multiple models in a page, the 3Defy Viewer will automatically display Next and Previous buttons in its top-right corner to enable easy browsing through the models.
Using a Single Viewer for Multiple 3D Models:
Since only one model can be active at a time, you may prefer to have a single viewer and let the user just browse the models with the Next and Previous buttons.To accomplish this, append display:none; to the style of all the models you wish to hide. These models will not appear in the web page, but will still be shown in order when using the Next and Previous buttons. By hiding all of the models except one, you have effectively created a single viewer which allows browsing of all the models.
<head>
<script type="text/javascript" src="http://apps.3defy.com/js/3defyembed.js"></script>
</head>
<body>
<div class="3defy" resizable="false" style="width:480px;height:360px;" model="MODEL_ID_1"></div>
<div class="3defy" resizable="false" style="width:480px;height:360px;display:none;" model="MODEL_ID_2"></div>
<div class="3defy" resizable="false" style="width:480px;height:360px;display:none;" model="MODEL_ID_3"></div>
</body>
Using a Single Viewer for Multiple 3D Models with Thumbnails:
Suppose you want to have multiple thumbnails which load their models into a single viewer. You can use the parameter targetActive="true" to indicate that a model should be loaded into the active viewer.The 3Defy viewer automatically filters duplicate models from its internal list. So the following code is an effective way of creating a single 480x360 viewer, and 3 integrated thumbnails:
<head>
<script type="text/javascript" src="http://apps.3defy.com/js/3defyembed.js"></script>
</head>
<body>
<div class="3defy" resizable="false" style="width:480px;height:360px;" model="MODEL_ID_1"></div>
<div class="3defy" resizable="false" targetActive="true" style="width:100px;height:75px;" model="MODEL_ID_1"></div>
<div class="3defy" resizable="false" targetActive="true" style="width:100px;height:75px;" model="MODEL_ID_2"></div>
<div class="3defy" resizable="false" targetActive="true" style="width:100px;height:75px;" model="MODEL_ID_3"></div>
</body>
Using JavaScript to Create a Custom Integration:
Once you have embedded a 3Defy Viewer on a web page, you can use JavaScript to load a model into it dynamically:
document.getElementById('3defy_viewer').gotoModel('MODEL_ID')
The Model ID can correspond to any valid model, regardless of whether or not it is already present in the current page.
Support:
If you experience any issues using the Embedding API, please report them in our Forums.
Share 3Defy: