Vectary Documentation
ChangelogFeedbackHelpOpen Studio
  • Welcome to Vectary Docs
  • Documentation
    • Getting started
      • System requirements
      • User interface
      • Rendering
      • Dashboard
      • Account settings
      • Roles
      • Scene orientation
      • Units
    • Importing
      • Import formats
      • Figma frames import
      • CAD files
      • Vectary Processor
    • Design process
      • Design mode
        • Selections tools
        • Primitives
        • 3D Text
        • Light sources
        • Modifiers
          • Array Linear
          • Array Radial
          • Array Grid
          • Array Object
          • Subdivide
          • Bevel
          • Randomize
          • Symmetry
          • Boolean
        • Deformers
          • Bend
          • Twist
          • Taper
          • Skew
          • Stretch
          • Spherify
          • Noise
          • Simplify
        • Setup
          • Group
          • Empty
          • Camera
          • Backdrop
          • Smooth normals
          • Clipping plane
        • Interactive elements
      • Materials and Textures
        • Basic materials
          • Color
          • Roughness
          • Metalness
          • Opacity
          • Emission
          • Normal map
        • Advanced materials
          • Subsurface
          • Refraction
          • Clearcoat
          • Thinfilm
          • Reflectivity
          • Double sided material
        • Baked textures
          • Ambient occlusion (texture)
          • Lightmap
          • Texture remapping
        • Importing own textures
      • Animated materials
      • Decals
      • Camera
      • Environment
      • Background
      • Ground plane
      • Effects
        • Reflections
        • Ambient Occlusion
        • Soft Shadows
        • Fading
        • Smooth edges
        • Adjustments
        • Color Balance
        • Vignette
        • Grain
        • Bloom
      • Control bar
        • Fit View
        • Viewport display modes
        • Gizmo & Origin
        • Snapping
        • Download image
      • Libraries
        • Asset library
        • Materials library
        • Environments library
      • Edit mode
        • Selection tools
        • New object
        • Draw
        • Primitives
        • Extrude
        • Bevel
        • Make circle
        • Bridge
        • Slide
        • Cut
        • Collapse
        • Cap open boundaries
        • Merge faces
        • Mesh Tools
        • Normals
    • 3D configurator
      • Variants
      • Interactions
        • Triggers
        • Conditions
        • Actions
          • Animated texture
          • Animation
          • Cameras
          • Download image
          • Highlight
          • Interactions
          • Materials
          • Link
          • Sounds
          • Transformation
          • Upload image
          • Variants
          • Visibility
          • Send event
          • Set variable
        • Events (for API)
      • Animations
      • Floating UI
        • Floating UI settings
        • Container
        • Materials (UI)
        • Variants (UI)
        • Text
        • Image
        • Button
        • Slider
        • Input
        • Tips
      • Hotspots
      • Variables & Expressions
        • Syntax
        • Functions
        • List of inputs
        • Data import (.csv)
    • Project settings
      • Version history
      • Augmented Reality (WebAR)
      • WebXR (beta)
      • Loading screen
      • Mouse controls
      • Interaction prompt
      • Menu - Settings
    • Sharing, exporting, embedding
      • Sharing
      • Performance analyzer
      • Optimizing a shared project
        • Geometry
        • Textures
        • Materials
        • Effects
        • Light and shadows
        • HDRI
        • Ground plane
        • Tips
      • Project cloning
      • Embedding to other software
      • Export options
    • Other
      • Vectary Plugin for Figma
      • 2D to 3D
      • Selections
      • Comments
      • Shortcuts
  • API
    • Model API
      • Quick Start
      • API Reference
      • Type Definitions
      • Events & Listeners
      • Floating UI
      • Ecommerce
        • Webflow
        • Shopify
        • Custom code
Powered by GitBook
LogoLogo

Website

  • Pricing
  • Blog
  • Security
  • Website

Social

  • YouTube
  • LinkedIn
  • Discord

Copyright © 2025 Vectary Inc. All rights reserved

On this page
Export as PDF
  1. Documentation
  2. 3D configurator
  3. Floating UI

Materials (UI)

PreviousContainerNextVariants (UI)

Last updated 1 month ago

The Materials UI element enables end users to switch between different materials assigned to an object. It can be displayed as either a dropdown menu or a swatch selection.

  • To enable material switching, multiple materials must first be assigned to an object. When this object is set as the source for the Materials UI element, the element dynamically displays all available materials. Learn more about adding materials:

  • Material switching can also be configured using the .

Settings

  • Source — select the object whose materials will be controlled.

  • Style — choose the switcher style: Swatch or Dropdown.

If the Variants is selected as the Source, the Materials element will display materials of the currently active object within the Variants group.

The Swatch style allows custom thumbnails to be uploaded for each material.

  • Auto-hide — Hides the UI element when the object is hidden.

  • Include hidden objects — If enabled, material switching will also affect hidden objects.

Additional settings for Swatch style:

  • Display name — Show the selected material name and display it on hover over the thumbnail.

  • Alignment — Set thumbnail alignment.

  • Spacing — Define the spacing between thumbnails.

  • Swatch size — Set the thumbnail size.

Layout

  • W — Defines the width of the Materials element.

  • H — Defines the height of the Materials element.

  • Fixed — Sets a fixed size in pixels.

  • Fill — Adjusts the size based on the parent element (Floating UI or Container).

  • Padding — Sets vertical and horizontal padding within the element.

  • Corner radius — Defines the rounding radius for thumbnails (Swatch style) or the dropdown field (Dropdown style).

Stroke

  • Thickness — Defines the stroke thickness for the thumbnails or dropdown field.

  • Default color — Sets the default stroke color (if disabled, the stroke will be transparent).

  • Hover color — Changes the stroke color on hover.

  • Active color — Defines the stroke color of the selected material thumbnail.

Materials action
How to add a material