Getting Started

Usage

Api Integration

Materials

Parts

Annotations

Camera

Overlay

3D Text

Actions

Animations

Viewport

AR

Go to Dark mode
Go to Light mode

Developer Documentation - V1.0.0

Getting Started

Introduction

Welcome to the Unlimited3D Developer Documentation—a comprehensive guide designed to assist you in seamlessly integrating the Unlimited3D solution into your website or application. This resource has been meticulously crafted to streamline the implementation process, making it as simple and efficient as possible for you to incorporate our code and leverage its expansive capabilities.

In this documentation, you'll find detailed instructions on how to utilize the Unlimited3D library. Whether you're working with a preconfigured model or looking to explore some of our unique and powerful functionalities, you'll find the guidance you need right here.

Our mission is to enable you to create rich, immersive 3D experiences with ease, and we're here to support you every step of the way. Should you encounter any challenges or require further assistance, please don't hesitate to reach out to our dedicated support team via the following LINK.

Usage

Intro

After successfully configuring your 3D model using our 3D Configurator and publishing it, you're ready to take the next exciting step: showcasing your model on your desired webpage, online store, or any other platform of your choice.

On the Unlimited3D Publish page, you will find information regarding multiple approaches through which you can deploy your model. These user-friendly options are conveniently presented on the left-hand side of the page, allowing you to choose the one that best fits your needs:

  1. API: By incorporating the provided API Library into your website, you will unlock the most flexibility and control over both the model's behavior and the overall solution. This method is ideal for those who require customization and want to explore the full potential of Unlimited3D.
  2. Iframe: Opting for the iframe method allows you to directly embed the model into your webpage. This approach offers a simple and efficient integration process, suitable for quick implementations without sacrificing visual quality.
  3. Direct Link: If you're looking for the most straightforward way to share your 3D content, simply copy a direct link to your published solution. This option grants users immediate access to your model without the need for complex integration, making it perfect for sharing on social media or in direct communications.

Each of these deployment options is designed to ensure a seamless transition from the configuration phase to live presentation, enabling you to provide an engaging and interactive 3D experience to your audience with ease.


Api

Incorporating the provided API Library into your website will unlock the full potential of Unlimited3D, offering you the most flexibility and extensive options to control both the model's behavior and the entire solution.

Choosing the API method allows you to go beyond the standard, creating a more intricate and rich 3D experience tailored to your specific needs. This approach is ideal for those seeking to push the boundaries of what's possible with 3D configuration, offering a wealth of customization options that enable you to create a truly unique user experience.

However, it's worth noting that while the API offers unparalleled power and flexibility, it also requires a more detailed coding and setup process compared to the Iframe option. As such, it's best suited for developers or teams with the technical expertise to harness its full capabilities.


Iframe

Adding an Iframe element to directly embed the model into your webpage offers a simple and efficient integration process, making it an appealing option for quick and easy implementations.

The Iframe method is ideally suited for scenarios where your configurator is simple and doesn't necessitate customization beyond what has already been set up in the 3D Configurator. It's important to note that when using Iframe from the publish page, the API is not available, which means there are no options for adding interactions other than those pre-configured in the 3D Configurator.

Here's how you can start using the Iframe:

  1. Navigate to the publish menu in the Unlimited3D platform.
  2. Locate the embedded section, where you'll find the necessary code.
  3. Copy the provided code.
  4. Add it to the relevant part of your project where you want the model to appear.

By utilizing the Iframe option, you can quickly integrate your 3D model without the need for complex coding, offering a seamless way to showcase your creations on your webpage.

Api Integration

Init

1. Include Unlimited3D Library

Begin by incorporating the Unlimited3D library into your project. Copy and paste the following script tag within the <head> section of your HTML:

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

Note: Ensure that the version within the script tag matches the version displayed on the publish page in the 3D Configurator. While using older or newer versions shouldn't cause issues, maintaining synchronization minimizes potential unexpected conflicts.

2. Create a Container for the 3D Scene

