Configurador de mochilas

Concebido para ser incorporado num website como destino final, o configurador 3D permite aos utilizadores verem o seu próprio estore personalizado num cenário realista. O utilizador pode explorar estilos de estores, materiais, cores, tamanhos e funcionalidades. Existe um benefício adicional no final do processo de personalização, que permite ao utilizador descarregar a imagem da sua configuração. Num caso de utilização real, a imagem pode ser descarregada e usada como referência digital ou numa loja física.

Este configurador de estores, inserido num fundo realista, usa Floating UI para gerir todas as interações na cena. O objetivo era tornar o configurador fácil de usar e compreender. A UI principal apresenta as opções de menu com elementos visuais em vez de palavras. Para evitar obstruir a imagem geral, foi usada apenas uma UI.

‍

O hotspot precisa de:

Abrir/Fechar a FUI

‍

A Floating UI, localizada no canto superior esquerdo do ecrã, precisa de:

Alternar entre variantes de estores
Alterar os materiais/cores
Alternar entre duas câmaras
Tirar uma captura de ecrã da tua configuração final

‍

Interactions

‍

A Floating UI tem duas funcionalidades principais: o object switcher e o material switcher.

‍

Para o object switcher, as imagens são usadas para ativar interações e selecionar uma opção de entre quatro variantes.
Cada variante está associada ao seu próprio menu de materiais com múltiplas amostras.
Quando uma variante é selecionada, ativa a visibilidade das amostras para esse tipo de estore, enquanto oculta as outras.
O ícone da câmara permite ao utilizador alternar entre duas vistas: a predefinida oferece uma visão geral da cena e a secundária mostra uma vista aproximada dos estores.
O ícone de imagem é um elemento interativo que irá guardar a imagem da configuração selecionada no dispositivo.

‍

Dica: Para reduzir o número de polígonos, é usada apenas uma parede de fundo, com limites de câmara definidos para evitar a rotação. O ambiente atrás da janela é representado por um plano simples com uma textura de imagem.