3D workspace

Build with Vlak
Production vehicle204,461 triangles
Perspective · drag to orbitShaded view
TurntableLoading model

Rotate the model → show the mesh → compare materials

View source

Inside the interface

A modeling workspace built around a detailed production vehicle. Orbit the model, inspect its mesh, and compare body finishes. A narrow tool rail and model information frame the live viewport without covering the car.

The licensed 204,461-triangle vehicle model loads through Sketchfab and needs an internet connection and WebGL. Body paint is adapted in the viewer. Geometry editing and production rendering are outside this study's scope.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed
Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Ghost Buttons become equal square tool cells. Centered Icons and a high-contrast selected state identify auto-rotation, mesh view, and camera reset.
  • Tree view selects the inspector section. Property grid edits the real material, mesh, and rotation settings; Description list aligns the mesh metadata.
  • The vehicle model runs in an embedded Sketchfab viewer. Vlak controls use its camera, wireframe, and material APIs; loading, retry, and attribution remain visible parts of the workspace.
  • On mobile, Viewport and Inspector are separate destinations. The model keeps the full working width, its tools move into a horizontal bar, and the inspector provides scrollable material, mesh, and rotation controls without covering the model.