We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Pesquisar no site de suporte

Evite golpes de suporte. Nunca pedimos que você ligue ou envie uma mensagem de texto para um número de telefone, ou compartilhe informações pessoais. Denuncie atividades suspeitas usando a opção “Denunciar abuso”.

Saiba mais

Esta discussão foi arquivada. Faça uma nova pergunta se precisa de ajuda.

My WebVR/A-Frame content, located a cloud server, renders .gltf fine in Firefox. However, the same content doesn't render the .gltf files on my local machine.

  • 1 resposta
  • 1 tem este problema
  • 7 visualizações
  • Última resposta de davidspriggs

antoinpayne
antoinpayne
more options

Our WebVR/A-Frame content, which uses .gltf files for our 3D models, renders fine when view on our cloud-based server. However, when I place the same content on my local machine and try to view (via the index.html file), the 3D models don't seem to render. The 3D .gltf files are located in a separate directory (sub directory) than the index.html file.

Please help...

Our WebVR/A-Frame content, which uses .gltf files for our 3D models, renders fine when view on our cloud-based server. However, when I place the same content on my local machine and try to view (via the index.html file), the 3D models don't seem to render. The 3D .gltf files are located in a separate directory (sub directory) than the index.html file. Please help...

Todas as respostas (1)

davidspriggs
davidspriggs
more options

Create your first simple A-Frame scene by pasting the following code into a new file called scene.html: 

<html>
 <head>
   <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
 </head>
 <body>
   <a-scene>
     <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
     <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
     <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
     <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
     <a-sky color="#ECECEC"></a-sky>
   </a-scene>
 </body>
</html>

load into your web browser Now remove the cube, sphere, and cylinder lines, leaving just the plane. Next, go find a model on Sketchfab that you want to use. All of the models for the WebVR Medieval Fantasy Experience Challenge should use assets from the previous Real-Time Design Challenge and are tagged with medievalfantasyscene. I’ve chosen one called Mega Scene by VitSh.

Click the Download (Free) link and choose the DOWNLOAD GLTF option (not the original Blender or FXB model). You will need to create a free Sketchfab account to download it. Your browser will download a ZIP file. Put the ZIP file somewhere near your scene.html file and extract the ZIP file. Open the code to scene.html and add a link to the scene.gltf file using the a-gltf-model element like this. Now you can move it around by adding position and rotation attributes, or change the lighting with some a-light elements. See the A-Frame docs for more details.

Note: if you don’t see the model, check in the JavaScript console. Some operating systems set the file permissions of downloads to be readable only by the current user.

Alterado por cor-el em