# How could I create this 360 panorama transition effect using bablylon.js?

**URL:** <https://forum.babylonjs.com/t/how-could-i-create-this-360-panorama-transition-effect-using-bablylon-js/10156>\
**Category:** Questions\
**Created:** [April 19, 2020, 11:57pm UTC](https://forum.babylonjs.com/t/how-could-i-create-this-360-panorama-transition-effect-using-bablylon-js/10156 "2020-04-19T23:57:20Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 20, 2020, 5:48pm UTC](https://forum.babylonjs.com/t/how-could-i-create-this-360-panorama-transition-effect-using-bablylon-js/10156/3 "2020-04-20T17:48:49Z")

</div>

Hi,

[I made this effect in Babylon](http://axeon.fr/CLIENT/ROXIM/Montpellier/#/VRRT/index.html)

I will try to explain the process but I should say it’s tricky and required a lot of 3D skills :p…

The main point is to use high quality rendering (CubeTexture) for several hotspots on the scene. So you will have maximum quality of rendering (but a lot of images to download)

We used Unreal to

- generate the Cube Textures
- export a very basic geometry of the scene (like the bounding box of each mesh).

The basic geometry is a collision mesh and we use a standard material with a BABYLON.CubeTexture in SKYBOX\_MODE to render the current cube texture.

For example in the lightmapTexture channel :

```auto
 material.lightmapTexture = cubeTexture;
 material.lightmapTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
 material.lightmapTexture.setReflectionTextureMatrix(reflectionMatrix);
 material.useLightmapAsShadowmap = true; 

```

To animate you could write a custom shader but there’s no need since it’s much efficient to clone the collisionMesh and to make a fadeOut/fadeIn between current position and destination (sync with a camera animation)

The tricky part is the reflectionMatrix because the reflection is computed from origin so you will have to modify it depending on where you are in the scene (or where you want to go)

If **helper** is a ‘clickable point’ (i.e there’s a cubeMap available at this position) and **mesh** a collisionMesh then you can have the reflection matrix :

```auto
let distance = mesh.position.subtract(helper.position);
let reflectionMatrix = BABYLON.Matrix.Translation(distance.x, distance.y, distance.z);

```

Hope this help !

---

_[View the full topic](https://forum.babylonjs.com/t/how-could-i-create-this-360-panorama-transition-effect-using-bablylon-js/10156)._