BuildIn3D Documentation

BuildIn3D Documentation

1 Creating a 3D model and instruction

To create a new 3D model and instruction

Visit "Dashboard"
Select "Instructions->New"
Upload a file from a supported type

After uploading, BuildIn3D will start converting you 3D file into a BuildIn3D model and building instruction that could be delivered over the Internet. It could take some time, generally up to 10 minutes, but when complex instructions are uploaded and a lot of pictures for the parts list should be rendered it might take more time.

2 Cover video and Cover picture

When a 3D model or building instruction is visualized, BuildIn3D shows the 3D model directly to the user by default. When there are 3D animations they are played by default. When there are no animations we might play a default animation. Users could select the "Instructions" button and will see the instruction in a step-by-step view.

In some cases when the 3D model does not look "realistic enough" or the 3D animation can not be played we allow authors to upload a rendered video or picture of the instruction. This picture or video will be the first thing the users see when they visit the instructions.

    IMPORTANT:

    We do NOT recommend the use of Cover pictures and Cover videos, but only the use of Thumbnail Pictures and Thumbnail videos. Cover pictures and videos are only for the cases where it would be too expensive to develop a good looking 3D model and animation.

    IMPORTANT: 

    Cover Videos and Cover Pictures would also incur additional charges for the sites visualizing the instruction as these are additional assets that should be delivered to the end user browser.

When an instruction is visualized we look for videos and pictures in order and we visualize the first video or picture that is provided by the author.

Full access – when the user has full access to the instruction the order is:

1. Cover video
2. Cover picture
3. 3D model

Preview access – when the user has only preview access to the instruction the order is:

1. Cover video
2. Thumbnail video
3. Cover picture
4. Thumbnail picture
5. 3D model

Below you can find details and examples along with information about how to configure Cover pictures and Cover videos.

2.1 As a 3D model

The following example shows how 3D model and building instructions are visualized by default. There are no pictures or videos. This is the preffered default behaviour.

Example: Visualized as 3D model

2.2 As an Instruction

When the 3D model and building instruction is visualized, the users see the model assembled. When the model supports it, BuildIn3D can visualize a step-by-step instruction. To see the step-by-step building instruction the users should select the "Instruction" button.

Example: Visualized as 3D model. Users should select 'Instruction' to see a step-by-step view

2.3 Thumbnail picture

When a BuildIn3D model and building instruction is shown on the index page and along with other instructions we show a picture of the model. By default we show the "Thumbnail" picture of the instruction.

    IMPORTANT:

    When an instruction does not have a Thumbnail or a Cover picture it will not appear on the index page. Make sure your instructions have at least a Thumbnail picture.

To set a Thumbnail picture:

Visit Dashboard->Instructions
Select the instruction you would like to edit
Select "Pictures" from the instruction sidebar
Select "Add" to add a new picture to the instruction or Select "Actions->Edit" to edit an existing picture
Select "Thumbnail" from the dropdown.
Select "Update"

This picture would appear for this instruction on pages that show an index for BuildIn3D models and instructions.

Example: The instruction index page of BuildIn3D shows the thumbnails

2.4 Thumbnail video

Thumbnail videos are used for showing a video when the users have only preview access to the instruction. When they have full access the Thumbnail video will not be shown.

To set a Thumbnail video:

Visit Dashboard->Instructions
Select the instruction you would like to edit
Select "Videos" from the instruction sidebar
Select "Add" to add a new video to the instruction or Select "Actions->Edit" to edit an existing video
Select "Thumbnail" from the dropdown.
Select "Update"

The instructions below has a Thumbnail video. You should see the video if you have no access to instruction (because you have no registration or subscription to FLLCasts).

Example: Instruction with Thumbnail Video at FLLCasts

2.5 Cover picture

As an author you can decide that you would like to show a cover picture instead of the 3D model when the instruction is initially visualized. In this way you have enough artistic freedom to upload any picture.

Visit Dashboard->Instructions
Select the instruction you would like to edit
Select "Picture" from the instruction sidebar
Select "Add" to add a new picture to the instruction or Select "Actions->Edit" to edit an existing picture
Select "Cover" from the dropdown.
Select "Update"

