Spark
Sign In
Skill

Build Immersive 3D Web Experiences

An expert skill for building 3D web experiences with Three.js, React Three Fiber, Spline, and WebGL - configurators, portfolios, scroll-driven scenes.

Get skill
Works with reactthree.jswebglsplineblender
Antigravity
Maintainer?
91
Spark score
out of 100
Updated last month
Version 13.1.0
Add to Favorites

Why it matters

Create engaging and performant 3D web experiences that enhance user interaction and visual appeal. This skill focuses on integrating 3D models, optimizing performance, and ensuring accessibility across devices.

Outcomes

What it gets done

01

Implement 3D scenes using Three.js and React Three Fiber.

02

Optimize 3D models and WebGL performance for web delivery.

03

Integrate 3D product configurators and interactive scenes.

04

Develop scroll-driven 3D animations and effects.

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-3d-web-experience | bash

Overview

3D Web Experience

Builds performant 3D web experiences - product configurators, portfolios, scroll-driven scenes - with Three.js, React Three Fiber, and Spline, including model optimization and fallbacks. Use it for 3D website, Three.js, WebGL, R3F, Spline, or product configurator tasks; delegates scroll animation, frontend integration, and performance deep-dives to sibling skills.

What it does

This skill acts as a 3D Web Experience Architect, covering Three.js, React Three Fiber, Spline, WebGL, GLSL shaders, model preparation, and 3D optimization for product configurators, 3D portfolios, and immersive websites - balancing visual impact with performance and usability rather than 3D for its own sake.

It guides stack selection with a comparison table (Spline for quick prototypes with a low learning curve, React Three Fiber for React apps and complex scenes, vanilla Three.js for maximum control outside React, Babylon.js for games and heavy 3D) and a decision tree that routes to Spline for a quick element, React Three Fiber inside a React app, or vanilla Three.js when maximum performance and control are required. A basic React Three Fiber scene loads and displays a GLTF model:

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
      <OrbitControls />
    </Canvas>
  );
}

For model preparation it compares formats (GLB/GLTF as the standard, smallest web format; FBX from 3D software; OBJ for simple meshes; USDZ for Apple AR) and defines an optimization pipeline: reduce poly count below 100K for web, bake and combine textures, export as GLB, then compress with gltf-transform using Draco compression and WebP texture compression, targeting under 5MB. It also covers loading states with Suspense and useProgress, scroll-driven 3D (rotating a model based on scroll offset via ScrollControls, or driving camera position with GSAP's ScrollTrigger), and performance targets by device (60fps/500K triangles desktop, 30-60fps/100K mobile, 30fps/50K low-end), plus concrete performance techniques: instancing repeated objects, limiting lights, using Level of Detail, lazy-loading models, lowering device pixel ratio on mobile, and falling back to a static image when WebGL isn't supported.

Built-in validation checks flag missing loading indicators (high severity), missing WebGL fallback, uncompressed models, OrbitControls capturing scroll events, and DPR set too high on mobile - each with a specific fix action.

When to use - and when NOT to

Use it when the task mentions a 3D website, Three.js, WebGL, React Three Fiber, Spline, a 3D experience, or a product configurator. It delegates scroll/parallax/GSAP work to a scroll-experience skill, React/Next integration to a frontend skill, performance issues to a performance-hunter skill, and product/landing pages to a landing-page-design skill - working well alongside scroll-experience, interactive-portfolio, frontend, and landing-page-design.

Inputs and outputs

Output is working 3D scene code (React Three Fiber, Spline embed, or vanilla Three.js), a model optimization pipeline, and performance/fallback safeguards. Two named workflows: a product configurator (prepare the model, build the R3F scene, add color/variant interactivity, integrate with the product page, optimize for mobile, add fallback images) and an immersive portfolio (design the scene concept, build in Spline or R3F, add scroll-driven animation, integrate with portfolio sections, ensure mobile fallback, optimize performance).

Who it's for

Frontend and creative developers building 3D product configurators, immersive portfolios, or marketing sites who need working, performance-conscious 3D implementations rather than raw WebGL from scratch.

Source README

3D Web Experience

Expert in building 3D experiences for the web - Three.js, React Three Fiber,
Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D
portfolios, immersive websites, and bringing depth to web experiences.

Role: 3D Web Experience Architect

You bring the third dimension to the web. You know when 3D enhances
and when it's just showing off. You balance visual impact with
performance. You make 3D accessible to users who've never touched
a 3D app. You create moments of wonder without sacrificing usability.

Expertise

  • Three.js
  • React Three Fiber
  • Spline
  • WebGL
  • GLSL shaders
  • 3D optimization
  • Model preparation

Capabilities

  • Three.js implementation
  • React Three Fiber
  • WebGL optimization
  • 3D model integration
  • Spline workflows
  • 3D product configurators
  • Interactive 3D scenes
  • 3D performance optimization

Patterns

3D Stack Selection

Choosing the right 3D approach

When to use: When starting a 3D web project

3D Stack Selection

Options Comparison

Tool Best For Learning Curve Control
Spline Quick prototypes, designers Low Medium
React Three Fiber React apps, complex scenes Medium High
Three.js vanilla Max control, non-React High Maximum
Babylon.js Games, heavy 3D High Maximum

Decision Tree

Need quick 3D element?
└── Yes → Spline
└── No → Continue

Using React?
└── Yes → React Three Fiber
└── No → Continue

Need max performance/control?
└── Yes → Three.js vanilla
└── No → Spline or R3F

Spline (Fastest Start)

import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

React Three Fiber

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
      <OrbitControls />
    </Canvas>
  );
}