Create a container for the 3D scene by creating a <div> element with the "container3d" ID. This identifier is essential, as it will be utilized by the Unlimited3D library to display the 3D scene. Remember to provide height and width attributes to the container to define its dimensions. Here's an example:

<!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/2.5.0/unlimited3d.min.js"></script>
</body>
</html>

Note: The "container3d" ID is crucial for interaction between your HTML and the library.

3. Initialize the 3D Scene

To initiate the 3D scene, use the code provided in the API section on the publish page. This code configures the necessary parameters for the Unlimited3D library. Copy the code snippet below:

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

Note: Update the containerID to match the ID of the HTML element you've created earlier.

By following these steps, you'll successfully integrate the API and initiate your 3D scene with the customization options and parameters you've defined.

Basic Init

Here's an example of a basic init function call to showcase a 3D model:


In this example, the options object holds the essential parameters required for initializing the 3D scene. Replace the placeholders like distID, solution3DName, projectName, solution3DID, and containerID with the appropriate values specific to your use case.

Upon calling the Unlimited3D.init(options) function, the library establishes the necessary connections and resources to render the 3D model within the designated HTML container, creating a seamless and interactive visual experience.

Options

One of the primary advantages of incorporating 3D scenes into your project lies in the potential for user interaction. Integration with our API library enables users to engage with the content in meaningful ways. To effectively respond to and capture these interactions, the Unlimited3D solution offers callbacks that can be defined within the options. These callbacks provide a structured approach to handle and respond to user actions within the 3D environment.

Users Interaction With 3D Scene

onLoadingChanged

Integrating 3D scenes into web applications can lead to varying loading times, depending on the complexity and size of the models involved. The onLoadingChanged callback offers a valuable tool to monitor and manage this loading progress, thereby enhancing the user experience.

By including the onLoadingChanged function within your options object, you can actively track the loading status of the 3D scene. This callback enables real-time updates on the progress, providing opportunities to:

  • Display Loading Screens: By tying the loading progress to visual indicators or loading screens, you can keep users informed and engaged during load times.
  • Manage User Expectations: Transparency in loading progress helps set realistic expectations, ensuring a smooth and satisfying user experience.
  • Coordinate Transition Effects: You can align scene transitions or animations with loading completion, creating seamless and professional entry points to the 3D content.


onPointerClick

The onPointerClick callback serves as an essential interface for understanding and responding to user interactions within the 3D scene. As users navigate and engage with the 3D content, this callback offers means to detect and act upon their clicks on distinct elements.

Applications

  • Scene Configuration: Enabling users to select specific parts of the scene for configuration, such as changing properties, colors, or other attributes.
  • Action Triggers: Initiating predefined actions when users click on particular elements, like relocating the camera to a predetermined viewpoint or activating specific animations.
  • Interactive Guidance: Guiding users through interactive tours or instructional paths by responding to their selections within the scene.

Functionality

When the onPointerClick callback is invoked, the 3D object that the user clicked on is placed as the first element within the response array. This organized structure facilitates handling of user clicks, allowing developers to:

  • Identify Selected Objects: Quickly determine which parts of the 3D scene the user has interacted with.
  • Customize Responses: Tailor specific actions or feedback based on the user's interaction, enhancing personalization and engagement.
  • Integrate with Other Functions: Seamlessly coordinate with other functions or features, like activating cameras or changing object properties, based on user clicks.


onCameraInteraction

The onCameraInteraction callback is designed to detect and respond to user interactions with the camera within the 3D scene. As users explore the scene from various angles, utilizing mouse or touch controls, this callback provides real-time insights into their engagement with the camera.

Applications

  • User Engagement Analysis: Understanding the patterns and duration of camera interactions, allowing for data-driven improvements or adaptations to the 3D scene.
  • Event Triggers: Coordinating other functions or effects with camera interactions, such as highlighting objects in view or providing contextual tooltips.

Functionality

The onCameraInteraction callback is triggered upon any engagement with the camera, offering opportunities to:

  • Monitor User Behavior: Keeping track of how users are navigating the 3D scene, identifying areas of interest or confusion.
  • Enhance Interactivity: Integrating additional features or feedback that respond to the user's manipulation of the camera, encouraging exploration and discovery.


