Set Initial View based on direction?

[Allen Huffman]

I was just about to start coding my own 360 tour script when I found Marzipano. Using it, I had my first small demo up in a few minutes. Very impressive.

Is it possible to change the Initial View based on the link that sends you to that frame? For sample, say you have three rooms in a row, west to east:

A <-> B <-> C

You start in A, and the initial view is EAST, facing B. When you click to B, I'd like B's initial view to be EAST, facing C. But if you were in C and you clicked to B, I'd want the initial view to be WEST, facing A.

This is the thing that always drives me nuts on virtual tours since the view just jumps to a default.

Is this possible in Marzipano? I assume the initial view can be encoded in the link (and it just not exposed in the web editor)?

Thanks...

[Allen Huffman]

It appears "initialViewParameters" is what I am looking for:

      "faceSize": 1344,

      "initialViewParameters": {

        "yaw": 3.0095347107190893,

        "pitch": 0.17689279053197815,

        "fov": 1.5707963267948966

      },

      "linkHotspots": [

        {

          "yaw": -1.5644595003972022,

          "pitch": -0.3046084509589697,

          "rotation": 0,

          "target": "1-360_deck2"

        }

      ],

In this case, I guess I am wanting to associate the initial view settings with the Hotspot, so when it loads that image, it uses that view, not just one global view.

[Manuel Cabral]

This can be achieved by setting the view in the target scene before changing to it. The relevant code is in the `createLinkHotspotElement()` function:

    // Add click event handler.

    wrapper.addEventListener('click', function() {

      switchScene(findSceneById(hotspot.target));

    });

This should be modified to something like:

    // Add click event handler.

    wrapper.addEventListener('click', function() {

      var scene = findSceneById(hotspot.target);

      scene.view().setParameters(hotspot.new_scene_view_params);

      switchScene(scene);

    });

One would then need to add the `new_scene_view_params` to each hotspot object in data.js, like so:

"linkHotspots": [

        {

          "yaw": -0.775981148319735,

          "pitch": 0.2661802812323746,

          "rotation": 0,

          "target": "oriente-station",

          "new_scene_view_params": { "yaw": 0.1, "pitch": 0.2, "roll": 0, "fov": 0.3 }

        }

      ],

[Allen Huffman]

Thanks!

I got my first digital camera in 1996, and many years ago, I took a bunch of photos (facing North, South, West and East) of locations all around Disneyland in California. I wrote a C program to parse a text map file and produce static HTML for the tour:

http://www.disneyfans.com/dlmstour/index.htm 

In 2005, I used a one-shot mirror lens to recreate the tour using panoramas. Unfortunately, I was never able to find a web viewer so I never posted it. Marizpano does not support those ancient panoramas.

For my new photos, I am thinking of updating my old tour program to parse my map file and emit the Marzipano code. This should be a fun winter project!

Thanks!

[Manuel Martinez]

I tried this code and it doesn't let the hotspot go to the next scene, could you explain this please?

[Manuel Cabral]

Do you have a link to your code, so I can take a look?

[Manuel Martinez]

This is my index.js:

    https://gist.github.com/thriskel/3a05582b8af049e513c97b69b3db73a1

This is my data.js

    https://gist.github.com/thriskel/49394b92510b2f4f260fdb1b8b7cd06b

[Manuel Cabral]

Are you getting any error in the browser console? It would be easier to find the problem if you could deploy your code somewhere and provide a link.

[Manuel Martinez]

Do you mean the project? that would be kinda hard since is a big project, but the console error was "index.js:251 Uncaught TypeError: scene.view is not a function

    at HTMLDivElement.<anonymous> (http://127.0.0.1:52155/index.js:251:9)(anonymous function) @ index.js:251"

[Manuel Cabral]

I see. I think this should fix it. Change the following line:

scene.view().setParameters(hotspot.new_scene_view_params);

To:

scene.marzipanoObject.view().setParameters(hotspot.new_scene_view_params);

[Manuel Martinez]

Thank you very much!!!! it worked :)

[YELLX 360]

Hi,

I know this is an old post but I am trying to get this to work. I have a small test tour which I can added this code to but it is not working.

Any idea on what I have done wrong ? Thanks for any help.

www.yelllx.com/yellxpv/test

SCRIPT5007: Unable to get property 'view' of undefined or null reference

Thanks for any help.