Como inserir model-viewer?

Suporte
1

Olá

Temos um Discourse auto-hospedado para nossa startup. Precisamos visualizar e analisar modelos 3D como parte do nosso fluxo de trabalho. O Model-viewer oferece uma opção muito simples de visualização 360 graus de modelos 3D. Basta incluir um CSS, JS e algumas linhas de HTML, como abaixo.

<!-- Importar o componente -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<!-- Usar como qualquer outro elemento HTML -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="Um modelo 3D de um astronauta" auto-rotate camera-controls></model-viewer>

Posso personalizar o Discourse para incluir JS e CSS, mas como posso usar o HTML acima para incorporar? Pelo que aprendi, a tag div é bloqueada, e não encontrei nada sobre como usar a tag HTML do model-viewer aqui.

Após tudo isso, minha ideia é fazer o upload do arquivo glb no Discourse pelo editor, usar esse link na tag src do model-viewer e assim incorporá-lo como um modelo 3D interativo.

Por favor, dê suas sugestões.

1 curtida
2

À primeira vista, isso parece ser do domínio de plugins; talvez você precise desenvolver algo personalizado para isso.

1 curtida
3

Se mais alguém encontrar este tópico (como eu fiz) ao pesquisar por ‘Discourse 3D model viewer’, saiba que agora criei um componente de tema que suporta isso, portanto, nenhum plugin é necessário. Você pode encontrar detalhes do componente e instruções sobre como usá-lo na categoria Componente de Tema em Insert Model 3D.

4 curtidas