Virtual Tour (360)


O Virtual Tour (360) pode ser usado para enriquecer suas imagens 360 (equirretangulares) com conteúdo H5P. Pode ser usado para a criação de tours virtuais por salas, onde cada parte da sala é explicada detalhadamente por meio de texto ou imagens, bem como pode conter perguntas para quem está explorando.

Esta ferramenta não se limita a imagens 360, você também pode usá-la para navegar por cenas de imagens estáticas.

Os seguintes tipos de conteúdo H5P podem ser adicionados a uma cena de tour virtual:

• Texto;

• Imagem;

• Som (tanto para todo o Tour Virtual, por sala/cena e como botões nas cenas);

• Vídeo;

• Conjunto de escolha única;

• Resumo interativo;

• Conexões com outras cenas.


Vale salientar que, caso o treinando esteja acessando a Plataforma LMS NEXT por um dispositivo móvel através do sistema Android ou iOS, precisa desativar a opção de "Janela pop-up" do navegador do dispositivo para visualizar algumas das atividades de um Treinamento e/ou Curso para o treinando. Pois, como configuração padrão do navegador Safari, vem bloqueado janelas de Pop-up, assim impedindo as atividades (funcionalidades) que envolvam o H5P de serem executadas ou até mesmo alguns SCORM. Portanto recomendamos o desbloqueio das janelas de Pop-up dos navegadores.

Veja como fazer esse processo nesses links: Safari | Chrome | Edge | Firefox


Para realizar a criação da atividade, siga os passos abaixo:

Passo 1. Escolha o treinamento que irá abrigar a atividade e na tela de inserção de atividades no curso, Ative a edição da página, clicando na opção "Modo edição" localizado no canto superior direito da tela:



Passo 2. Com o modo de edição ativado, iremos agora, criar uma atividade. Tendo em vista o tópico desejado, clique em “Adicionar uma atividade ou recurso” e em seguida clique em "Conteúdo Interativo":


Passo 3. Você será redirecionado à página de configuração e criação. Selecione a opção "Novo conteúdo" e escolha "Virtual tour (360)" na lista de tipos de conteúdo:


Passo 4. O editor do Virtual Tour (360) deve aparecer agora. Adicione um título à sua tarefa:


Passo 5. Adicione uma primeira cena 360 - Vamos adicionar nossa primeira cena 360 agora. Primeiro, precisamos baixar uma imagem de fundo. Esta é a imagem que usaremos em nosso exemplo:


Passo 5.1. Ao abrir o link, clique em "Download" no canto inferior direito e escolha "Grande".

Para adicionar uma cena, clique no botão "Nova cena“:


Passo 6. Digite o título "Cena 01 Teatro Romano em Petra" e carregue a imagem de fundo. O pop-up da cena deve ser semelhante a este:


Passo 7. Não se esqueça de adicionar informações de licenciamento para a imagem de fundo. Clique em "Editar direitos autorais" e preencha:

Título: panorama 360 do topo do Teatro Romano em Petra, Jordânia
Autor: Sitoo
Fonte: https://www.flickr.com/photos/sitoo/46957108072/in/photostream/
Licença: Atribuição - NonComercial - NoDerivs
Versão da licença: 2.0 A

Passo 7.1. Descrição da cena: Descreva, opcionalmente, a cena para o usuário final.

Estilo de botão: Decide como os botões que estão apontando para esta cena deverão parecer. Para cenas que são estáticas e não levam para novas cenas, nós recomendamos o botão "Mais informações".

Faixa de áudio: Adicione uma faixa de áudio específica para esta cena.


Passo 8. O ângulo inicial da câmera é definido por padrão. Se quiser mudar o ângulo da câmera, você pode mover a cena arrastando-a com o mouse. Depois de definir a visualização no ângulo inicial de sua preferência, pressione o botão "Definir posição inicial" no canto inferior direito. Agora, sua cena sempre começará com este ângulo de câmera:


Passo 9. Adicione uma segunda cena 360 - Da mesma forma que na nossa primeira cena, clique no botão “Nova cena”:


Passo 9.1. Esta é a imagem que usaremos em nossa segunda cena:


Ao abrir o link, clique em "Download" no canto inferior direito e escolha "Grande". Não se esqueça de adicionar informações de licenciamento para a imagem de fundo.
Clique em "Editar direitos autorais" e preencha:
 

Título: panorama_tomb_soldier
Autor: Sitoo
Fonte: https://www.flickr.com/photos/sitoo/46284842524/
Licença: Atribuição - NonComercial - NoDerivs
Versão da Licença: 2.0 Genérica

