How add panoramic scenes(generated by pano2vr) to Cesium App？

jingru1994 · July 20, 2018, 6:55am

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
code1：
    var clickHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    clickHandler.setInputAction(function (movement) {
        var pickedObject = scene.pick(movement.position);
        if (Cesium.defined(pickedObject)) {
            var type = pickedObject.id._name.slice(0, 3);
            var number = pickedObject.id._name.slice(3, 4);
            if (type == 'panoramicPoint') {
                $('#panoramaMode-div').animate({height: 'toggle'});
                // *1 create the panorama player with the div container
                var pano=new pano2vrPlayer("panoramaMode-div");
                // *2 add the skin object
                var skin=new pano2vrSkin(pano);
                // *3 load the configuration
                pano.readConfigUrlAsync("Source/pano/pano.xml");
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
The code's function is show the panoramic scene when I click entitis that named after 'panoramicPoint'.
The *1,*2 and *3 is the code that using to show panoramic scene in div.
When the program runs to *3 row, the error occurs.

code2：
<script type="text/javascript" src="Source/pano/pano2vr_player.js"></script>
<script type="text/javascript" src="Source/pano/skin.js"></script>
The code writed in Index.html to support showing panoramic scenes.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I want to achieve that pop up a div when I click an entity,and show panoramic scenes in the div. But when I add codes that load panoramic scenes,the error occurs.I have no ideas about the error.Is there a conflict between the CesiumJs and pano2vr_player.js？

4. The Cesium version you're using, your operating system and browser.
Cesium version:1.47
browser:Chrome

Gabby_Getz · July 24, 2018, 5:41pm

Hi jingru,

The two libraries shouldn’t be incompatible, especially if you are using them on different HTML elements.

You may want to make sure the picked object is an entity:

if (Cesium.defined(pickedObject) && (pickedObject.id === entity))

``

and use the property system instead of the private _name member:

pickedObject.id.name.getValue(scene.clock.currentTime);

``

If that’s not the solution, is it possible to use the unminified build of Cesium? It will give a more description error stack.

Thanks,

Gabby

jingru1994 · July 25, 2018, 2:40am

Hi Gabby,
Thanks for your reply.
The problems you pointed do need to pay attention, thanks for your suggestions.In that determine statements:
if (Cesium.defined(pickedObject) && (pickedObject.id === entity))
The entity is an instance of Entity, the id of the entity is unique, but I want to make sure picked object is an entity, the code seems to be not suitable.How could I modify the code？
But the error is not caused by those problem.If I didn't write the *1,*2 and *3 codes, the program wouldn't occur the error.
Actually I have solved the problem, but this solution may lead to new problems.
The sentence 'o instanceof HTMLVideoElement' in line 478 of Cesium.js made the 'Right-hand side of 'instanceof' is not an object ' error occur. I set breakpoints and I found that the HTMLVideoElement changed from 'ƒ HTMLVideoElement() { [native code] }' to 'null' after the line*3 ran. Then I searched 'HTMLVideoElement' in pano2vr_player.js, and I found '... ,a:HTMLVideoElement=null, ...'.I delete the 'a:HTMLVideoElement=null,' and the error no longer occurs.But I didn't know the function of that sentence, it maybe lead new error in the future.
Thanks again for your reply.
Best,
Jingru