shadcn.io is not affiliated with official shadcn/ui
Model Viewport 3D File Upload Block for Vue
A review window with a model select, Front, Right, Top and Perspective views of a CSS 3D box, a Wireframe or Solid toggle, dimension brackets in millimetres and a stats band for vertices, faces, materials and size.
Installation
Overview
Look at a part from every side before it is printed, with this 3D model upload window for Vue with Ark UI. It is the review window of Slicewright, print-prep review for 3D-printing farms. A top bar holds the title, an Add a model button and the one primary, Approve for print; a toolbar holds a model Native Select, a View Toggle Group (Front, Right, Top, Perspective) and a Shading Segment Group (Wireframe, Solid). The viewport turns a box built from six CSS 3D faces, draws dimension brackets for the two axes the view shows and lists the visible axes in millimetres; three typed models change its proportions. A Data List under it gives vertices, faces, materials and file size. For print farms, CAD review and any upload that shows geometry.
FAQ
What stays local in the demo?
The three models, their dimensions and their stats are typed, and the box is plain CSS 3D, not WebGL. A model file you pick (STL, OBJ or 3MF) is listed by name and size and never opened: a stand-in cube is drawn and the stats say "Not read". Approve for print only writes the status line. To wire it for real, parse the mesh on the server (or with a loader in the browser) and feed its bounds and counts to the same stats.
How do the views work?
The four views set the box's rotation: Front looks along the depth, Right along the width, Top from above, and Perspective from a corner. Under reduced motion the box jumps to the new view instead of turning. The brackets show the two axes the view shows; Perspective lists all three in the corner.
Where do the face counts come from?
From the vertex count: a closed triangle mesh has twice the vertices minus four faces, so 12,480 vertices give 24,956 faces. That is a stand-in rule for the typed models, not a reading of a file.
What do Wireframe and Solid change?
Wireframe draws the six faces transparent with a fine grid; Solid fills them with three foreground weights so the sides read as depth. Neither uses colour.