Clique em "Concluído". Você adicionou sua segunda cena. 


Passo 10. Adicione uma cena estática - Da mesma forma que ao criar cenas 360, clique no botão "Nova cena“:


Passo 11. Selecione "Cena estática" em vez de "cena 360". Digite o título: "Petra, Jordan" e carregue esta imagem de fundo:

Ao abrir o link, clique em "Download" no canto inferior direito e escolha "Grande". Não se esqueça de adicionar informações de licenciamento para a imagem de fundo.
Clique em "Editar direitos autorais" e preencha:

Título: Petra Theatre
Autor: Douglas Perkins
Fonte: https://www.flickr.com/photos/ 13595158 @ N00 / 286630893 /
Licença: Licença de atribuição
Versão: 2.0 Genérica

Clique em "Concluído". Você adicionou sua terceira cena.


Passo 12. Navegar entre as cenas - Agora temos três cenas. Para navegar entre as cenas, clique na lista suspensa no canto inferior esquerdo, onde diz "Cena atual ...". O  seletor de cenas será aberto e você verá todas as cenas que criou até agora. Esta é a aparência:


Passo 12.1. Explicaremos cada parte de um seletor de cena:

Ícones acima da imagem

Contorno verde e fundo verde: É assim que marcamos a cena atualmente selecionada (aquela em que estamos trabalhando agora).


Passo 13. Conectar as cenas - Como autor, você pode navegar entre as cenas usando o seletor de cenas . Para que os usuários se movam de uma cena a outra, você precisa adicionar alguns elementos de navegação. Os elementos de navegação são criados usando a ferramenta "Ir para a cena", localizada no menu superior. 

Vamos criar alguma navegação. Clique no  seletor de cena e vá para a nossa 1ª cena. Queremos criar navegação desta cena para a cena # 2.


Passo 13.1. Escolha “Cena 02" e clique em "Feito". O novo elemento de navegação aparecerá na cena:

O usuário utilizará este botão para ir da cena # 1 para a cena # 2. Você pode reposicionar este elemento arrastando-o pela cena. Ao clicar nele, você obterá um menu de contexto (como mostrado na imagem acima).

• 1ª opção "Ir para a cena" irá navegar (abrir) a cena para a qual o objeto "Ir para" leva;

• A 2ª opção irá editar o próprio objeto "Ir para";

• A 3ª opção excluirá o próprio objeto "Ir para".


Passo 14. Agora queremos criar navegação da cena # 2 para a cena # 1. Clique no seletor de cena e vá para a 2ª cena.

Agora temos a navegação da cena # 1 para a cena # 2 e vice-versa.

Dica: Depois de criar um objeto "Ir para", você pode clicar duas vezes nele, que ele abrirá a cena para a qual aponta. Isso pode economizar algum tempo!


Passo 15. O último elemento de navegação que queremos adicionar é da cena # 1 para a cena # 3 (cena estática). Clique no seletor de cena e escolha a cena # 1.

Temos um elemento adicional "Ir para a cena" em nossa cena # 1. Deve ser assim:


Passo 16. Clique duas vezes no segundo "Ir para interação". Você vai navegar para a cena estática. Observe que esta cena tem um botão "Voltar" no canto superior esquerdo:


Passo 16.1. Uma cena estática tem um botão opcional "Voltar" e é verificado por padrão quando você cria uma cena estática. Esta é a aparência da opção, que pode ser visualizada assim que se adiciona uma cena do tipo ‘imagem estática’:

Claro, você pode desligar esse "botão Voltar" e criar um elemento "Ir para a cena".


Passo 17. Adicionar interações - Vamos adicionar algumas interações às nossas cenas agora. Primeiro, vamos adicionar uma interação de imagem à cena # 2.
Esta é a imagem que adicionaremos:

Passo 17.1. Navegue até a cena # 2. Clique no ícone no menu superior. Uma caixa de diálogo aparecerá. Faça upload da imagem e adicione texto alternativo conforme mostrado aqui:

Título: Fachada da Tumba do Soldado Romano em PetraAutor: Michael GuntherFonte: https://commons.wikimedia.org/wiki/File:Roman_Soldier_Tomb_Facade_Petra_Jordan1410.jpg
Licença: Atribuição ShareAlike (CC-BY-SA)
Versão da Licença: 3.0 Unported


Passo 18. Clique em "Concluído". Você adicionou sua primeira interação. Arraste-a e posicione-a conforme mostrado aqui:



Atualizado em 16/05/2025