Skip to content
Close
Contact
Contact

3D Product Viewer Documentation

TABLE OF CONTENTS
loading...

Welcome to the 3D Product Viewer HubSpot Module documentation. This guide will help you understand and utilize the various features and options available in the module to create stunning 3D product visualizations. Each section below provides detailed information about the module's fields and settings.


Style

The styles section allows you to customize the visual appearance of your 3D product viewer. This includes options for background, content, fullscreen settings, tone mapping, and more. This section helps ensure your 3D viewer integrates seamlessly with your website's design.

Background

The background settings let you choose how the area behind your 3D model looks.

  • Background Type: This setting allows you to select the type of background for your 3D viewer.

    • None: No background, leaving it transparent.
    • Background Color: A solid color background.
    • Background Gradient: A gradient, which smoothly transitions between two or more colors.
    • Background Image: An image as the background.
    • Environment: Use an environmental setting that mimics real-world lighting and reflections, enhancing the realism of the 3D model. An environment is a 3D scene that surrounds the object, often used to simulate realistic lighting and reflections.

  • Color: Select the color of your background if you chose 'Background Color'. This will open a color picker for easy selection.

  • Gradient: Configure the gradient if 'Background Gradient' is selected. Gradients can add depth and a professional look.

  • Image: Upload or link to an image for the background if 'Background Image' is chosen. Images can be used to create thematic or branded backgrounds.

Content

Content settings allow you to customize how the additional information and elements within your 3D viewer are displayed.

  • Background: Customize the background for content areas within the 3D viewer.

    • Background Type: Choose from none, color, gradient, or image.
    • Color: Set the color for content backgrounds.
    • Gradient: Configure gradient backgrounds.
    • Image: Set an image as the background.

  • Border: Define the border settings for the content, including style, color, and width.

  • Corner: Adjust the corner radius to create rounded edges for a softer look.

  • Spacing: Manage the padding (inside spacing) and margin (outside spacing) for content elements.

    • Padding: Ensure your content has enough space around it to look clean and uncluttered.
    • Margin: Adjust the spacing outside your content elements to manage layout spacing.

  • Alignment: Align your content horizontally and vertically within the viewer for a balanced appearance.

  • Text Content: Add text content to be displayed above the 3D scene.

    • Content: Provide the text content using a rich text editor.

Alpha Mask

The alpha mask feature allows for a soft transition around the edges of your 3D viewer, making it blend smoothly with the surrounding content.

  • Top: Set how much transparency to apply from the top edge (0-100%).
  • Left: Set how much transparency to apply from the left edge (0-100%).
  • Right: Set how much transparency to apply from the right edge (0-100%).
  • Bottom: Set how much transparency to apply from the bottom edge (0-100%).

Fullscreen

The fullscreen option enhances the viewer experience by allowing the 3D model to occupy the entire screen, providing a more immersive view.

  • Hide Content: This option will hide any additional content when fullscreen mode is activated.
  • Background: Customize the fullscreen background, with the same options as the standard background settings.

Tone Mapping

Tone mapping is used to enhance the appearance of your 3D model by applying various color adjustments and filters to create more lifelike images.

  • Type: Choose the type of tone mapping:

    • None: No tone mapping.
    • Linear: Maintains the natural lighting, preserving the range of brightness.
    • Reinhard: Balances the brightness, reducing overly bright areas.
    • Cineon: Simulates cinematic film quality.
    • ACES Filmic: Applies a film-like tone, often used in professional visual effects.

  • Exposure: Adjust the brightness of the image. Higher values make the scene brighter, while lower values darken it.

Size

Ensure your 3D viewer is responsive and looks great on all devices by setting specific sizes for desktop, tablet, and mobile views.

  • Desktop: Configure the size settings for desktop screens.

    • Height Mode: Choose between maintaining an aspect ratio or setting a custom height.
      • Aspect Ratio: Ratio between the width and height of the viewer (e.g., 16:9).
      • Custom Height: Set a specific height in pixels.
    • Aspect Ratio: Select a standard aspect ratio (e.g., 16:9) to maintain proportional dimensions.

  • Tablet: Set the viewer's size settings for tablet devices.

    • Height Mode: Choose aspect ratio, custom height, or inherit settings from desktop.
    • Custom Height: Specify the height in pixels for tablet view.
    • Aspect Ratio: Select an aspect ratio.

  • Mobile: Configure size settings for mobile devices to ensure the viewer looks good on smaller screens.

    • Height Mode: Choose aspect ratio, custom height, or inherit settings.
    • Custom Height: Specify the height in pixels for mobile view.
    • Aspect Ratio: Select an aspect ratio.

Scene

The scene settings control the 3D environment, including the objects, ground, and environment settings.

Object

