Explorar las categorías
Explora
Fiverr Pro
Español
$
USD
Crearé un configurador de productos 3D y visor interactivo usando threejs
julius F
Acerca de este Servicio
Traducción automática
Permite que tus clientes vean exactamente lo que están comprando en 3D completo, antes de hacer clic en "agregar al carrito".
Construyo configuradores de productos 3D personalizados y visores interactivos usando Three.js y React Three Fiber, aplicaciones WebGL en tiempo real que permiten a los clientes rotar, hacer zoom y personalizar tu producto en vivo en el navegador. Sin instalación de app, sin limitaciones de plugins, sin restricciones de plantillas. Código completamente personalizado basado en tu producto, tus opciones y tu marca.
Pila tecnológica:
- Three.js
- React Three Fiber (R3F)
- Drei
- WebGL / GLSL
- GLTF / GLB / USDZ
- WebGI
- GSAP
- Next.js
- PlayCanvas
Funciones del configurador que desarrollo:
Cambio en tiempo real de color y material con un clic en una muestra, observa cómo el modelo 3D se actualiza al instante
Alternancia de visibilidad de partes para mostrar u ocultar componentes (añadidos, accesorios, variantes)
Mapeo de texturas para aplicar texturas, patrones o calcomanías personalizadas en la superficie 3D en tiempo real
Controles de órbita de 360° suaves con arrastre del ratón / tacto para rotar, pellizco para hacer zoom
Iluminación ambiental HDRI realista que se actualiza con cambios en el material
Modo vista explotada para separar partes del producto y mostrar componentes internos
Transiciones animadas con movimientos suaves de la cámara entre estados de configuración
Botón de captura de pantalla / compartir
Respeta los derechos de terceros
Recuerda que incluir temas, plantillas o cualquier otro elemento que viole los derechos de terceros o las leyes aplicables en los trabajos entregados va en contra de las políticas de Fiverr. Puedes ver más información en Guía para la creación digital responsable.
Conoce a julius F
julius F
I create stunning, high performance Framer websites with modern UIUX
- DeEstados Unidos
- Miembro desdedic 2025
- Responde aprox. en:1 hora
Idiomas
Inglés, Español
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.
Traducción automática
FAQ
Traducción automática
Tipos de productos que he configurado:
Muebles · Calzado / zapatos · Relojes · Joyería · Ropa · Electrónica · Vehículos / bicicletas · Embalaje · Equipamiento industrial · Regalos personalizables
Habilidades del vendedor
Three.js React Three Fiber WebGL / GLSL Configurador de productos 3D Optimización GLTF / GLB Next.js / React Animación GSAP PlayCanvas WebGI USDZ / AR Quick Look Integración con Shopify Optimización de rendimiento
Palabras clave de búsqueda
configurador de productos · configurador 3D · threejs · webgl · react three fiber · visor de productos 3D · 3D interactivo · sitio web 3D · modelo 3D · configurador · three js · glb · usdz · interacción 3D · configurador webgl · webgi · producto 3D · playcanvas · diseño de productos 3D · animación gsap · configuración 3D
¿En qué formato de archivo debe estar mi modelo 3D?
Se prefiere GLTF o GLB — es el formato nativo para Three.js y R3F y ofrece el mejor rendimiento en web. También acepto archivos FBX, OBJ, STL y Blender .blend, que convierto y optimizo como parte del proceso de construcción.
¿Puedes manejar un producto con docenas de opciones y combinaciones de configuración?
Sí — matrices de configuración complejas son totalmente soportadas. Uso un enfoque de máquina de estados: cada parte configurable tiene un conjunto definido de estados, y cambiar una opción activa un intercambio de material, cambio de malla o alternancia de visibilidad en el objeto 3D correspondiente. Para productos con cientos de combinaciones
¿Cómo funciona la integración con Shopify en el carrito?
Cuando un cliente finaliza su configuración, mapeo sus selecciones a los IDs de variantes de productos en Shopify usando la API Storefront. La configuración seleccionada (color, material, opciones de partes) se codifica como metacampos de variante o propiedades de línea y se pasa al carrito con la llamada API de agregar al carrito.
¿Qué es USDZ y necesito funcionalidad AR?
USDZ es el formato de archivo 3D de Apple para AR Quick Look — cuando un usuario de iOS toca el botón AR, el producto se abre en su vista de cámara a escala real usando LiDAR o ARKit de su teléfono. Es una herramienta poderosa para muebles, calzado y artículos para el hogar donde la percepción del tamaño importa a los compradores.
¿El configurador será lo suficientemente rápido en dispositivos de clientes promedio?
Sí — la optimización del rendimiento está integrada en la arquitectura, no es una solución parcheada al final. Uso compresión de geometría DRACO (normalmente reducción del 70–90% en tamaño de archivo), compresión de texturas KTX2, materiales instanciados para que múltiples cambios de superficie no multipliquen las llamadas de dibujo, y carga progresiva para que la interfaz sea rápida.
¿Puedes agregar una función de "captura de pantalla y compartir" para que los clientes puedan guardar su configuración?
Sí — esto es una función Premium y está disponible como complemento estándar. La función de captura de pantalla renderiza el lienzo 3D actual a un PNG usando renderer.domElement.toDataURL() de Three.js — captura exactamente lo que se ve en pantalla en resolución completa. Para URLs compartibles, el estado de configuración actual se codifica