Materials

changeMaterials

The changeMaterials function is designed to apply different materials to specific parts of a 3D model. This targeted approach enables a precise and efficient way to change the visual appearance of various components within a scene without altering the inherent properties of the materials themselves.

Functionality

  • Targeted Application: Apply distinct materials to specific parts or sections of a 3D model with ease.
  • Streamlined Process: Simplify the task of changing materials across different components, saving time and effort.
  • Consistent Visuals: Maintain material integrity by swapping materials rather than modifying their properties.

Applications

  • Design Flexibility: Adapt the appearance of different parts of a model to suit various themes, contexts, or user preferences.
  • Interactive Customization: Enable user-driven changes to materials on specific parts, enhancing engagement and personalization.
  • Creative Exploration: Facilitate experimentation with different material combinations on various parts of the model without altering material attributes.


changeMaterialsColor

The changeMaterialColor function provides a simple and effective means to adjust the color of specific materials within a 3D model. This targeted color manipulation empowers developers and designers to create dynamic and customizable visual experiences.

Functionality

  • Color Customization: Easily change the color of particular materials to match desired themes, branding, or user choices.
  • Dynamic Adaptation: Integrate with user interfaces like color pickers to allow real-time color adjustments within the 3D scene.
  • Consistent Appearance: Maintain the other properties of materials while only altering the color, ensuring visual consistency and integrity.

Applications

  • Product Personalization: Customize the appearance of products by offering either predetermined color options or a dynamic color picker, aligning with individual user preferences.
  • Interactive Experience: Enhance user engagement by enabling on-the-fly color changes, providing a personalized and interactive 3D experience.
  • Thematic Alignment: Quickly adapt material colors to different contexts, themes, or promotional campaigns, keeping visuals fresh and relevant.


switchMaterials

The switchMaterials function provides a mechanism to perform replacement of materials across an entire 3D scene. By swapping specified materials with others, this function enables developers to execute sweeping changes to the visual appearance of the entire model with ease and efficiency.

Functionality

  • Global Replacement: Perform a uniform swap of materials across all parts and components of the 3D scene that use the specified materials.
  • Streamlined Process: Simplify the complex task of changing materials throughout an entire solution, without the need to target individual parts or components.
  • Consistent Changes: Ensure coherent and consistent visual alterations by applying the same material changes across the scene.

Applications

  • Thematic Adaptation: Quickly modify the entire scene's appearance to align with different themes, branding, or promotional events.
  • Dynamic Presentation: Facilitate real-time changes to materials, enhancing responsiveness to user interactions or contextual needs.


Parts

hideParts

The hideParts function empowers developers to conceal specific parts or components of a 3D model within the scene. By providing selective control over visibility, this function enhances the ability to create focused and uncluttered views, or to guide user attention to particular aspects of the model.

Applications

  • Focused Exploration: Hiding non-essential parts to enable users to explore specific components of a complex 3D model.
  • Staged Presentation: Sequentially revealing parts of the model by initially hiding them, and then using the showParts function to unveil them at appropriate moments.
  • Customized Views: Allowing users to hide or show parts based on their interests or needs, creating a personalized interaction.

Related Functions

  • showParts: To restore hidden parts or control visibility based on custom logic.


showParts

The showParts function provides the ability to reveal previously hidden parts or components of a 3D model within the scene. Working in tandem with the hideParts function, it enables developers to control the visibility of specific elements, crafting interactive and tailored user experiences.

Applications

  • Sequential Discovery: Coordinating the revelation of different parts to guide users through a structured exploration or narrative.
  • User Engagement: Encouraging user interaction by allowing them to uncover hidden parts, fostering curiosity and exploration.
  • Adaptive Presentation: Dynamically revealing or concealing parts based on user behavior or choices, enabling a responsive and intuitive experience.

Related Functions

  • hideParts: To conceal parts, complementing the showParts function in controlling visibility within the scene.


