Complete options map for 3D on the web - <model-viewer>, Vectreal, R3F, Spline/Vectary, with a decision matrix

[Vectreal-Admin]

We just shipped a top-of-funnel guide that maps all four realistic paths for getting a 3D model live on a web page. It is structured around two independent axes - content origin and integration depth - rather than a single easy-to-hard spectrum.

The article covers:

• <model-viewer> - HTML element, self-hosted, no platform dependency. Right for a single static model with no pipeline requirements.
• Vectreal Publisher → iframe - no code, optimizes automatically (mesh simplification + KTX2/Basis Universal texture compression + scene cleanup), stable embed URL. As no-code as Spline or Vectary; works with models you already have.
• @vctrl/viewer - same pipeline as a React component. SSR-safe, component-level control. Uses the same renderer and same optimization pipeline as the Publisher. For teams that need the viewer in their component tree.
• @vctrl/core - server-side Node.js module for programmatic optimization and pipeline automation.
• React Three Fiber - full engine. Right when 3D is the core product, not a feature.
• Spline / Vectary - content creation tools; content must be built inside them. The distinction from Vectreal is content origin, not code complexity.

Decision matrix is a linear tree: content origin first (existing model or not), then four integration-depth questions resolving to the right path.

For repo-watchers: the @vctrl/viewer SSR-safe lazy-load pattern is documented in the article and the React integration guide. The @vctrl/core Node.js optimization API is in the source.

Read the article → Blog
Try the Publisher →Homepage
Source under AGPL-3.0 → GitHub