Select and customize the 3D model displayed in the scene.

  • 3D Model: Choose and configure the 3D model.

    • Import From: Select whether to import the model from a file/URL or choose from examples.
    • Example: Select from predefined example models (e.g., teapot, helmet).
    • URL: Provide the URL or upload a file for the 3D model.

  • Transformation: Adjust the object's position, scale, and rotation.

    • Position Mode: Choose between manual positioning (specify exact coordinates) or automatic centering on the ground.
    • Position: Set the object's position (x, y, z). Coordinates are numerical values representing location in 3D space.
    • Scale Mode: Choose between manual scaling (specify exact scale factor) or automatic scaling.
    • Scale: Set the scale factor to adjust the size.
    • Rotation: Set the object's rotation (yaw, pitch, roll) to change its orientation.

  • Settings: Configure additional settings for the object.

    • Normal Space: Select how normals (surface details affecting light and shadow) are calculated (tangent or object space).
    • Cast Shadow: Enable or disable casting shadows.
    • Receive Shadow: Enable or disable receiving shadows from other objects.

Ground

Define the ground settings for the scene.

  • Shape: Choose the shape of the ground (none, plane, round, oval).
  • Overlap: Set the distance to overlap the ground with the object. This ensures the object appears correctly grounded.
  • Color: Set the color of the ground.
  • Height: Set the height of the ground.

Environment

The environment settings control the lighting, reflections, and background for your 3D scene, enhancing realism and visual appeal.

The environment in a 3D scene includes various elements that contribute to the overall look and feel of the scene, such as lighting, reflections, and background textures. These settings are crucial for creating a realistic and immersive 3D experience.

Texture

Set the texture used for reflections and the background.

  • Import From: Choose to use predefined examples or upload a custom file.
  • Example: Select from example textures (e.g., room, Venice sunset).
  • File: Provide a URL or upload a file for the texture.

Lighting

Select a lighting setup to illuminate your 3D scene.

  • Scene: Choose from predefined lighting setups (e.g., studio lighting) to achieve the desired look.

Camera

Configure the camera that views your 3D scene, including its controls and settings.

A camera in a 3D scene functions similarly to a real-world camera, capturing the scene from a specific point of view. This perspective is essential for determining how users see and interact with the 3D model.

Controls

Choose and configure the camera controls for user interaction.

  • Control Type: Select the type of camera control (e.g., orbit). Orbit allows the user to rotate around the object.
  • Orbit: Detailed settings for orbit controls.
    • Min Polar Angle: Minimum vertical angle for the orbit.
    • Max Polar Angle: Maximum vertical angle for the orbit.
    • Target Mode: Choose manual targeting or relative to the scene center.
    • Target: Set the coordinates the camera focuses on.
    • Distance Mode: Choose between manual and automatic distance settings.
    • Distance Factor: Adjust the automatic distance scaling.
    • Min Distance: Minimum zoom distance.
    • Max Distance: Maximum zoom distance.
    • Control by Scene Objects: Limit interactions to scene objects for better control.
    • Limit Azimuth Angle: Constrain horizontal rotation.
    • Min Azimuth Angle: Minimum horizontal rotation angle.
    • Max Azimuth Angle: Maximum horizontal rotation angle.
    • Enable Damping: Smooth out camera movements.
    • Damping Factor: Set the inertia effect.
    • Enable Zoom: Allow zooming.
    • Zoom Speed: Set the speed of zooming.
    • Enable Pan: Allow panning.
    • Pan Speed: Set the pan speed.
    • Enable Rotate: Allow rotation.
    • Rotate Speed: Set the rotation speed.
    • Auto Rotate: Enable automatic rotation.
    • Auto Rotate Speed: Set the speed of automatic rotation.

Settings

Configure additional camera settings.

  • Type: Choose the camera type. A perspective camera simulates the way the human eye sees the world, with objects appearing smaller as they get further away.

  • Perspective Camera: A type of camera that mimics human vision. Objects closer to the camera appear larger, while objects further away appear smaller, creating a sense of depth and realism in the scene.

  • Field of View (FOV): This is the extent of the observable world that is seen at any given moment. Measured in degrees, a larger FOV allows you to see more of the scene, while a smaller FOV makes objects appear larger and closer.

  • Position Mode: Choose between absolute or relative to the scene center.

    • Absolute: Specify the camera's exact position in the scene.
    • Relative to Scene Center: Automatically position the camera relative to the center of the scene.

  • Position: Set the camera's position in the 3D space (x, y, z).

  • View Offset X: Adjust the camera's horizontal view offset.

  • View Offset Y: Adjust the camera's vertical view offset.

Tools

Configure the tools shown to the user.

Buttons

Choose the buttons shown to the user.

  • Fullscreen: Enable or disable the fullscreen button to allow users to view the 3D scene in fullscreen mode.

Settings

General settings for performance and devices.

Shadow Resolution

Set the resolution of shadows to balance quality and performance.

  • Resolution: Choose from 256, 512, 1024, 2048, or 4096. Higher resolutions provide better quality but may impact performance.

Breakpoints

Define breakpoints for responsive design, ensuring the 3D viewer adapts to different screen sizes.

  • Tablet: Set the maximum width for tablet view.
  • Mobile: Set the maximum width for mobile view.

For further assistance and examples, please refer to the Get Pro, Documentation, Feedback, and Support links.