Ver categorias
Explorar
Fiverr Pro
Português
$
USD
Vou construir um configurador de produto 3D e visualizador interativo usando threejs
julius F
Sobre este Serviço
Tradução automática
Permita que seus clientes vejam exatamente o que estão comprando em 3D completo, antes de clicar em "adicionar ao carrinho".
Eu crio configuradores de produto 3D personalizados e visualizadores interativos usando Three.js e React Three Fiber, aplicações WebGL em tempo real que permitem aos clientes rotacionar, ampliar e personalizar seu produto ao vivo no navegador. Sem instalação de app, sem limitações de plugin, sem restrições de templates. Código totalmente personalizado, feito sob medida para seu produto, suas opções e sua marca.
Pilha de tecnologia:
- Three.js
- React Three Fiber (R3F)
- Drei
- WebGL / GLSL
- GLTF / GLB / USDZ
- WebGI
- GSAP
- Next.js
- PlayCanvas
Recursos do configurador que eu crio:
Troca de cores e materiais em tempo real ao clicar em uma amostra, veja o modelo 3D atualizar instantaneamente
Alternar visibilidade de componentes (acessórios, variantes, complementos)
Aplicar texturas personalizadas, padrões ou decalques na superfície 3D em tempo real
Controles de órbita 360°: arraste com mouse/touch para rotacionar, pinça para ampliar
Iluminação ambiental HDRI realista que se atualiza com as mudanças de material
Modo vista explodida: separar partes do produto para mostrar componentes internos
Transições animadas: movimentos suaves de câmera entre configurações
Botão de captura de tela / compartilhamento
Respeite os direitos de terceiros
Esteja atento ao fato que é contra as políticas do prestador da Fiverr incluir temas, modelos ou outros elementos no trabalho entregue que infrinjam os direitos de terceiros ou leis aplicáveis. Leia mais em nosso Guia de Criação Digital Responsável.
Conheça mais sobre julius F
julius F
I create stunning, high performance Framer websites with modern UIUX
- A partir deEstados Unidos
- Membro desdedez. de 2025
- Responde em aprox.:1 hora
Idiomas
Inglês, Espanhol
Hi, I’m a Framer website designer focused on building visually stunning, high-performance websites for startups, SaaS products, and personal brands. I turn ideas into modern, interactive, and conversion-ready websites using Framer.
I combine UI/UX design expertise with Framer’s advanced animations and components to create websites that are fast, responsive, and easy to edit—no coding required.
Tradução automática
Perguntas frequentes
Tradução automática
Tipos de produto que configurei:
Móveis · Calçados / sapatos · Relógios · Joias · Roupas · Eletrônicos · Veículos / bikes · Embalagens · Equipamentos industriais · Presentes personalizáveis
Habilidades do vendedor
Three.js React Three Fiber WebGL / GLSL Configurador de produto 3D Otimização GLTF / GLB Next.js / React Animação GSAP PlayCanvas WebGI USDZ / AR Quick Look Integração Shopify Otimização de desempenho
Palavras-chave de busca
configurador de produto · configurador 3D · threejs · webgl · react three fiber · visualizador de produto 3D · interativo 3D · site 3D · modelo 3D · configurador · three js · glb · usdz · interativo 3D · configurador webgl · webgi · produto 3D · playcanvas · design de produto 3D · animação gsap · configuração 3D
Qual formato de arquivo meu modelo 3D precisa estar?
GLTF ou GLB é preferido — é o formato nativo para Three.js e R3F e oferece o melhor desempenho na web. Também aceito arquivos FBX, OBJ, STL e Blender .blend, que converto e otimizo como parte do processo de construção.
Você consegue lidar com um produto com dezenas de opções e combinações de configuração?
Sim — matrizes de configuração complexas são totalmente suportadas. Uso uma abordagem de máquina de estados: cada parte configurável tem um conjunto definido de estados, e trocar uma opção aciona uma troca de material, troca de malha ou alternância de visibilidade no objeto 3D correspondente. Para produtos com centenas de combinações
Como funciona a integração ao carrinho com Shopify?
Quando um cliente finaliza sua configuração, mapeio suas escolhas para os IDs de variantes de produto do Shopify usando a API Storefront. A configuração selecionada (cor, material, opções de partes) é codificada como metacampos de variante ou propriedades de item de linha e enviada ao carrinho com a chamada de API add-to-cart
O que é USDZ e preciso de funcionalidade AR?
USDZ é o formato de arquivo 3D da Apple para AR Quick Look — quando um usuário iOS toca no botão AR, o produto abre na visão da câmera em escala real usando o LiDAR ou ARKit do telefone. É uma ferramenta poderosa para móveis, calçados e artigos para casa onde a percepção de tamanho importa para os compradores. Além disso
O configurador será rápido o suficiente na maioria dos dispositivos dos clientes?
Sim — a otimização de desempenho está integrada na arquitetura, não sendo uma adaptação posterior. Uso compressão de geometria DRACO (normalmente redução de 70–90% no tamanho do arquivo), compressão de texturas KTX2, materiais instanciados para que múltiplas trocas de superfície não multipliquem chamadas de desenho, e carregamento progressivo para que a interface seja rápida.
Você pode adicionar um recurso de "captura de tela e compartilhamento" para que os clientes possam salvar sua configuração?
Sim — isso é um recurso Premium e disponível como complemento padrão. A função de captura de tela renderiza o canvas 3D atual para um PNG usando renderer.domElement.toDataURL() do Three.js — captura exatamente o que está na tela em resolução total. Para URLs compartilháveis, o estado atual da configuração é codificado
