hotspot animation crash

7oo1er
Posts: 1
Joined: Sat Apr 22, 2017 8:31 pm

hotspot animation crash

Postby 7oo1er » Sat Apr 22, 2017 9:12 pm

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.

User avatar
rroux
ForgeJS Team
Posts: 126
Joined: Wed Oct 26, 2016 12:19 pm

Re: hotspot animation crash

Postby rroux » Mon Apr 24, 2017 8:12 am

Hello, thank for your report.
Your crash is under investigation!

Have a nice day!
- Raphaël

User avatar
rroux
ForgeJS Team
Posts: 126
Joined: Wed Oct 26, 2016 12:19 pm

Re: hotspot animation crash

Postby rroux » Mon Apr 24, 2017 12:12 pm

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 :)
- Raphaël

arhenc
Posts: 3
Joined: Mon Jun 19, 2017 4:50 pm

Re: hotspot animation crash

Postby arhenc » Mon Oct 09, 2017 11:55 am

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. }

User avatar
rroux
ForgeJS Team
Posts: 126
Joined: Wed Oct 26, 2016 12:19 pm

Re: hotspot animation crash

Postby rroux » Mon Oct 09, 2017 12:24 pm

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!
- Raphaël

arhenc
Posts: 3
Joined: Mon Jun 19, 2017 4:50 pm

Re: hotspot animation crash

Postby arhenc » Mon Oct 09, 2017 12:56 pm

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
}
}
}
}

User avatar
rroux
ForgeJS Team
Posts: 126
Joined: Wed Oct 26, 2016 12:19 pm

Re: hotspot animation crash

Postby rroux » Mon Oct 09, 2017 2:26 pm

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 !
- Raphaël

Who is online

Users browsing this forum: No registered users and 1 guest