Loading...

Thank you for getting in touch!

We appreciate you contacting us. Our team will get back in touch with you soon!

Have a great day!

INTRODUCTION

This documentation will help you insert Unlimited3D solution to your website in minutes. Read through the resources to make implementing the code as seamless as possible. In this tutorial we will show you how to use Unlimited3D library by building simple ring configurator.

You can provide feedback or ask questions here: Link

INITIALIZATION

After configuring your model in our configuration, the next step is to embed it into your project.

For this tutorial we will use plain static html page.

After publishing the 3d solution, information for embedding it into the project can be found in the left menu of publish submenu in solution configurator.

In this tutorial we looked at some of the more important options that can be passed in configuration. For full list check out API documentation Link

For more info check out our api documentation for init function Link

Iframe

Iframe is useful when your configurator is simple and does not require any customization. API is not available when using iframe, so there is no way to add any interaction other than what was setup in configurator.

To start using iframe, copy the code from the embedded section in the publish menu and add it to your project.

Example of iframe code:

                                                
<iframe style="display:block;margin:0;width:100%;height:100%;border:none;overflow:hidden" src="https://dist.unlimited3d.com/dists/upload-test/asdadas/725/1823"></iframe>
                                                
                                            

You can find the full example here

API

API offers a more powerful and flexible way to incorporate 3d configuration. While API gives you the ability to create a more complex and rich experience, it also requires more coding and setup than the iframe option.

That said, API offers a lot of options to customize the 3d configuration.

To start using API, first include Unlimited3D library in your project.

                                                
<script src="https://distcdn.unlimited3d.com/pres/v/1.0.57/unlimited3d.min.js"></script>
                                                
                                            
!

Note: Make sure that the version inside script tag matches the version that you can see on the publish page in the configurator. (using older/newer version shouldn’t cause any problems, but you should keep them in sync to avoid any unexpected issues).

Next you need to create a container for the 3d scene.

                                                
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8" />
    <title>Initialization Example</title>
    <style>
        #container3d {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>

<body>
    <div id='container3d'>
    </div>
    <script src="https://distcdn.unlimited3d.com/pres/v/1.0.58/unlimited3d.min.js"></script>
</body>

</html>
                                                
                                            

We will use a div with “container3d” id. It is important to specify id for our container as it will be passed to the Unlimited3D library which will use it to show the 3d scene.

!

Note: Make sure to add height and width to your container.

With html in place we can now initialize 3d scene. Copy code from Code API section on the publish page.

                                                
var options = {
    distID:  '1823',
    solution3DName: 'asdadas',
    projectName: 'upload-test',
    solution3DID:  '725',
    containerID: 'container3d',
  };
  Unlimited3D.init(options);
                                                
                                            

This snippet contains parameters that are required for the Unlimited3D library to initialize the 3d scene.

Init function allows you to specify other parameters that will customize how 3d scene is loaded.

!

Note: Make sure to change containerID to the id of the html element you have created.

For now you can find a complete example of this simple initialization here.

Loading

Depending on the complexity of 3d scene, it may take some time for it to load. In these cases you may wish to display the loading screen to users.

To get loading progress add onLoadingChanged function to options object. onLoadingChanged is a callback function that accepts one argument.

Example:

                                                
onLoadingChanged: function(loading) {}
                                                
                                            

To get percentage of the loading progress, read progress field of loading argument (loading.progress).

For an example of how you can use loading go here

Users Interaction With 3D Scene

Advantage of 3d scenes is that users can interact with them. If you want to know when these interactions happen, there are three callbacks that can be set inside options for handling interactions.

onPointerClick

This callback is called every time the user clicks somewhere in the 3d scene. It will return an array of clicked objects or empty array if the user clicked on an empty part of the scene.

Knowing users' last clicked object is useful when you want to let users choose what part of 3d scene they are configuring. It is also useful if you want to do some action when a user clicks on a specific part, like moving the camera to predefined position after annotation was clicked (see camera, annotations).

The 3d object that was clicked will be the first element of the array.

                                                    
onPointerClick: function(clickedObjects) {}
                                                    
                                                

onPointerMove

This callback is called when a user hovers over 3d scene. It will return an array of hovered objects or empty array if the user hovers over an empty part of the scene.

Hovered 3d object will be the first element of the array.

                                                    
onPointerMove(hoveredObjects) {}
                                                    
                                                

onCameraInteraction

Users can use a mouse or touch to interact with the camera, allowing them to see 3d scene from different angles. You can use onCameraInteraction to be notified when the user is interacting with a camera.

onCameraInteraction accepts a single argument which is how long interaction lasted in milliseconds.

                                                    
onCameraInteraction(time) {}
                                                    
                                                

Changing parts

By specifying the parts field in the configuration object you can control which parts are shown in the scene. You can also change materials that are attached to the parts.

Example

                                                
var configuration = {
        parts: {
          show: ['PartName'],
          hide: ['PartName'],
          materials: {
             'MaterialName': ['PartName'],
          },
        },
      };
                                                
                                            

Annotations

Annotations can also be changed using the annotations field of the configuration object.

Example

                                                
var configuration = {
        annotations: {
          show: ['AnnotationName'],
          hide: ['AnnotationName'],
          materials: {
            'MaterialName': ['AnnotationName'],
          },
        },
      };
                                                
                                            

