mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.16k stars 712 forks source link

Canvas no image #1085

Open tomotrepo opened 2 years ago

tomotrepo commented 2 years ago

Hi, I used the plugin in cordova app and per-se works well. Now, despite tickets #831 and #459, I have the following question (I've been looking at the source code for a while, but I'm not that good) so - I would like the canvas to be transparent or can be also without a picture! (if the problem is an alpha channel). The goal is that I stretched the pannellum over the CameraView and I would like to show only the hotspots (with all orientation functionalities) in-front-of the real picture below (a kind of AR). So I don't need any transparent image - just canvas of the right dimensions to see through. Regards, T

mpetroff commented 2 years ago

I don't think Pannellum is the best tool for the job, given that you're not displaying a panorama, but the following will show hot spots without an image:

<div id="panorama">
<img src="image.jpg" style="width: 100%; height: 100%; float: left;"/>
</div>
<script>
var viewer = pannellum.viewer('panorama', {
    "type": "multires",
    "multiRes": {
        "basePath": "",
        "path": "",
        "fallbackPath": "",
        "extension": "",
        "tileResolution": 0,
        "maxLevel": 0,
        "cubeResolution": 0
    },
    "autoLoad": true,
    "hotSpots": [
        {
            "pitch": -12,
            "yaw": 10,
            "type": "info",
            "text": "Test test test"
        },
    ]
});
viewer.getRenderer().getCanvas().style.opacity = 0;
</script>

You'd replace the <img> in the example with your content. If you wanted things to be more efficient, you'd disable the actual renderer instead of just hiding it, but that involves code changes to Pannellum.