Objective: to create an interactive demo using VR 360 deployed to an AWS S3 instance for testing.
Stuff that works: well, almost everything. I have a main timeline with 3 frames (because scenes don't work in VR 360 in browser) so each frame contains an equirectangular image rendered from Twinmotion at 8192 x 4096 pixels. Stage is set to that size, wrap is on, each frame has a this.stop(); action and there are clickable items on each frame. These are for the most part 2-frame movieclips, the code from these is partially obtained from the '360 interactivity in A-A 2019' blog post by Ram Kulkarni, which was very helpful indeed but unfortunately did not quite work in a browser. This somewhat modified structure does, locally at least (i.e. in test-in-browser mode and in Firefox with local file testing enabled). So for example, to add an intereactive object that on click takes you to the next frame the following works:
// add mouse handles for the directional 'direction_sign_1' movie clip
this.direction_sign_1.addEventListener(AnEvent.MOUSE_OVER, function() {
this.play();
});
this.direction_sign_1.addEventListener(AnEvent.MOUSE_OUT, function() {
this.gotoAndStop(1);
});
this.direction_sign_1.addEventListener(AnEvent.CLICK, function() {
anWebgl.root.gotoAndPlay(2);
});
And for a poster that pops up a different images on mouse over:
// add mouse handles for the directional 'poster' movie clip
this.poster.addEventListener(AnEvent.MOUSE_OVER, function() {
this.play();
});
this.poster.addEventListener(AnEvent.MOUSE_OUT, function() {
this.gotoAndStop(1);
});
(Obviously none of this is particularly complicated but there are a couple of small wrinkles that can cause periods of head-scratching, so I'm just posting this in the hope it might be of use to someone at some point).
Stuff that does not work: as I mentioned I've now got a project that seems to run pretty well, locally at least, I now want to stick it on an Amazon Web Services S3 instance just to test it / share it with a few colleagues for feedback. This particular instance works fine; for convinience / laziness / downright indolence I'm overwriting an old project, so I definitely know the bucket is ok. However, the web VR project does not display.
The reason (and, finally, my question) seems to be a file path somewhere is getting screwed up. In the browser console (Chrome, same for FF) I get: "Failed to load resource: the server responded with a status of 404 (Not Found)" and the error result is shown as:
- Code: NoSuchKey
- Message: The specified key does not exist.
- Key: assets/index//index.json
- RequestId: 2TR7X4X6WRM8FD66
- HostId: P9Fk875863jgO+wYhX0oKMWkhigTQ4GJIpvL5irgSp0RIu4Ueu/Ftc+d3IcnqJNLAshTkBdoyoc=
I think it's the // being introduced before index.json that's causing the problem, but I can't see where it's being introduced. In index.html I have: var assetPath = "./assets/index/"; and if I remove the trailing / it seems as though the browser does in fact find index.json, but it then can't find the file assets/index/Scene_1.zip because it's now looking for /indexScene_1.zip.
After some struggles with getting interactivity to work as required it's immensely frustrating to fall at what feels like the last hurdle. Any suggestions very much appreciated. Please do bear in mind I'm from the art side of the tracks, used Flash many years ago and bludgeon code from time-to-time, but the results are usually not pretty. Words of one syllable if possible please 😉
1
Reply
AdChoices