Page 1 of 1

hotspot animation crash

Posted: Sat Apr 22, 2017 9:12 pm
by 7oo1er
Hello.

I hope this is it not my typo, I checked this code many times. Specs: i4790k, 16gb, Windows8, Chrome 58.0.3029.81. No plugins. ForgeJS version 0.9.2.

This code works so:
1. Open url like domain/folder.
2. 360 pan video (first scene) works, hotspot is animated.
3. Click on the hotspot.
4. Black screen, no second scene pan video, errors in console.
5. Url is domain/folder/#scene-1&uid=scene-1 now.
6. I click reload, it reloads with domain/folder/#scene-1&uid=scene-1 url and now works second scene pan video.

This error can be fixed with "animation" removing from story.scenes.hotspots. So, no animation and no errors, transition from scene to scene works.
If hotspot track is deleted, transition from scene to scene works too, but no (of course) animation and some errors in console happens.

Code: Select all

Uncaught TypeError: Cannot read property 'position' of null
    at lc.e.lk (forge.min.js:258)
    at Ca.e.nj (forge.min.js:37)
    at Ca.e.Gb (forge.min.js:37)
    at q.e.C (forge.min.js:35)
    at oc.e.Xe (forge.min.js:283)
    at Ca.e.nj (forge.min.js:37)
    at Ca.e.Gb (forge.min.js:37)
    at q.e.C (forge.min.js:35)
    at Qb.e.sl (forge.min.js:214)
    at Ca.e.nj (forge.min.js:37)


  1. {
  2.     "story":
  3.     {
  4.         "uid": "media-story",
  5.         "scenes":
  6.         [
  7.             {
  8.                 "uid": "scene-0",
  9.                 "name": "scene 0",
  10.                 "slug": "scene-0",
  11.                 "media":
  12.                 {
  13.                     "uid": "media-video-equi-mono-quality-0",
  14.                     "type": "video",
  15.  
  16.                     "source":
  17.                     {
  18.                         "format": "equi",
  19.                         "url": "1-1.m4v"
  20.                     },
  21.  
  22.                     "options":
  23.                     {
  24.                         "autoPlay": true,
  25.                         "loop": true,
  26.                         "volume": 0
  27.                     }
  28.                 },
  29.                 "hotspots":
  30.                 [
  31.                     {
  32.                         "uid": "hotspot-0-0",
  33.                         "material":
  34.                         {
  35.                             "image": "stock.png"
  36.                         },
  37.                         "transform":
  38.                         {
  39.                             "position": { "radius": 30, "theta": 12, "phi": -2 },
  40.                             "rotation": { "x": 0, "y": 0, "z": 0 },
  41.                             "scale": { "x": 0.5, "y": 0.5, "z": 0.5 }
  42.                         },
  43.                         "events":
  44.                         {
  45.                             "onClick": [ "to-scene-1" ]
  46.                         },
  47.                         "animation":
  48.                         {
  49.                             "enabled": true,
  50.                             "loop": true,
  51.                             "random": false,
  52.                             "autoPlay": true,
  53.                             "tracks": [ "hotspot-track-0" ]
  54.                         }
  55.                     }
  56.                 ]
  57.             },
  58.             {
  59.                 "uid": "scene-1",
  60.                 "name": "scene-1",
  61.                 "slug": "scene-1",
  62.                 "media":
  63.                 {
  64.                     "uid": "media-video-equi-mono-quality-1",
  65.                     "type": "video",
  66.                     "source":
  67.                     {
  68.                         "format": "equi",
  69.                         "url": "2-1.m4v"
  70.                     },
  71.                     "options":
  72.                     {
  73.                         "autoPlay": true,
  74.                         "loop": true,
  75.                         "volume": 0
  76.                     }
  77.                 }
  78.             }
  79.         ]
  80.     },
  81.     "actions":
  82.     [
  83.         {
  84.             "uid": "to-scene-1",
  85.             "target": "viewer.story",
  86.             "method": { "name": "loadScene", "args": [ "scene-1" ] }
  87.         }
  88.     ],
  89.     "hotspots":
  90.     {
  91.         "tracks":
  92.         [
  93.             {
  94.                 "uid": "hotspot-track-0",
  95.                 "name": "Track name",
  96.                 "description": "Track description",
  97.                 "keyframes":
  98.                 [
  99.                     {
  100.                         "time": 1000,
  101.                         "data":
  102.                         {
  103.                             "rotation": { "x": 0, "y": 0, "z": 0 },
  104.                             "position": { "radius": 30, "theta": 12, "phi": -2 }
  105.                         }
  106.                     },
  107.                     {
  108.                         "time": 2000,
  109.                         "data":
  110.                         {
  111.                             "rotation": { "x": 0, "y": 180, "z": 0 },
  112.                             "position": { "radius": 30, "theta": 12, "phi": -2 }
  113.                         }
  114.                     }
  115.                 ]
  116.             }
  117.         ]
  118.     }
  119. }


