This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

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.

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...

All Replies (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.

Modified by cor-el