Materials

Besides being able to change materials of parts and annotations, configuration can be used to change materials options and to replace one material with another. To change the option of material (for example color) add materials field to configuration object.

To replace materials add switchMaterials. Material specified as key will be replaced with material specified as value.

Example

                                                
var configuration = {
        materials: {
          'MaterialName': {
             color: '#ffffff',
          },
        },
        switchMaterials: {
          'MaterialToHide': 'MaterialToShow',
        },
      };
                                                
                                            

MATERIALS

Manipulating materials will be one of the most used functionalities. In the following section, you’ll find information on how to use our API and snippets of code.

Change material

is will be one of the most used functions. You should use this function when you need to change the material of a part or parts.

Example of the API call:

                                                
Unlimited3D.changeMaterial({ 
        parts: [‘PartName1’, ‘PartName2’],
        material: ’MaterialName’,
});
                                                
                                            

Change materials

If you want to apply more than one material on different parts, you can either call this function multiple times with different parameters or call the changeMaterials function:

Example of the API call:

                                                
Unlimited3D.changeMaterials({ 
        partObjects: [
                { 
                        parts: [‘PartName1’, ‘PartName2’],
                        material: ’MaterialName1’,
                }
                { 
                        parts: [‘PartName3’, ‘PartName4’],
                        material: ’MaterialName2’,
                }
        ]
});
                                                
                                            

Change material color

Change material color is a function that changes the color of the specified material.

For example, you can allow your users to change the color of your product by giving them either predefined set of options-colors or for example a color picker.

Example of the API call:

                                                
Unlimited3D.changeMaterialColor({ 
        material: ‘MaterialName1’,
        color: ‘#ff0000’,
});
                                                
                                            

PARTS

Sometimes you’ll want to show the user some hidden parts and you can easily do that with hideParts and showParts functions.

Hide parts and show parts

are used to display and remove parts of your model from the scene. If you need to swap some parts you can easily use these functions to make that happen.

We are chaining the showParts function as a callback on the hideParts function and it will be executed after the hideParts function is done.

Example of the API call:

                                                
Unlimited3D.hideParts({ 
        parts: [‘PartName1, PartName2’],
}, function() {
	Unlimited3D.showParts({
                partObjects:[
                        {
                                parts: [‘PartName3’, ’PartName4’],
                        }
                ]
        })
});
                                                
                                            

ANNOTATIONS

Annotations are pretty useful parts of the scene, because they follow your model wherever you position your camera and you can set functions/actions to execute as a callback.

Show and hide annotations

can be used separately or chained.

For example if you need to hide an annotation, you’ll just use hideAnnotations function, but if you want to hide some annotations and show other ones, you’ll pass the other as a callback of the first function.

Example of the API call:

                                                
Unlimited3D.hideAnnotations({ 
        annotations: [‘Anno1’, ‘Anno2’’],
}, function() {
	Unlimited3D.showAnnotations({
                annotationObjects:[
                        {
                                annotations: [‘Anno3’],
                        }
                ]
        })
});
                                                
                                            

Change annotation material

Changing the annotation material can be useful to show state change of the annotation. You can call the changeAnnotationMaterial function when user clicks on the annotation and we’ll use the onPointerclick function that we passed in the options when initializing the project.

Example usage of the API call:

                                                
onPointerClick: function(objectsClick) {
	if(objectsClick.length > 0) {
                if(objectsClick[0].type == ’annotation’){
                        Unlimited3D.changeAnnotationMaterial({ 
                                annotations: [‘Anno1’],
                                material: ‘AnnoMat1’,
                        });
                }
        }
}
                                                
                                            

CAMERA

Camera APIs will help show your product in the best light by activating different cameras or smoothly transitioning to a new position. Here are some of the most used API calls:

Activate camera

If you have a need to change the camera to show the user the product from a different perspective, different FOV or to limit the viewing angles.

Example of the API call:

                                                
Unlimited3D.activateCamera({ 
        name: ’Camera2’,
});
                                                
                                            

Activate transition

Smooth camera transitions can be activated with a simple function activateTransition. Most often you will use it when the user clicks on an annotation or for example user wants to change a part.

Example of the API call:

                                                
Unlimited3D.activateTransition({ 
        transition: ‘Transition1’,
});
                                                
                                            

Get snapshot

Screenshot can always be taken with the getSnapshot call. Width and height parameters can be passed if you need a specific size of the image. After you receive a response, you can save it on your backend, insert it into a pdf, etc...

Example of the API call:

                                                
Unlimited3D.getSnapshot({ 
        width: 1280,
        height: 720,
}, function(err, result) {
	// image will be located in result.data
});
                                                
                                            

Enable auto rotate

Auto rotate can always be set from our configurator, but if you need to activate (or stop) it from the code, you can always do that with the enableAutoRotate API.

Example of the API call to start the rotation:

                                                
Unlimited3D.enableAutoRotate({ 
        enable: true,
});
                                                
                                            

Or to stop it:

                                                
Unlimited3D.enableAutoRotate({ 
        enable: false,
});
                                                
                                            
We use cookies in order to offer you the most relevant experiences. Please accept cookies for optimal performance. For more information, read our Privacy Policy.