Thank you.

Re: hotspot animation crash

Posted: Mon Apr 24, 2017 8:12 am
by rroux
Hello, thank for your report.
Your crash is under investigation!

Have a nice day!

Re: hotspot animation crash

Posted: Mon Apr 24, 2017 12:12 pm
by rroux
Hi 7oo1er,

We pushed a fix on the master branch to fix this!
so if you pull the HEAD of the master it should fix the issue.

The main issue was that the hotspots animations are not properly destroyed.

Have a nice day :)

Re: hotspot animation crash

Posted: Mon Oct 09, 2017 11:55 am
by arhenc
Hi! I need to implement the automatic rotation of the panorama. When the user is active, autorun stops. If the user does not work for a while, the panorama continues to rotate from the same place where the camera stopped. How to implement the animation to resume from the current location?

code example
  1. {
  2.     "animation":
  3.     {
  4.         "enabled": true,
  5.         "delay": 0,
  6.         "stoppable": true,
  7.         "loop": true,
  8.         "idleTime": 3000,
  9.         "smooth": true,
  10.         "tracks": ["director-track-0"]
  11.     }
  12.     "tracks":
  13.     [
  14.         {
  15.             "uid": "director-track-0",
  16.             "name": "Director's track #0 name",
  17.             "description": "Director's track #0 description",
  18.             "smooth": true,
  19.             "cancelRoll": true,
  20.             "keyframes":
  21.             [
  22.                 { "time": 0,     "data": { "yaw": -60, "fov": 50 } },
  23.                 { "time": 72000,  "data": { "yaw": 0, "fov": 50 } },
  24.                 { "time": 144000,  "data": { "yaw": 60, "fov": 50 } },
  25.                 { "time": 216000,  "data": { "yaw": 120, "fov": 50 } },
  26.                 { "time": 288000,  "data": { "yaw": 180, "fov": 50 } },
  27.                 { "time": 360000,  "data": { "yaw": 240, "fov": 50 } },
  28.                 { "time": 432000,  "data": { "yaw": 300, "fov": 50 } },
  29.                 { "time": 504000,  "data": { "yaw": 300, "fov": 50 } },
  30.             ]
  31.         }
  32.     ]
  33. }

Re: hotspot animation crash

Posted: Mon Oct 09, 2017 12:24 pm
by rroux
Hi arhenc,

This feature does not exist out of the box but you can code it I guess!
I would save the current keyframe when the user interrupt the director track then when I goes idle, go bac to this keyframe and play the animation from there. I do not know what is available in the api to do that but that's the idea :)

Hope this helps!

Re: hotspot animation crash

Posted: Mon Oct 09, 2017 12:56 pm
by arhenc
Thank you rroux!, another question.

When you hover over hotspot, it changes the geometry.
How to make the process smooth? Use animation?

Or maybe only so?
https://cdn.forgejs.org/samples/common/ ... mation.png

code example

"states": {
"over": {
"geometry": {
"options": {
"width": 30,
"height": 42
}
}
}
}

Re: hotspot animation crash

Posted: Mon Oct 09, 2017 2:26 pm
by rroux
The geometry is the 3D mesh on which the texture will be drawn to.
By default it is a 3D plan. But you can use a box or a sphere but it is not very useful.

I think what you're talking about is to use a sprite to animate a texture that morphs from a shape to another along the animation.
For that you have to create a sprite map like in the example you've posted before with the green circle.
Personally I work with Texture Packer to create my sprite maps, you can get what you need with the demo version :)

Hope this helps !