domains / families / design / 3d-web-experience
3d-web-experience
authentic
Use when building or debugging web 3D scenes, product configurators or portfolios with Three.js, React Three Fiber or Spline; review assets, loading, controls, fallbacks and performance.
When to use
- Add a navigable product model or configurator to a web page while preserving ordinary product and purchase controls.
- Diagnose loading, frame-time, asset-size or input problems in an existing Three.js/R3F scene.
- Choose between a design-authored Spline scene and a code-owned scene based on interaction, deployment and maintenance needs.
- Plan a scroll-linked portfolio scene with an accessible static alternative and a reduced-motion path. Prefer ordinary DOM content when depth does not help the user's task.
When not to use
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Assets and dependencies are project prerequisites, not shipped in this skill. Replace the illustrative Spline scene URL with an authorized asset; do not treat the placeholder as a working scene.
- Validate compression/decoder compatibility and visual quality using the installed CLI version and real target devices. See the [glTF Transform CLI](https://gltf-transform.dev/cli).
- Loading, runtime failures, accessible DOM controls and reduced motion require separate checks; a rendered canvas alone does not prove accessibility or performance.
Skill page
Source