Add hotspots to a scene.
configuration.json
{
"story":
{
"uid": "hotspots-story",
"name": "Hotspots Story",
"slug": "hotspots-story",
"description": "This is sample of hotspots",
"default": "scene-0",
"scenes":
[
{
"uid": "scene-0",
"name": "First scene",
"slug": "first-scene",
"description": "This is the first and only scene",
"media":
{
"uid": "media-0",
"type": "image",
"source":
{
"format": "equi",
"url": "01-forest.jpg"
}
},
"camera":
{
"fov":
{
"min": 30,
"max": 120
}
},
"hotspots":
[
{
"uid": "hotspot-3d-0",
"facingCenter": true,
"transform":
{
"position":
{
"radius": 300,
"theta": 0
}
},
"geometry":
{
"type": "plane",
"options":
{
"width": 60,
"height": 60
}
},
"material":
{
"image": "spot-0.png",
"transparent": true
}
},
{
"uid": "hotspot-3d-1",
"facingCenter": true,
"transform":
{
"position":
{
"radius": 1000,
"theta": 90
}
},
"geometry":
{
"type": "plane",
"options":
{
"width": 60,
"height": 60
}
},
"material":
{
"image": "spot-1.png",
"transparent": true
}
},
{
"uid": "hotspot-3d-2",
"facingCenter": true,
"transform":
{
"position":
{
"radius": 500,
"theta": 180
},
"scale":
{
"x": 2
}
},
"geometry":
{
"type": "plane",
"options":
{
"width": 60,
"height": 60
}
},
"material":
{
"image": "spot-2.png",
"transparent": true
}
},
{
"uid": "hotspot-3d-3",
"facingCenter": true,
"transform":
{
"position":
{
"radius": 700,
"theta": -90
},
"scale":
{
"y": 2
}
},
"geometry":
{
"type": "plane",
"options":
{
"width": 60,
"height": 60
}
},
"material":
{
"image": "spot-3.png",
"transparent": true
}
},
{
"uid": "hotspot-3d-4",
"facingCenter": true,
"transform":
{
"position":
{
"radius": 200,
"theta": 0,
"phi": 90
},
"scale":
{
"x": 3
}
},
"geometry":
{
"type": "plane",
"options":
{
"width": 60,
"height": 60
}
},
"material":
{
"image": "spot-4.png",
"transparent": true
}
}
]
}
]
}
}