How to interact with 360 media and Matterport models

I’d like to share an example that features two types of immersive media (a 360 photo and a Matterport model) that are able to interact with the rest of the IntuiFace XP, even if they are running in an embedded Web browser.

To make a connection between a 360 photo and IntuiFace, you need to upload your panoramic image onto a platform that allows you to add hotspots to your image. My personal favorite 360 hosting is http://seekbeak.com.
If you deal with http://matterport.com 3D virtual tours, you’ll need to use their hotspot capability called MatterTags.

By detecting what URL has been fired by the user clicking on a hotspot, you can associate a specific IntuiFace action to it.

Here is a demo that will go through this scenario.

Special thanks to @Seb at IntuiLab for revealing me this trick.

1 Like

Thanks Paolo for sharing your XP with the community. I moved your thread in the Tips & Tricks since it can help a lot of users.
I’m thinking about @Promultis, @olaf.szymanski and many others.

It´s a good solution. Unfortunaly, if you have data of sensitive nature, it´s not a solution to use the cloud/web :frowning:

We used to embed krpano 360 images converted into Flash, but I believe that for security reasons, this solution doesn’t work anymore. Technically, you could run a local web server and use something like Pano2VR to create the 360 and serve it locally. I haven’t tried it myself, but if you manage to make it work, let us all know!

Hi there,

I know this is an old topic but I am having the same problem and do not know how to fix it.

I am using the latest version of the composer (6.0.4+157) and player.

I create a standard web browser asset and load the URL into it. This works perfectly when I test it in my windows player but refuses to load/run when I play it on my Android Tablet (Samsung).

I do have Chrome loaded as my default browser on both platforms.

The Matterport scene does work perfectly when I load it manually into the chrome browser on the tablet.

Any help would be greatly appreciated.
Grant

PS. I have also tested the demo scene that Tosolini created. Works fine on my windows laptop but does not load the Matterport scene on the Android tablet.

Hi @grant.visser,

I replied to you in this other topic.

Seb

I just created this simple example that showcases how you can use Matterport 3D Virtual Tours inside IntuiFace 6.0. Quite a powerful combination.

https://www.youtube.com/watch?v=vI19n5YvFwM

4 Likes

Paolo - it appears you used an Image asset flow at the bottom populated by an excel database that had a trigger linking it to a web browser on the top. I’ve never created an excel database with images before. If that isn’t the case, what media and asset flow did you use? Also posting in FB

Hi Aubrey, you are correct. I used an XLS to populate both the asset flow below and the content above. Unfortunately I deleted the demo :frowning: but I can tell you how to do it.
You need to familiarize with the concept of data templates and the XLS IA: http://support.intuilab.com/kb/interface-assets/interface-asset-excel it’s one of the most powerful features in IntuiFace, and I use it very often.

Essentially, you create an XLS with titles, links to photo thumbnails and links to web pages (Matterport 3D model in my case). Then, using a data template, you generate automatically the asset flow on the bottom (watch @Seb webinar on this topic, as it’s worth gold). I also synced the content on the top to retrieve the correct URL inside the Web browser, every time you change thumbnail on the bottom.

Another way to do it, less elegant but still usable, is to create an asset flow on the bottom with individual thumbnails and use a trigger like ‘When Item gets in focus’ to replace URL in the web browser above.

2 Likes

Thank you for the explanation. The less elegant way was my first intuition when attempting to do it myself as I didn’t know about XLS integration. Our team is trying to formulate a database solution for clients with multiple listing/properties/contributors across the country. I see Intuiface as being the likeliest candidate. Thanks for introducing it to me! You are kind and helpful :slight_smile:

Let me know if I can help further :slight_smile:

The first run turned out great! If I can convert the exe to msi or activex for web use, our team will be very interested. I would love to integrate 3D models to Wikipedia and not the first to think so. This french developer from Github made an entire mock up that was great until hacked: http://en.volupedia.org/wiki/Main_Page

Here is my test run
https://myintuiface.intuilab.com/share/9d02a832-3ab3-419f-8723-d642a9f3088e

Thanks for your help Paolo! There are always more questions!

Nice work! Two things:

  • There is a known bug in Intuiface that prevents people to use the mouse to navigate the Matterport model properly. Use the keyboard instead (I think touch will work too)
  • Not sure about the possibility to convert your Intuiface XP into a web widget. It’d be awesome but I don’t think it can be done yet

Hi Paolo. I know this is an really old thread, but I have one question: Does the Pro plan on SeekBeak allow you to use high resolution files? Thanks!

@cullenb I’ve the Pro version and the images seem fine. This might a better question asked directly to the Seekbeak developer info@seekbeak.com (his name is Tim).

I’ve been in touch with him, and this is a non-issue. I was e-mailed an image to create a Snap. I did a drag and drop for a sample and had not opened the file in Photoshop first. The sender assured me it was a hi-res. image, but it wasn’t. I have since loaded a sharp image with no issues.

2 Likes

love it!

Here is another iteration of an XP targeted to real estate offices, which blends Matterport 3D virtual tours with other media formats. The browser asset is quite good in this regard and I can’t notice performance delays.

2 Likes

I acquired a new 3D scanner called GeoCV. Like Matterport it allows you to create 3D virtual tours. I wanted to experiment a simple touch screen integration that would allow me to see side by side the differences of the two immersive technologies, which are both web based.

Here is how I did it:

  • Created new Intuiface session
  • Opened Design Accelerators > Visual Effects > drag & dropped the Image Curtain effect
  • Replaced the demo images with two browser assets pointing to the individual virtual tours (make sure to keep the bindings intact)
  • Converted the top transparent rectangle that controlled the curtain with a small red rectangle

And here is a new way to combine two sources of immersive media with a fun touch interaction.

6 Likes

That’s pretty neat!
Next step is to have the 2 3D models camera synced :smiley: :wink:

2 Likes