Photodome for 3d 360

This program does not display the photo it should be accessing. You can look at the photo on the web. It is 3D 360 topbottom 3840x3840. I did not have better luck with a 1920x1920 version of the photo. (Videos are working now. Thx.)

Please help!!! Thanks.
This doesn’t seem to be showing the code??? I’ll post the code on or run it at The photo is at


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Babylon Template</title>

     <link rel="stylesheet" href="styles.css">

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
<canvas id="renderCanvas" touch-action="none"></canvas>  


Hello can you repro in the plaground? i suspect it is a CORS issue as the source server should block calls from other origins

I do not think it is a CORS issue. The same problem happens with everything locally.

I believe there are at least two problems:

  1. PhotoDome does not seem to work at all for a 3840x3840 file; (I need the high resolution). For a smaller file 480x480 I get the photo to show. It seems to start showing at a resolution somewhere in between.

  2. MODE_TOPBOTTOM does not work for photodome. It works now for videodome.


CODE: To test this code, substitute your hi res file (to test resolutions) and your 3D 360 top/bottom photo to test MODE_TOPBOTTOM. It should play locally or online.

      var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
      var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

          /******* START: the create scene function ******/   
          var createScene = function () 
                var scene = new BABYLON.Scene(engine);
                var camera = new BABYLON.ArcRotateCamera
                    ("camera", -Math.PI / 2, Math.PI / 4, 3, 
                        new BABYLON.Vector3(0, 3, 0), scene
                var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false}); 
                camera.attachControl(canvas, true);
                scene.activeCamera.beta += 0.8;

                var dome = new BABYLON.PhotoDome
                   "Credits-3dss.jpg", //480x480 3D top/bottom
                      resolution: 32,
                      size: 1000,
                      useDirectMapping: false
                //dome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;

                return scene;
          /******* End of the create scene function ******/    

          var scene = createScene(); //Call the createScene function

         // Register a render loop to repeatedly render the scene
         engine.runRenderLoop(function () { 

         // Watch for browser/canvas resize events
         window.addEventListener("resize", function () { 

Well the texture size is not a babylon.js limitation but a webgl limitation and we can’t do nothing about it.

Can you repro the topBottom issue on the PG?

I tried to repro but it works for me:

Thanks. This helped. I still have not quite got what I need, but I can make progress now!

1 Like