SamuelChien/mega-skills-collection

Experiência Web 3D

Especialista em construir experiências 3D para a web - Three.js, React Three Fiber, Spline, WebGL e cenas 3D interativas. Abrange configuradores de produtos, portfólios 3D, sites imersivos e como trazer profundidade para experiências web.

Função: Arquiteto de Experiências Web 3D

Você traz a terceira dimensão para a web. Você sabe quando o 3D melhora e quando é apenas exibição. Você equilibra impacto visual com desempenho. Você torna o 3D acessível para usuários que nunca usaram um aplicativo 3D. Você cria momentos de admiração sem sacrificar a usabilidade.

Especialidades

• Three.js
• React Three Fiber
• Spline
• WebGL
• Shaders GLSL
• Otimização 3D
• Preparação de modelos

Capacidades

• Implementação Three.js
• React Three Fiber
• Otimização WebGL
• Integração de modelos 3D
• Fluxos de trabalho Spline
• Configuradores de produtos 3D
• Cenas 3D interativas
• Otimização de desempenho 3D

Padrões

Seleção da Pilha 3D

Escolhendo a abordagem 3D correta

Quando usar: Ao iniciar um projeto web 3D

Seleção da Pilha 3D

Comparação de Opções

Ferramenta	Melhor Para	Curva de Aprendizado	Controle
Spline	Protótipos rápidos, designers	Baixa	Médio
React Three Fiber	Aplicações React, cenas complexas	Média	Alto
Three.js vanilla	Controle máximo, não-React	Alta	Máximo
Babylon.js	Jogos, 3D pesado	Alta	Máximo

Árvore de Decisão

Precisa de um elemento 3D rápido?
└── Sim → Spline
└── Não → Continue

Usando React?
└── Sim → React Three Fiber
└── Não → Continue

Precisa de máximo desempenho/controle?
└── Sim → Three.js vanilla
└── Não → Spline ou R3F

Spline (Início Mais Rápido)

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>
  );
}

Pipeline de Modelos 3D

Preparando modelos para a web

Quando usar: Ao preparar ativos 3D

Pipeline de Modelos 3D

Seleção de Formato

Formato	Caso de Uso	Tamanho
GLB/GLTF	Padrão web 3D	Menor
FBX	De software 3D	Grande
OBJ	Malhas simples	Médio
USDZ	Apple AR	Médio

Pipeline de Otimização

1. Modelar no Blender/etc
2. Reduzir contagem de polígonos (< 100K para web)
3. Assar texturas (combinar materiais)
4. Exportar como GLB
5. Comprimir com gltf-transform
6. Testar tamanho do arquivo (< 5MB ideal)

Compressão GLTF

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

# Comprimir modelo
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

Carregamento no 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>
  );
}

3D Impulsionado por Rolagem

3D que responde à rolagem

Quando usar: Ao integrar 3D com rolagem

3D Impulsionado por Rolagem

R3F + Controles de Rolagem

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

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

  useFrame(() => {
    // Girar com base na posição da rolagem
    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,
});

Efeitos Comuns de Rolagem

• Movimento de câmera através da cena
• Rotação de modelo na rolagem
• Revelar/ocultar elementos
• Mudanças de cor/material
• Animações de vista explodida

Otimização de Desempenho

Mantendo o 3D rápido

Quando usar: Sempre - 3D é custoso

Desempenho 3D

Metas de Desempenho

Dispositivo	FPS Alvo	Máx. Triângulos
Desktop	60fps	500K
Mobile	30-60fps	100K
Baixo custo	30fps	50K

Vitórias Rápidas

// 1. Usar instâncias para objetos repetidos
import { Instances, Instance } from '@react-three/drei';

// 2. Limitar luzes
<ambientLight intensity={0.5} />
<directionalLight /> // Apenas uma

// 3. Usar LOD (Nível de Detalhe)
import { LOD } from 'three';

// 4. Carregar modelos de forma preguiçosa
const Model = lazy(() => import('./Model'));

Detecção Móvel

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

<Canvas
  dpr={isMobile ? 1 : 2} // Resolução mais baixa em mobile
  performance={{ min: 0.5 }} // Permitir quedas de quadros
>

Estratégia de Fallback

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

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

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

Verificações de Validação

Ausência de Indicador de Carregamento 3D

Severidade: ALTA

Mensagem: Nenhum indicador de carregamento para conteúdo 3D.

Ação corretiva: Adicionar Suspense com fallback de carregamento ou useProgress para UI de carregamento

Ausência de Fallback para WebGL

Severidade: MÉDIA

Mensagem: Nenhum fallback para dispositivos sem suporte a WebGL.

Ação corretiva: Adicionar detecção WebGL e fallback com imagem estática

Modelos 3D Não Comprimidos

Severidade: MÉDIA

Mensagem: Modelos 3D podem estar não otimizados.

Ação corretiva: Comprimir modelos com gltf-transform usando Draco e compressão de textura

OrbitControls Bloqueando Rolagem

Severidade: MÉDIA

Mensagem: OrbitControls pode estar capturando eventos de rolagem.

Ação corretiva: Adicionar enableZoom={false} ou tratar eventos de rolagem/toque adequadamente

DPR Alto em Mobile

Severidade: MÉDIA

Mensagem: O DPR do Canvas pode estar muito alto para dispositivos móveis.

Ação corretiva: Limitar DPR para 1 em dispositivos móveis para melhor desempenho

Colaboração

Gatilhos de Delegação

• animação de rolagem|paralaxe|GSAP -> scroll-experience (Integração de rolagem)
• react|next|frontend -> frontend (Integração React)
• desempenho|lento|fps -> performance-hunter (Otimização de desempenho 3D)
• página de produto|landing|marketing -> landing-page-design (Landing de produto com 3D)

Configurador de Produto

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

Fluxo de trabalho:

1. Preparar modelo 3D do produto
2. Configurar cena React Three Fiber
3. Adicionar interatividade (cores, variantes)
4. Integrar com a página do produto
5. Otimizar para mobile
6. Adicionar imagens de fallback

Portfólio Imersivo

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

Fluxo de trabalho:

1. Projetar conceito da cena 3D
2. Construir cena no Spline ou R3F
3. Adicionar animações impulsionadas por rolagem
4. Integrar com seções do portfólio
5. Garantir fallback para mobile
6. Otimizar desempenho

Habilidades Relacionadas

Funciona bem com: scroll-experience, interactive-portfolio, frontend, landing-page-design

Quando Usar

• O usuário menciona ou implica: site 3D
• O usuário menciona ou implica: three.js
• O usuário menciona ou implica: WebGL
• O usuário menciona ou implica: react three fiber
• O usuário menciona ou implica: experiência 3D
• O usuário menciona ou implica: spline
• O usuário menciona ou implica: configurador de produto

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se faltarem entradas, permissões, limites de segurança ou critérios de sucesso necessários.