Part Click (Using onPointerClick)

The onPointerClick callback extends its functionality to capturing clicks on specific parts within the 3D scene. This targeted use case allows you to trigger a variety of context-specific actions when a user clicks on a particular part of the model.

Functionality

  • Interactive Engagement: Transform clicks on parts into rich interactive experiences, such as displaying videos, activating color pickers, or showing textboxes.
  • Context-Aware Responses: Tailor responses based on the part clicked, offering customized information, visuals, or actions.
  • User-Driven Exploration: Encourage users to explore and interact with different parts of the 3D scene, enhancing engagement and understanding.


Annotations

Annotation Click (Using onPointerClick)

The onPointerClick callback can be utilized to capture clicks on annotations within the 3D scene. This provides additional layers of interactivity and information sharing.

Functionality

  • Annotation Interaction: Enable users to interact with annotations by clicking, triggering specific actions or displaying additional information.
  • Enhanced Communication: Utilize annotation clicks to convey detailed insights, related media, or interactive elements connected to the annotation.
  • Guided Experience: Lead users through the 3D scene by using annotations as interactive waypoints, offering guided tours or instructional content.


hideAnnotations

The hideAnnotations function provides the capability to conceal annotations within the 3D scene. This feature offers flexibility and control, allowing developers to streamline user interactions by selectively showing or hiding annotations based on context or user input. It's especially useful in scenarios where a clean, unobstructed view of the 3D model is desired, or when directing user attention to specific parts of the scene.

Applications

  • Simplifying the View: Temporarily hiding annotations to present a clutter-free view of the 3D model.
  • Conditional Display: Tailoring the display of annotations based on user choices or actions within the scene.

Related Functions

  • showAnnotations: To restore hidden annotations or control visibility based on custom logic.
  • By using the hideAnnotations function in conjunction with other Unlimited3d features, you can craft immersive and interactive 3D experiences, effectively guiding users through your content.


showAnnotations

The showAnnotations function enables developers to reveal previously hidden annotations within the 3D scene. This function allows for more dynamic and responsive user interactions, as you can control when specific annotations are displayed or hidden.

Applications

  • Enhancing Focus: Strategically revealing annotations to guide user attention to particular areas or features within the 3D model.
  • User-Driven Exploration: Allowing users to uncover annotations as they explore, creating an engaging and interactive experience.

Related Functions

  • hideAnnotations: To conceal annotations, complementing the showAnnotations function in controlling visibility within the scene.

By using the showAnnotations function in conjunction with other Unlimited3d features, you can craft immersive and interactive 3D experiences, effectively guiding users through your content.


changeAnnotationMaterial

The changeAnnotationMaterial function allows developers to change the material of annotations within the 3D scene. Whether aiming to adapt to a different visual theme or highlight specific annotations, this function provides a versatile tool for tailoring the appearance of your 3D content.

Applications

  • Visual Highlighting: Utilizing different materials to emphasize or distinguish specific annotations within the scene.
  • Thematic Consistency: Adjusting annotation materials to align with a particular design theme or branding.

Camera

activateCamera

The activateCamera function is used to activate a specified camera within the 3D scene. By switching between different camera views, developers can guide users through various perspectives and focal points, enriching the exploration and understanding of the 3D content.

Applications

  • Guided Tours: Leading users through predefined paths or highlighting particular aspects of the 3D model by switching between camera views.
  • User Perspective Control: Offering users the ability to choose between different camera views, enhancing their control and interaction with the 3D scene.
  • Mobile View: Showing the model from different perspectives based on the device of the user.


getSnapshot

The getSnapshot function allows developers to capture a screenshot of the current scene and the model within the 3D environment. By receiving parameters for width and height, this function provides a flexible way to generate images in different resolutions and aspect ratios, offering a simple method for saving, sharing, or exporting visual representations of the 3D content.

Applications

  • Content Sharing: Facilitating users to share visual snapshots of their interactions with the 3D scene on social media or other platforms.
  • Documentation: Creating visual records or references of particular configurations or stages within the 3D content.
  • User Engagement: Allowing users to take personalized snapshots, fostering a sense of ownership and connection with the 3D scene.