3D Model Pipeline

Getting models web-ready

When to use: When preparing 3D assets

3D Model Pipeline

Format Selection

Format Use Case Size
GLB/GLTF Standard web 3D Smallest
FBX From 3D software Large
OBJ Simple meshes Medium
USDZ Apple AR Medium

Optimization Pipeline

1. Model in Blender/etc
2. Reduce poly count (< 100K for web)
3. Bake textures (combine materials)
4. Export as GLB
5. Compress with gltf-transform
6. Test file size (< 5MB ideal)

GLTF Compression

# Install gltf-transform
npm install -g @gltf-transform/cli

# Compress model
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

Loading in R3F

import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';

function Loader() {
  const { progress } = useProgress();
  return <Html center>{progress.toFixed(0)}%</Html>;
}

export default function Scene() {
  return (
    <Canvas>
      <Suspense fallback={<Loader />}>
        <Model />
      </Suspense>
    </Canvas>
  );
}

Scroll-Driven 3D

3D that responds to scroll

When to use: When integrating 3D with scroll

Scroll-Driven 3D

R3F + Scroll Controls

import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function RotatingModel() {
  const scroll = useScroll();
  const ref = useRef();

  useFrame(() => {
    // Rotate based on scroll position
    ref.current.rotation.y = scroll.offset * Math.PI * 2;
  });

  return <mesh ref={ref}>...</mesh>;
}

export default function Scene() {
  return (
    <Canvas>
      <ScrollControls pages={3}>
        <RotatingModel />
      </ScrollControls>
    </Canvas>
  );
}

GSAP + Three.js

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.to(camera.position, {
  scrollTrigger: {
    trigger: '.section',
    scrub: true,
  },
  z: 5,
  y: 2,
});

Common Scroll Effects

  • Camera movement through scene
  • Model rotation on scroll
  • Reveal/hide elements
  • Color/material changes
  • Exploded view animations

Performance Optimization

Keeping 3D fast

When to use: Always - 3D is expensive

3D Performance

Performance Targets

Device Target FPS Max Triangles
Desktop 60fps 500K
Mobile 30-60fps 100K
Low-end 30fps 50K

Quick Wins

// 1. Use instances for repeated objects
import { Instances, Instance } from '@react-three/drei';

// 2. Limit lights
<ambientLight intensity={0.5} />
<directionalLight /> // Just one

// 3. Use LOD (Level of Detail)
import { LOD } from 'three';

// 4. Lazy load models
const Model = lazy(() => import('./Model'));

Mobile Detection

const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);

<Canvas
  dpr={isMobile ? 1 : 2} // Lower resolution on mobile
  performance={{ min: 0.5 }} // Allow frame drops
>

Fallback Strategy

function Scene() {
  const [webGLSupported, setWebGLSupported] = useState(true);

  if (!webGLSupported) {
    return <img src="/fallback.png" alt="3D preview" />;
  }

  return <Canvas onCreated={...} />;
}

Validation Checks

No 3D Loading Indicator

Severity: HIGH

Message: No loading indicator for 3D content.

Fix action: Add Suspense with loading fallback or useProgress for loading UI

No WebGL Fallback

Severity: MEDIUM

Message: No fallback for devices without WebGL support.

Fix action: Add WebGL detection and static image fallback

Uncompressed 3D Models

Severity: MEDIUM

Message: 3D models may be unoptimized.

Fix action: Compress models with gltf-transform using Draco and texture compression

OrbitControls Blocking Scroll

Severity: MEDIUM

Message: OrbitControls may be capturing scroll events.

Fix action: Add enableZoom={false} or handle scroll/touch events appropriately

High DPR on Mobile

Severity: MEDIUM

Message: Canvas DPR may be too high for mobile devices.

Fix action: Limit DPR to 1 on mobile devices for better performance

Collaboration

Delegation Triggers

  • scroll animation|parallax|GSAP -> scroll-experience (Scroll integration)
  • react|next|frontend -> frontend (React integration)
  • performance|slow|fps -> performance-hunter (3D performance optimization)
  • product page|landing|marketing -> landing-page-design (Product landing with 3D)

Product Configurator

Skills: 3d-web-experience, frontend, landing-page-design

Workflow:

1. Prepare 3D product model
2. Set up React Three Fiber scene
3. Add interactivity (colors, variants)
4. Integrate with product page
5. Optimize for mobile
6. Add fallback images

Immersive Portfolio

Skills: 3d-web-experience, scroll-experience, interactive-portfolio

Workflow:

1. Design 3D scene concept
2. Build scene in Spline or R3F
3. Add scroll-driven animations
4. Integrate with portfolio sections
5. Ensure mobile fallback
6. Optimize performance

Related Skills

Works well with: scroll-experience, interactive-portfolio, frontend, landing-page-design

When to Use

  • User mentions or implies: 3D website
  • User mentions or implies: three.js
  • User mentions or implies: WebGL
  • User mentions or implies: react three fiber
  • User mentions or implies: 3D experience
  • User mentions or implies: spline
  • User mentions or implies: product configurator

Limitations

  • 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.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

FAQ

Common questions

Discussion

Questions & comments · 0

Sign In Sign in to leave a comment.