In this way every time a user visits the instruction a picture covering the model and the instruction will be initially shown.

The following example shows how this works. The instruction is visualized and the users see the Cover picture instead of the 3D model. When they select "Start Building" they see the step-by-step instructions. When they select "Model" they will again see the Cover picture.

When a Cover picture is selected it also acts as a Thumbnail.

On BuildIn3D

You should SEE a Cover picture

Example: Instructions on BuildIn3D with Cover picture
Embedded

You should SEE a Cover picture

Example: Embedded instructions with a Cover picture

2.6 Cover video

When a BuildIn3D model and building instruction is visualized to users all the animations in the 3D model are played. Sometimes it is difficult to develop animations that can be played in the browser as 3D animations. BuildIn3D provides authors with the artistic freedom to provide a rendered video for the 3D model and building instruction.

The "Cover video" will be played when the 3D model and building instructions is visualized.

To select a Cover video visit:

Visit Dashboard->Instructions
Select the instruction you would like to edit
Select "Videos" from the instruction sidebar
Select "Add" to add a new video to the instruction or Select "Actions->Edit" to edit an existing video
Select "Cover" from the dropdown.
Select "Update"

In this way every time a user visits the instruction the Cover video will be played.

The following example shows how this works. The instruction is visualized and the users see the Cover video instead of the 3D model. When they select "Start Building" they see the step-by-step instructions. When they select "Model" they will again see the Cover video.

When there is both a Cover picture and Cover video then the Cover video takes precedence and will be visualized.

On BuildIn3D

You should SEE a Cover video

Example: Instruction on BuildIn3D with a cover video
Embedded

You should SEE a Cover video Example: Embedded Instructions with a cover video

2.7 Preview 3D model and building instruction

BuildIn3D can show the full 3D model and building instruction only to users registered or subscribed to your platform. Users without access will see only a "Preview" of the model and building instruction.