enableAutoRotate

The enableAutoRotate function provides control over the automatic rotation of the 3D model within the scene. By accepting a boolean parameter enable, developers can easily toggle the auto-rotation feature on or off, enhancing the dynamics and interactivity of the viewing experience.

Applications

  • Interactive Display: Creating a dynamic and engaging view of the 3D model by enabling auto-rotation, particularly useful in showcase or exhibit scenarios.
  • User Control: Providing users the option to turn auto-rotation on or off, accommodating different viewing preferences.
  • Focused Examination: Disabling auto-rotation to allow users to examine specific details or parts of the model without the distraction of movement.


Overlay

updateOverlay

The updateOverlay function controls the appearance of an overlay, offering a range of parameters to adjust its look. Users can customize various aspects such as the font, image, text color, and opacity.

Functionality

  • Customize Appearance: Adjust various properties of the overlay, including font URL, image URL, text, font color, and opacity.
  • Dynamic Updates: Make real-time changes to the overlay's appearance, offering immediate previews and refinements.

Applications

  • Detailed Customization: Ideal for users looking to fine-tune the visual aspects of an overlay, ensuring it aligns perfectly with their preferences or brand.
  • Interactive Design Control: Provide a robust set of design tools for users to craft their unique overlays, enhancing creativity and engagement.


3D Text

changeTextOptions

The changeTextOptions function enables developers to manipulate 3D text within the scene. It provides extensive control over the appearance and allows for creative customization and adaptation to various design needs.

Applications

  • Personalized Content: Creating user-driven text content within the 3D scene, such as names, labels, or messages.
  • Thematic Branding: Utilizing specific fonts and alignments to align 3D text with brand identity or design themes.
  • Interactive Design: Allowing users to customize and interact with 3D text elements, enhancing engagement and immersion.

Actions

activateModifier

The activateModifier function within Unlimited3D serves as a versatile wrapper that manages various modifications within a 3D scene. It functions as a central control point for handling multiple transitions, material alterations, animations, and other changes, either bundling them into a Modifier group or applying them individually.

Functionality

  • Bundling Transitions and Changes: Group multiple transitions, material changes, animations, and more into a Modifier group for coordinated activation.
  • Individual Application: Flexibility to apply specific modifications one by one, allowing for precise control over the scene's appearance and behavior.
  • Versatile Integration: Support for a wide array of modification types, providing a unified interface for enhancing the 3D experience.

Applications

  • Complex Scene Management: Simplify the handling of multifaceted 3D scenes with numerous transitions, animations, and adjustments by organizing them through Modifier groups.
  • Customizable Experience: Enable developers and users to tailor the 3D scene according to specific needs or preferences, offering a flexible toolkit for creativity and engagement.
  • Dynamic Presentation: Enhance interactive presentations, virtual tours, or product visualizations with seamless transitions and modifications, delivering a polished and captivating experience.


activateTransition

The activateTransition function plays a crucial role in animating various aspects of the 3D scene within Unlimited3d. It's designed to activate transitions that have been previously configured, providing a dynamic and engaging experience for users.

Functionality

  • Activate Pre-Configured Transitions: Trigger transitions that have been previously set up within the 3D scene, allowing for dynamic changes and animations.
  • Enhance Interactivity: Create an interactive and responsive environment, where transitions are seamlessly integrated with user interactions or guided sequences.
  • Versatile Application: Support a wide range of transition types, whether related to movement, appearance, lighting, or other aspects of the 3D experience.

Applications

  • Interactive Presentation: Enhance product demonstrations or virtual tours by employing transitions to guide the viewer through different aspects or features.
  • Storytelling and Engagement: Utilize transitions to create a narrative flow, guiding users through a series of stages or revealing details in a sequenced manner.
  • User-Controlled Experience: Offer users the ability to trigger transitions, empowering them to explore different facets of the model or scene at their own pace.

Animations

