1. A concise explanation of the problem you’re experiencing.
I’m trying to create a normal 360 viewer within cesium environment, and is wondering if this is something other people has already tried?
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
I haven’t started the code yet. But I have experience in building a customised 360 viewer with lazy loading mechanism in threejs, and wanted to move that to cesium.(either directly if possible or reproduce it in cesium)
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I’m trying to create a similar effect to Google street view within my project(or a better example would be matterport as I wanted to create something indoor), where I have got buildings with its interior structure loaded in cesium, and wanted the user to click a button on the building to fly the camera into the building and display the interior 360 photo.
4. The Cesium version you’re using, your operating system and browser.
Using the cesium 1.55, with both PC and mac, mostly on chrome(sometimes firefox)
I’ve done some research before asking this question, but couldn’t find much useful information.
I wonder if this is something others have already achieved?
Can you tell me a bit about the ThreeJS version you have? Do you have a screenshot or links to it? How does it work?
If it’s just a matter of a textured sphere around the camera, you should be able to do the same thing in CesiumJS by creating a sphere and applying the material to it, and then fixing the camera’s reference frame to its center. Let me know if that helps!
As we want to load hi res images, we could not use equirectangular formats as it will load very slow.
So we went with cubemap format but also need to divide each side of the image to smaller blocks to speed up the loading.
It loads the low res version first, then after the hi res one is downloaded, it will replace the low res one. In high speed internet environment, it will not appear as the change is too fast.
This is basically what other 360 web pages are doing.
I can see how the sphere would work in cesium, and this will lead to the same issue we had with three which is the speed of loading hi res images.
So I would want to explore the option to do something similar in cesium.
I tried to create six planes to construct the cubemap meshes to show cubemap images, but having little knowledge in positioning objects in cesium led to an issue.
I need to place a vertical plan in relation to the base plane, but the base plane is being placed at the spot using “degrees”.
How would I place the vertical plane in relation to the base plan to construct two perpendicular planes?
because, when I place the vertical plane in place, it has to use degrees, but the relative distance between the two plane is defined by “meters”
So，I couldn’t figure out the way to do so in cesium as there are two units working in parrallel.
You should be able to specify the dimensions/coordinates/position as a Cartesian3. Alternatively, it could also be a post process effect, that’s always rendered relative to the camera, (I believe this is how the Skybox in Cesium works, see https://cesiumjs.org/Cesium/Build/Documentation/SkyBox.html). It might be worth taking a look at the source for how that works:
You can also replace it with your own 6 images, if that works. If that doesn’t help, can you put together what you have so far in a Sandcastle code example (https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html) that I can run and help you figure out the issue?