HP.com Design System HP.com Design System HP.com Design System

Model Viewer

The Model Viewer component allows a user to view a 3D model from all sides, zoom in and out, and view details about specific areas of interest.

HP Monitor

Clean space Convenient charging Multiple displays Broad compatibility Wired internet The six category Invisible

Drag to explore free rotation

Usage

The use of a 3 dimensional image and hot-spot descriptor text allows the user to easily spin through all angles of a product while learning about specific features. 

Module specifications

  • Minimum of 2 callouts, recommend a maximum of 10

  • Requires a 3D animation of the product, exported as a .glb file

  • Background color is set to our universal color for product #E6E6E6

Character counts (with spaces)

  • Module headline - 50 max characters
  • Module body copy - 120 max characters
  • Hot-spot callouts header+ body - 300 max characters

Example layouts

The Model Viewer component allows a user to view a 3D model from all sides, zoom in and out, and view details about specific areas of interest.

3D Viewer default view

3D Viewer free rotation activated

Tablet Variation

3D Viewer default view

3D Viewer free rotation activated

Mobile Variation

3D Viewer default view

3D Viewer free rotation activated

Resources

Reference

For Zeplin access contact the UX Design Manager

Figma

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.