playAnimationSet

In the context of Unlimited3D, the playAnimationSet function is designed to play animations that have been included with the model upon its upload to the platform. These pre-configured animations add life to the 3D scene, enabling a more interactive and engaging user experience.

Functionality

  • Playback of Pre-Configured Animations: Trigger and play the animations that are integrated into the model, reflecting the original design and creative intent.
  • Seamless Integration: Ensure smooth execution of animations within the 3D scene, without the need for additional configuration or customization.
  • Enhance Visualization: Utilize the animations to illustrate movements, transitions, or functionalities, adding realism and appeal to the 3D presentation.

Applications

  • Interactive Demonstrations: Employ animations to demonstrate the functionality or features of a product in an interactive and visually appealing way.
  • Entertainment and Engagement: Utilize playful or informative animations to entertain and engage users, enriching the overall 3D experience.

stopAnimationSet

Complementing the playAnimationSet function within Unlimited3D, the stopAnimationSet function provides control over the animations that have been incorporated into a model when uploaded to the platform. It offers the ability to halt animations at any point, granting flexibility in managing the dynamics of the 3D scene.

Functionality

  • Halting Animations: Instantly stop any playing animations that are part of the model's pre-configured animation set, allowing for precise control over the visual presentation.

Applications

  • Interactive Experiences: Enhance user interaction by providing control over animations, enabling scenarios like pausing for further examination, stopping for user input, or transitioning between different animations.

Viewport

setViewportTransparent

The setViewportTransparent function in Unlimited3D allows you to set a specific viewport as transparent within the 3D scene. This feature provides an extra layer of customization and can be used to create unique visual effects.

Functionality

  • Enhanced Visualization: Combine transparency with other visual elements to create appealing and interactive visual presentations.

Applications

  • Aesthetic Customization: Achieve specific visual effects by utilizing transparent viewports, enhancing the aesthetics of your 3D experience.


activateViewport

The activateViewport function is essential for managing multiple viewports within Unlimited3d. It allows you to activate a specific viewport, switching the focus to present a different look and feel of the 3D scene.

Functionality

  • Viewport Switching: Activate a specific viewport to present the users a different look of the scene.

Applications

  • Tailored Presentations: Create customized viewports that shift looks between different presentations of the 3D scene, providing a dynamic and engaging experience.


changeBackgroundColor

With the changeBackgroundColor function, you have the ability to alter the background color of the 3D scene. This function offers a simple way to adapt the visual environment to fit different themes, moods, or branding.

Functionality

  • Color Customization: Change the background color to any specified hex value, ensuring a cohesive look and feel.

Applications

  • Branding Alignment: Match the background color with brand colors or design themes for a consistent and professional appearance.
  • Emphasizing Content: Use contrasting or complementary background colors to highlight specific 3D objects or parts, enhancing visibility and focus.


AR

AR Button

Unlimited3d's AR (Augmented Reality) button provides a gateway to an immersive experience, enabling users to view 3D models in a real-world context. By tapping the AR icon, users can seamlessly transition from the traditional viewing mode to an augmented reality environment, where the model can be explored in a more lifelike and engaging way.

Functionality

  • AR Activation: A simple tap on the AR icon activates the augmented reality mode, placing the 3D model into the user's real-world environment through the device's camera.
  • If the AR is clicked while on a computer, a QR code will be displayed.
  • Model Interaction: Within the AR mode, users can interact with the 3D model, adjusting its size, orientation, and position to explore it from various angles and perspectives.

Applications

  • Product Visualization: Enable customers to visualize products in their real environment, aiding in purchasing decisions or customization options.
  • Marketing and Promotion: Create memorable and interactive marketing materials by leveraging AR to showcase products, services, or ideas in a more tangible and captivating manner.

Icon Representation

  • Standardized Symbol: The AR button is represented by a recognizable AR icon, ensuring intuitive understanding of its function.
  • Customizable Appearance: The appearance of the AR icon can be customized to align with specific branding or design preferences, maintaining a cohesive visual identity.


ON THIS PAGE