Por Que Incorporar um Gaussian Splat 3D?
Imagens estáticas e até mesmo fotos 360° podem mostrar apenas uma parte. Uma incorporação de Gaussian Splat dá aos visitantes do seu site a capacidade de percorrer uma cena 3D completamente fotorrealista — girando, dando zoom e explorando de qualquer ângulo — tudo sem instalar um único aplicativo.
Quer você seja um corretor de imóveis exibindo uma listagem, uma empresa de construção compartilhando o progresso do canteiro com partes interessadas, ou um estúdio criativo construindo um portfólio interativo, incorporar um visualizador Gaussian Splat transforma espectadores passivos em exploradores ativos.
Com o Splat Labs Cloud, incorporar é tão simples quanto copiar uma única linha de HTML.
Como Funciona
Cada projeto que você carrega no Splat Labs Cloud recebe uma URL de visualizador compartilhável. Essa URL pode ser aberta diretamente em um navegador, ou envolvida em uma tag HTML <iframe> para incorporá-la dentro de qualquer página web — seu próprio site, um blog, uma listagem no Zillow, uma página MLS, um documento Notion, ou um CMS como WordPress, Squarespace ou Webflow.
Aqui está o processo:
Etapa 1: Abra o Diálogo de Compartilhamento
Depois de fazer o upload e processar seu Gaussian Splat no Splat Labs Cloud, abra seu projeto. No lado esquerdo do visualizador, você verá uma barra lateral. Na parte inferior dessa barra lateral, clique no botão Compartilhar.
Isso abre o diálogo de Compartilhamento, onde você pode controlar as configurações de acesso e obter seu código de incorporação.
O diálogo de compartilhamento do Splat Labs. Certifique-se de que "Compartilhamento de link habilitado" está marcado, depois clique no botão INCORPORAR para obter seu código iframe.
Etapa 2: Obtenha Seu URL de Incorporação ou Código
No diálogo de compartilhamento:
- Certifique-se de que "Compartilhamento de link habilitado" está marcado — isso permite que qualquer pessoa com o link visualize seu projeto.
- Clique no botão INCORPORAR para expandir a seção de incorporação.
Você verá dois campos:
- URL de Incorporação — A URL do visualizador que você pode usar diretamente ou colar em plataformas como Zillow, Notion ou MLS.
- Código de Incorporação — Um trecho HTML
<iframe>pronto para copiar e colar diretamente no seu site.
Depois de clicar em INCORPORAR, o diálogo mostra sua URL de Incorporação e o código HTML completo — basta clicar no ícone de cópia ao lado de qualquer campo.
Ambos os campos têm um ícone de cópia no lado direito. Clique nele para copiar o valor para a área de transferência.
Esta URL carrega um visualizador 3D interativo que funciona em qualquer navegador moderno — desktop, tablet ou mobile.
Etapa 3: Cole o Código de Incorporação
Pegue o código de incorporação (ou envolva a URL do visualizador em uma tag HTML <iframe> padrão) e coloque-o no HTML do seu site:
<iframe
src="https://cloud.rockrobotic.com/viewer/{id-do-projeto}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
É isso. Seus visitantes agora podem explorar a cena 3D completa sem sair da sua página.
Dica profissional: Defina
width="100%"para que o visualizador se estenda para preencher seu contêiner em qualquer tamanho de tela. Ajusteheightpara se adequar ao seu layout — 500–700 pixels funciona bem para a maioria dos designs.
Exemplos ao Vivo
Abaixo estão duas cenas Gaussian Splat hospedadas no Splat Labs Cloud. Interaja com elas aqui mesmo — clique e arraste para orbitar, role para dar zoom e explore cada ângulo. Estas incorporações são gratuitas para usar no seu próprio site. Sinta-se à vontade para copiar o código de incorporação abaixo de cada visualizador e colá-lo no seu site. O visualizador compartilhado inclui a marca d'água do Splat Labs.
Exemplo 1: Canteiro de Obras
Um canteiro de obras de várias semanas capturado com LiDAR e processado como Gaussian Splat. Este é o tipo de incorporação que as equipes de construção compartilham com partes interessadas remotas para que possam explorar o local sem viajar.
URL de Incorporação:
https://cloud.rockrobotic.com/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat
Código de Incorporação (copiar e colar):
<iframe
src="https://cloud.rockrobotic.com/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Exemplo 2: Niseko Village — Estação de Esqui Nevada
Uma captura fotorrealista de uma aldeia de estação de esqui nevada em Niseko, Japão. Este tipo de incorporação imersiva é perfeito para turismo, hospitalidade e marketing de destinos — permitindo que potenciais visitantes explorem uma localização antes de fazer uma reserva.
URL de Incorporação:
https://cloud.rockrobotic.com/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3
Código de Incorporação (copiar e colar):
<iframe
src="https://cloud.rockrobotic.com/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Personalizando Sua Incorporação
Altura Responsiva
Para uma incorporação responsiva que mantém uma proporção de 16:9 em qualquer tela, envolva seu iframe em um contêiner:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://cloud.rockrobotic.com/viewer/{id-do-projeto}?view=splat"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
</div>
Esta técnica — às vezes chamada de caixa de proporção — é amplamente usada para incorporações de vídeo e mapa. Garante que seu visualizador fique ótimo em tudo, desde um monitor 4K até um celular.
Incorporação em Largura Total
Quer o visualizador saia da sua coluna de conteúdo e ocupe a largura total do navegador? Use este wrapper:
<div style="position: relative; width: 100vw; left: 50%; margin-left: -50vw;">
<iframe
src="https://cloud.rockrobotic.com/viewer/{id-do-projeto}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
</div>
Comportamento de Carregamento
loading="eager"— O visualizador começa a carregar imediatamente quando a página carrega. Melhor quando a incorporação está acima da dobra ou é o conteúdo principal.loading="lazy"— O visualizador só carrega quando o usuário rola até ele. Melhor para páginas com múltiplas incorporações ou quando o visualizador está mais abaixo na página.
Guia de Incorporação Plataforma por Plataforma
O visualizador do Splat Labs funciona em qualquer lugar que suporte HTML ou iframes. Abaixo está um guia detalhado para cada plataforma principal.
WordPress
O WordPress oferece várias formas de incorporar um iframe, dependendo se você está usando o Editor de Blocos (Gutenberg) ou o Editor Clássico.
Editor de Blocos (Gutenberg) — recomendado:
- Abra a página ou post onde você quer incorporar o visualizador.
- Clique no insersor de blocos + e pesquise por HTML Personalizado.
- Adicione o bloco HTML Personalizado à página.
- Cole o código de incorporação iframe completo no bloco.
- Clique em Visualizar para confirmar que renderiza corretamente, depois publique.
Editor Clássico:
- Abra sua página ou post e mude para a aba Texto (não Visual).
- Cole o código de incorporação iframe diretamente onde você quer que apareça.
- Volte para a aba Visual para visualizar, depois publique.
Usando um plugin (opcional):
Se você incorpora iframes frequentemente, o plugin iFrame (disponível no WordPress.org com mais de 70.000 instalações ativas) permite que você use um shortcode simples em vez de HTML bruto:
[iframe src="https://cloud.rockrobotic.com/viewer/{id-do-projeto}?view=splat" width="100%" height="600"]
Isso funciona tanto no Editor de Blocos quanto no Editor Clássico sem precisar mudar para a visualização HTML.
Elementor / outros construtores de páginas:
A maioria dos construtores de páginas como Elementor, Divi e Beaver Builder inclui um bloco HTML ou Código. Solte esse bloco na sua página e cole o código iframe.
Solução de problemas: Se a incorporação mostrar um espaço em branco, certifique-se de que tanto seu site WordPress quanto o visualizador do Splat Labs estão servidos via HTTPS. Conteúdo misto (iframe HTTP em uma página HTTPS) é bloqueado por navegadores modernos. O Splat Labs Cloud sempre usa HTTPS, então isso não deve ser um problema.
Squarespace
O Squarespace suporta iframes através de Blocos de Código, mas há um requisito de plano importante a saber.
Requisito de plano: Adicionar JavaScript ou iframes a Blocos de Código requer planos Business, Commerce Basic, Commerce Advanced, Core, Plus ou Advanced. O plano Personal só suporta HTML simples, Markdown e CSS em Blocos de Código — iframes não serão renderizados.
Como incorporar:
- Abra o editor de páginas no Squarespace.
- Clique em um ponto de inserção (a linha entre seções de conteúdo) ou clique em Adicionar Bloco.
- Selecione Código no menu de blocos.
- Cole o código de incorporação iframe completo no editor do Bloco de Código.
- Clique fora do bloco para salvar. A incorporação deve aparecer no editor.
Se a incorporação não aparecer ao editar: Este é o comportamento esperado. O Squarespace às vezes oculta o conteúdo iframe quando você está conectado como medida de segurança. Clique em Visualizar ou visualize seu site publicado em uma janela anônima para confirmar que a incorporação está renderizando corretamente para os visitantes.
Webflow
O Webflow trata código personalizado como um elemento de design de primeira classe através de seu elemento Embed (também chamado Code Embed).
Como incorporar:
- Abra o Designer do Webflow para seu projeto.
- Abra o painel Add (o ícone + na barra lateral esquerda).
- Pesquise ou role até Embed (na seção Components) e arraste-o para a tela onde você quer que o visualizador apareça.
- O editor de código abre automaticamente — cole o código de incorporação iframe completo.
- Clique em Save & Close.
O iframe fará preview diretamente na tela do Webflow. Conteúdo envolvido em tags <iframe> renderiza uma preview ao vivo no Designer, então você deve ver o visualizador do Splat Labs imediatamente.
Wix
O Wix fornece um elemento dedicado HTML iFrame para incorporar conteúdo externo.
Editor Wix — como incorporar:
- No Editor Wix, clique no botão + (Adicionar) na barra lateral esquerda.
- Navegue até Código de Incorporação → Incorporar HTML.
- Uma caixa cinza aparece na sua página — arraste-a para sua posição preferida e redimensione conforme necessário.
- Clique no elemento, depois clique em Inserir Código.
- Selecione Código (não Endereço do Site).
- Cole o código de incorporação iframe completo na caixa de texto.
- Clique em Atualizar (ou Aplicar).
Notas importantes para o Wix:
- A URL de incorporação deve usar HTTPS. O Splat Labs Cloud sempre serve via HTTPS, então isso já está resolvido.
- O elemento HTML iFrame no Wix é sandboxed — ele cria um ambiente iframe isolado.
- O elemento iFrame do Wix não é inerentemente responsivo. Defina largura e altura no seu código iframe para
100%e dimensione manualmente o contêiner de incorporação Wix para layouts desktop e mobile.
Notion
O Notion não aceita HTML bruto ou código <iframe>. Em vez disso, você incorpora conteúdo colando uma URL em um bloco Embed, e o Notion lida com a renderização do iframe nos bastidores.
Como incorporar:
- Abra a página Notion onde você quer o visualizador.
- Digite
/embedem uma nova linha, ou clique no botão + e selecione Embed. - Cole a URL do visualizador do Splat Labs (não o código iframe — apenas a URL):
https://cloud.rockrobotic.com/viewer/{id-do-projeto}?view=splat - Clique em Embed link.
O Notion renderizará o visualizador em um frame inline. Você pode redimensioná-lo passando o mouse sobre o bloco e arrastando as alças em cada lado.
Importante: Use a URL, não o código iframe. O bloco de incorporação do Notion espera uma URL https:// limpa. Se você colar a tag HTML <iframe> completa, não funcionará.
Zillow / Listagens MLS
O Zillow e a maioria das plataformas MLS suportam links de tour virtual, mas funcionam de forma diferente das incorporações iframe padrão. Você não cola código iframe diretamente — em vez disso, você fornece a URL do visualizador em um campo dedicado.
Como adicionar ao Zillow:
- Faça login na sua conta de agente do Zillow em zillow.com.
- Navegue até seu painel de Listagens e selecione a propriedade.
- Clique em Editar listagem.
- Role para baixo até a seção Fotos — abaixo dela, você encontrará um campo rotulado URL do Tour Virtual.
- Cole a URL do visualizador do Splat Labs:
https://cloud.rockrobotic.com/viewer/{id-do-projeto}?view=splat - Role para baixo e clique em Atualizar para salvar.
O Zillow adicionará um botão "Ver Tour Virtual" à sua página de listagem. Os visitantes clicam nele para abrir o visualizador 3D.
Como adicionar ao seu MLS:
A maioria dos sistemas MLS (Flexmls, Matrix, Bright MLS, etc.) tem um campo URL do Tour Virtual na página de edição da listagem. Cole a URL do visualizador do Splat Labs lá.
Profissionais de imóveis: Listagens com tours virtuais recebem significativamente mais visualizações. O Zillow relata que listagens com tours 3D recebem até 68% mais visualizações do que aquelas sem. Incorporar um percurso Gaussian Splat permite que os compradores explorem cada ângulo de uma propriedade — 24/7, de qualquer lugar.
GitHub Pages
Sites do GitHub Pages são HTML estático, então incorporar um iframe é direto — cole o código diretamente nos seus arquivos HTML ou Markdown.
Em um arquivo HTML:
Cole o código de incorporação iframe em qualquer lugar no <body> da sua página.
Em um arquivo Markdown (com Jekyll):
O GitHub Pages usa Jekyll por padrão, e o renderizador Markdown do Jekyll (Kramdown) suporta HTML inline. Você pode colar o iframe diretamente no seu arquivo .md e ele será renderizado quando o site for construído.
Nota sobre arquivos README do GitHub: Se você está tentando incorporar em um README.md em uma página de repositório GitHub (não um site GitHub Pages), os iframes não serão renderizados. O sanitizador Markdown do GitHub remove tags <iframe> de arquivos README por razões de segurança. Para READMEs de repositórios, vincule à URL do visualizador em vez disso.
React / Next.js
Em projetos React e Next.js, use o iframe diretamente no seu JSX.
Componente React básico:
export default function SplatViewer({ projectId }) {
return (
<iframe
src={`https://cloud.rockrobotic.com/viewer/${projectId}?view=splat`}
width="100%"
height="600"
frameBorder="0"
allowFullScreen
loading="eager"
style={{ border: 'none' }}
/>
);
}
Diferenças chave do JSX em relação ao HTML:
frameborder→frameBorder(camelCase)allowfullscreen→allowFullScreen(camelCase)
HTML Personalizado / Qualquer Site
Se você tem acesso direto aos arquivos de fonte HTML do seu site, incorporar é tão simples quanto colar o código iframe no <body> de qualquer página:
<iframe
src="https://cloud.rockrobotic.com/viewer/{id-do-projeto}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Isso funciona em qualquer site HTML estático, qualquer site renderizado no servidor (PHP, Python, Ruby, etc.) e qualquer CMS que permite editar a fonte da página diretamente.
Perguntas Frequentes
É gratuito incorporar?
Sim. Cada projeto Splat Labs pode ser compartilhado e incorporado sem custo adicional. As incorporações compartilhadas exibem a marca d'água do Splat Labs. Os planos Business e Enterprise oferecem marca reduzida ou marca branca.
Meus visitantes precisam instalar algo?
Não. O visualizador roda inteiramente no navegador usando WebGL. Funciona no Chrome, Safari, Firefox e Edge — em desktop, tablet e mobile.
Posso controlar a posição inicial da câmera?
Sim. Configure seu ângulo de câmera preferido no visualizador do Splat Labs antes de compartilhar. A incorporação carregará nessa posição exata.
A incorporação afeta a velocidade da minha página?
O iframe carrega independentemente do conteúdo da sua página. Usar loading="lazy" garante que o visualizador só carregue quando rolado para visualização, então tem impacto mínimo no tempo de carregamento inicial da sua página.
Posso incorporar em múltiplas páginas?
Com certeza. Não há limite para quantas páginas podem incorporar o mesmo visualizador. O visualizador é servido pelo CDN do Splat Labs, então carrega rápido em qualquer lugar.
Posso personalizar a marca do visualizador?
Os links compartilhados gratuitos incluem a marca d'água do Splat Labs. Os planos Business e Enterprise oferecem opções de marca branca onde você pode remover ou substituir a marca pela sua própria logotipo.
Pronto para Incorporar o Seu?
Criar e incorporar um visualizador Gaussian Splat leva apenas alguns minutos:
- Cadastre-se gratuitamente em cloud.rockrobotic.com
- Faça upload do seu arquivo Gaussian Splat (formato PLY, SPLAT, KSPLAT ou XGRIDS)
- Clique em Compartilhar e copie a URL de incorporação ou o código iframe
- Cole no seu site, blog ou plataforma de listagem
O Splat Labs suporta Gaussian Splats de qualquer fonte — PortalCam, Lixel L2 Pro, Postshot, Kiri Engine, Luma AI, XGRIDS ou qualquer outra ferramenta que produza formatos de splat padrão.
Precisa de ajuda para incorporar em uma plataforma específica? Entre em contato com nossa equipe — ficamos felizes em orientá-lo.