When a preview is shown only the first 11 steps from the instruction are shown by default. (11 is a prime number, we are nerds, and we've found it is just enough for users to see how the instruction looks like).

Here is an example of a preview for a 3D model and building instruction visualized only to subscribed users at FLLCasts. (If you are logged in at FLLCasts and have a subscription please log out to see the preview of the instruction)

On FLLCasts

You should SEE a Preview of the instruction.

Example: Preview of a Box Robot from FLLCasts
Embedded

You should SEE a Preview of the instruction.

Example: Embedded Preview of a Box Robot from FLLCasts as shown on another site

2.8 'Thumbnail' and 'Cover' pictures and videos for a preview model

When a preview is shown by BuildIn3D, the full geometry of the 3D model uploaded by the author is not delivered. Only part of the geometry reaches the user browser. Because of this we always try show a video or a picture when we show a preview of the BuildIn3D instruction.

The order is specified in the beginning of this chapter.

Here are few examples of how a preview of an instrution will be shown when there are different settings for Cover/Thumbnail video and pictures.

Cover video and visualized on FLLCasts – has Cover video so we choose to show cover video

1.1 You should SEE the Cover video when you are LOGGED OUT from FLLCasts

Example of a Preview with Cover Video on FLLCasts

1.2 You should SEE the Cover video when you are LOGGED IN at FLLCasts

Example of a Preview with Cover Video on FLLCasts
Cover video and embedded from FLLCasts

2.1 You should SEE the Cover video when you are LOGGED OUT from FLLCasts

Embedded Example of a Preview with Cover Video

2.2 You should SEE the Cover video when you are LOGGED IN at FLLCasts

Embedded Example of a Preview with Cover Video
Thumbnail video and visualized on FLLCasts

3.1 You should SEE the Thumbnail video when you are LOGGED OUT from FLLCasts

Instruction with Thumbnail video at FLLCasts

3.2 You should NOT SEE the Thumbnail video when you are LOGGED IN at FLLCasts

Instruction with Thumbnail video at FLLCasts
Thumbnail video and embedded from FLLCasts

4.1 You should SEE the Thumbnail video when you are LOGGED OUT from FLLCasts

Embedded instruction with Thumbnail video from FLLCasts

4.2 You should NOT SEE the Thumbnail video when you are LOGGED IN at FLLCasts

Embedded instruction with Thumbnail video from FLLCasts
Cover picture and visualized on FLLCasts – does not have Cover video, but has Cover picture so we choose to show Cover picture

5.1 You should SEE the Cover picture when you are LOGGED OUT from FLLCasts

Example of a Preview with a Cover picture

5.2 You should SEE the Cover picture when you are LOGGED IN at FLLCasts

Example of a Preview with a Cover picture
Cover picture and embedded from FLLCasts

6.1 You should SEE the Cover picture when you are logged OUT from FLLCasts

Embedded Example of a Preview with a Cover picture

6.2 You should SEE the Cover picture when you are logged IN at FLLCasts

Embedded Example of a Preview with a Cover picture
Thumbnail picture and visualized on FLLCasts as Preview – has no cover video, thumbnail video or cover picture and you are in preview. Open the browser in private mode to make sure you are not logged in at FLLCasts

7.1 You should SEE the Thumbnail picture when you are LOGGED OUT from FLLCasts

Еxample of a Preview with a Thumbnail Picture

7.2 You should SEE the Thumbnail picture when you are LOGGED IN at FLLCasts

Еxample of a Preview with a Thumbnail Picture
Thumbnail picture and embedded from FLLCasts as Preview

8.1 You should SEE the Thumbnail picture when you are LOGGED OUT from FLLCasts

Embedded Еxample of a Preview with a Thumbnail Picture

8.2 You should SEE the Thumbnail picture when you are LOGGED IN at FLLCasts

Embedded Еxample of a Preview with a Thumbnail Picture
Thumbnail picture and visualized on FLLCasts (full access) Log in at FLLCasts and make sure you have an active subscription.

9.1 You should SEE the Thumbnail picture when you are LOGGED OUT from FLLCasts

Еxample of an instruction with just Thumbnail picture

9.2 You should NOT SEE the Thumbnail picture when you HAVE ACCESS at FLLCasts

Еxample of an instruction with just Thumbnail picture
Thumbnail picture and embedded from FLLCasts (full access)

10.1 You should SEE the Thumbnail picture when you are LOGGED OUT from FLLCasts

Embedded example of an instructions with just Thumbnail Picture

10.2 You should NOT SEE the Thumbnail picture when you are LOGGED IN at FLLCasts

Embedded example of an instructions with just Thumbnail Picture
No Cover or Thumbnail and visualized on FLLCasts – the instruction has no Cover or Thumbnail picture or videos. We can not show anything for a cover about this instruction so we just show it as it is.

11.1 You should NOT SEE a picture or video, when you are LOGGED OUT – just part of the 3D model for the instruction

Еxample of a Preview without picture or video

11.2 You should NOT SEE picture or video, when you are LOGGED IN – just part of the 3D model for the instruction

Еxample of a Preview without picture or video
No cover or thumbnail and embedded from FLLCasts

12.1 You should NOT SEE a picture or video, when you are LOGGED OUT – just part of the 3D model for the instruction.

Embedded example of a Preview without picture or video

12.2 You should NOT SEE a picture or video, when you are LOGGED IN – just part of the 3D model for the instruction.

Embedded example of a Preview without picture or video

3 Editing a 3D model and instruction with IS Editor

IS Editor stands for "Instructions Steps Editor". It allows you to edit a lot of details about the 3D models and instructions like the order of steps, background, camera rotations for each step and many more.

To access the IS Editor

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"

3.1 Configure the background color for an instruction

As an author you can change the background of the scene using the Instructions Steps (IS) editor. To do this:

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select the button for changing background.

Choose the background color and select "Save".

A demo could be seen at: https://youtu.be/2n6pRSKnIIQ

3.2 Configure the primary color for an instruction

The primary color is the color applied to navigation buttons, parts list, step info and other information that is part of the way instructions are visualized. To change the primary color:

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select the button for changing primary color.

Choose the primary color and select "Save".

A demo could be found at: https://youtu.be/2n6pRSKnIIQ

3.3 Configure the camera rotation for a step

IS Editor allows you to edit the angle from which users see a specific step. In this way you can make it more clear how they should follow the step. To configure the rotation. We support two types of rotations – LDR style and freestyle

3.3.1 Rotation

The 'rotation' is specified with three digits like "23 45 0". This means the rotation by the x axis is 23 degrees, the rotation by the y axis is 45 degrees and the rotation by the z axis is 0 degrees. Values should be separated by a space. Float numbers like "23.5 45.1 0.1" are also supported.

To set the 'Rotation'

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select "Instruction" to enter instruction mode
In the Tree Viewer select the step you would like to edit
In the Properties view change the value for

rotation

By using LDR rotation you can not change the position of the camera. The camera is always position on a sphere around the bounding box of the model. The sphere is large enough to see the whole model.

To change how close the camera is you must use the camera position option.

3.3.2 Camera Position

The 'camera position' property is a more fine grainded and allows more freedom when setting the position of the camera on the step compared to the Rotation property. It allows you specific the exact position of the camera with the mouse.

To set the camera position

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select "Instruction" to enter instruction mode
Rotation and more the camera with the mouse. Select "Set as camera position" button. The current position of the camera will be saved.

3.3.3 Default camera position for a step

When visualizing a ste the camera position for a step is determined in the following way.

Check if there is 'camera position' and apply it.
Check if there is 'rotation' and apply it
Find the position/rotation applied from previous steps and apply it to the current step

By default when entering a module the rotation is set as "23 45 0". In

3.3.4 Clear 'camera position' and 'rotation'

You can clear the "camera position" and "rotation" for a step. In this way the step will take the "rotation" and "camera position" from the previous steps.

To clear the 'camera position' and 'rotation'

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select "Instruction" to enter instruction mode
In the Tree Viewer select the step you would like to edit
In the Scene Editor select "Clear position"

3.3.5 Set default rotation

You can set default rotation for a step. The default rotation is "23 45 0". The difference between "Default" and no rotation is that the default rotation is "23 45 0" while when no 'rotation' or 'camera position' is set we would visualize the step from the same angled as the previous step. And the previous step my not be in a 'default' rotation

To set default rotation

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select "Instruction" to enter instruction mode
In the Tree Viewer select the step you would like to edit
In the Scene Editor select "Set default rotation"

3.4 Configure "Step info" for a step – explanation in textual form about the step.

You can add custom explanation of what should happen on each step. This explanation is in a text form and it will be displayed appropriately on the scene when the instruction is followed by the user.

To configure the step info

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select "Instruction" to enter instruction mode
In the Tree Viewer select the step you would like to edit
In the Properties view edit "step info" property

3.5 Configure "Step confirmation"

As an author you could ask users to confirm certain steps. There are different forms of confirmation

3.5.1 Required step confirmation

With "Required" step confirmation the user following the instruction is "Required" to explicitly confirm that they've completed the step. Users are not allowed to continue forward with the instruction until they confirm the step was completed.

If the user does not confirm the step, they stay on the same step until they confirm they've completed it.

An instruction can have more than one step for which step confirmation is required.

To configure a step as required:

Visit "Dashboard"
Select the instruction you would like to edit
Select "IS Editor"
Select "Instruction" to enter instruction mode
In the Tree Viewer select the step you would like to edit
In the Properties view edit "confirmation" property and set the value "required"

4. Collaborating on an Instruction

Author could add other authors to work on the same instruction. To add an author

Visit Dashboard->Instructions
Select the instruction you would like to edit
Select "Authors"
Search for an author you would like to add to the instruction. 4.1 When the user has registration with buildin3d.com then you should be able to find them by username, email, or full name. 4.2 When the user has no registration with buildin3d.com then you can invite them by selecting "Create/Invite a new account" and following the steps on the screen.

5. Embedding an instruction

BuildIn3D allows the animated and interactive 3D models and building instructions to be embedded on your website.

The whole process takes less than 1 minute.

To embed an instruction:

Visit all the instructions
Select the one that you would like to show on your website – for example the Koala
On the right there is a blue button called "Embed". Select the button and follow the instructions on the screen. You would have to create an account, confirm the account and enter the site you would like to show the instructions on.
At the final step you will be given a code fragment that you should copy/paste on your website.

5.1 What is embedding?

When you embed media on your website from a third party website you allow the third party website to show information to users visiting your website. Examples include

embedding a YouTube video where you allow YouTube to show content from their servers on your website.
other popular examples include LinkedIn, Twitter, Facebook, Vimeo, Google Forms, SlideShare, Github, Flickr and many others. The list is endless.

BuildIn3D also allows you to embed and visualize 3D models and building instructions on your website.

5.2 What are the benefits of embedding?

The process of "embedding" is well established and popular since the early days of the Internet. It allows websites to integrate and provide a better experience to the user without sending the user to a different website.

Imagine the following example:

A user comes to your e-commerce or brand website and you would like to show a video of the product you are selling. You've add a link for the user to click and go to youtube.com (like this link to YouTube).
As the user opens the see the video you are sending the user to YouTube.com and they stay there. You lose them as they are no longer on your website and they continue watching interesting videos with cats for the next few hours and completely forgot to buy the product from your e-commerce website.

Embedding addresses this problem. You "embed" a video from YouTube directly on your website. The user watches the video on your website and then buys the product on your website. The user is not leaving your website for a moment. This allows you to provide a rich user experience without building your own YouTube/BuildIn3D and without delivering videos/3D instructions on your own.

BuildIn3D provides the same benefit for website owners. Users could experience the animated and interactive 3D building instructions directly on your website. They do not leave your website and they do not visit platform.buildin3d.com. They interact with the models and building instructions directly on your website.

5.3 Is "embedding" secure?

NOTE: You should never embed anything on your website from a third party that you've not established enough trust.

That being said embedding is secure.

When a content is embedded on your website you allow a third party, like YouTube, or Twitter, or BuildIn3D to show content on your website. You ask the third party platform to provide you the service and to show the media to the users. But the video might no longer exists and YouTube might return just a blank screen. Or the LinkedIn post migth be edited since the last time you checked and it might say something different.

5.4 Different ways of embedding. IFrame, JS Embed code, API calls.

There are different ways of embedding content on the Internet from a third party platform like BuildIn3D or YouTube. The process of embedding is constantly evolving. Browsers are adding support for new ways while limiting support for other ways.

The three most common ways are:

using a special tag called iframe
including a script in your webpage
Oembed format.

The first option is know as "IFrame embed". The second option is referred to as "JS Embed code". Many platforms support both IFrame embed and JS Embed code with some tendency to switch to JS Embed code.

Here are a few examples of how embed code looks like and what it does:

BuildIn3D JS Embed code with "a" href

<a 
    class="buildin3d-instructions" 
    href="https://platform.buildin3d.com/instructions/444-fabbrix-wwf-penguin-in-3d-building-instructions" 
    width="100%" 
    height="590">
    FabBRIX WWF, Penguin in 3D building instructions
</a>
<script async src="https://platform.buildin3d.com/embed_widget.js"></script>

BuildIn3D IFrame Embed code

<iframe 
    src="https://platform.buildin3d.com/embed/instructions/311-fabbrix-birds-parrot-in-3d-building-instructions" scrolling="no" 
    width="710" 
    height="590" 
    allow="fullscreen" 
    style="border: 0px;" 
    title="FabBRIX Birds, Parrot in 3D building instructions">
</iframe>

Twitter JS Embed code with "a" href

<a 
    href="https://twitter.com/buidin3d?ref_src=twsrc%5Etfw" 
    class="twitter-follow-button" 
    data-show-count="false">
    Follow @buidin3d</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitter JS Embed code with "blockquote" with a paragraph

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I don&#39;t know how many moves the <a href="https://twitter.com/hashtag/QueensGambit?src=hash&amp;ref_src=twsrc%5Etfw">#QueensGambit</a> takes, but this FabBrix queen is assembled in 8 steps as a <a href="https://twitter.com/hashtag/3D?src=hash&amp;ref_src=twsrc%5Etfw">#3D</a> building instruction.<a href="https://t.co/gxOiYSHfTB">https://t.co/gxOiYSHfTB</a> <a href="https://t.co/lWBIWjsdVg">pic.twitter.com/lWBIWjsdVg</a></p>&mdash; BuildIn3D (@buildin3d) <a href="https://twitter.com/buildin3d/status/1356256997423915009?ref_src=twsrc%5Etfw">February 1, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

LinkedIn IFrame embed

<iframe 
    src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:6787238060745637889" 
    height="576" 
    width="504" 
    frameborder="0" 
    allowfullscreen="" 
    title="Embedded post">
</iframe>

YouTube IFrame embed

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/2n6pRSKnIIQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

YouTube JS Embed code

Source from: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

Flowplayer JS Embed code

<div
  data-player-id="cad9d975-ccae-4757-88a3-a65ebb7419f8">
  <script src="//cdn.flowplayer.com/players/ed1cc6dd-bf33-4ec1-94e0-669c3180ce75/7/flowplayer.async.js">
    { "src": "3afc64ea-fe85-456c-b9d7-6d1de8350ff2" }
  </script>
</div>

5.5 BuildIn3D JS Embed code

The recommended way to embed a 3D model and building instruction is by using JS Embed Code.

NOTE: This is the easiest and most straightforward way as it gives us all the needed tools to support all the different browsers and all the different features of BuildIn3D without any technical intervention from your side.

The embed code looks like:

<a class="buildin3d-instructions" 
    href="https://platform.buildin3d.com/instructions/444-fabbrix-wwf-penguin-in-3d-building-instructions" 
    width="100%" 
    height="590">
    FabBRIX WWF, Penguin in 3D building instructions</a>
<script async src="https://platform.buildin3d.com/embed_widget.js"></script>

The embed code includes:

"href" – the link to the instruction
"width" – how wide the instruction view should be in pixels – "100%"
"height" – how high the instruction view should be in pixels – "590"
name – the name of the instruction – "FabBRIX WWF, Penguin in 3D building instructions"
"script async" – a script that should be called to place the instruction on your website

Pros

Support for all the features of BuildIn3D on all browsers and devices now and in the future.
The code embed_widget.js is generating a secure iframe tag without the need for implementing logic on your server. The code of embed_widget.js code is open. You can check it at https://platform.buildin3d.com/embed_widget.js. We notify all BuildIn3D users when there is a change in the embed_widget.js.
Suitable to get everything working in the fastest way possible

Cons

Certain platforms might not support this form of embedding because of technical or security requirements.

5.6 BuildIn3D IFrame embed

Browsers limitations

3D building instructions and models from BuildIn3D could be embedded on your website with the use of an <iframe> HTML tag. Generally there should not be a difference between using JS Embed code and IFrame embed code. But because of limitations in different browsers in the past, in the present and probably in the future it might not be possible for us to support some specific features of BuildIn3D when an IFrame embed code is used, like for example allowing your users to take a picture and upload it when they've finished with the instruction. We currently recommend using JS Embed code whenever possible.

The embed code looks like:

<iframe 
    src="https://platform.buildin3d.com/embed/instructions/311-fabbrix-birds-parrot-in-3d-building-instructions" scrolling="no" 
    width="710" 
    height="590" 
    allow="fullscreen" 
    style="border: 0px;" 
    title="FabBRIX Birds, Parrot in 3D building instructions">
</iframe>

The embed code includes:

"src" – the source url containing
"width" – how wide the instruction view should be in pixels – "710"
"height" – how high the instruction view should be in pixels – "590"
"scrolling" – should there be a scroll in the iframe
"allow" – a number of capabilities this iframe is allowed

Pros

IFrame Embed could be your only option if your website does not support JS Embed code.

Cons

All the standard features of BuildIn3D will be supported, but certain specific extensions might not work on specific devices with specific browsers in specific cases. Example is the Paywall extension.