Interaction with model part 2

[Antonio_Perez]

HI.
i´ve been watching models that are already using these kind of new utilities such as adittional information in the model… like this one ( very nice BTW )

and also some models are already uploading music … soo… how can this be done? is there a guide ? am a bit outdated…
thankss¡¡

[jan]

Hello. This was very recently released, so you are not really outdated

We delayed creating a guide, because next week we plan one more release with improvements to these interactive features. The release will allow to use font-awesome icons on the clickable spheres. Before the guide is ready, you can experiment with the features in the editor Viewer tab → Extensions list.

[Antonio_Perez]

Thanks a lot i’ll be waiting

[ntxdave]

No, there currently is no published guide but actually, it is fairly easy to do. I will pass along what I have learned:

• First, go to the Viewer tab and you will see a section where it lists the Extensions in your scene.
  Notice that for any existing extensions, there are icons for editing (icon with the pencil) or deleting (the X) them.
  
  
  
  Just below Extension frame, there is a + sign which will allow you to add a new extension. Click on it to add a new extension.
  
  Once you click on the +, you will see a new dialog box for selecting the type of extension you want to add.
  
  There are 3 types that you can add: HTML, Material Picker, and Audio. The HTML extension can be used for adding HTML and Video content. I will go into each of them below but first, for each of them, you will see a section to add an anchor.
  
  You will then get a new window for adding the anchor.
• The anchor has a Name box that will allow you to enter the text that will be shown in the scene. You can enter any character on your keyboard. Just replace the ? (or leave it if you want to use that). This is what the viewer will click on in your scene to view the content you make available. You can you words but my tip is to keep it very short if you use more than a single character (i.e. Info, or Video - again, use a single character if you can). Immediately below the Name box, you will see a Radius box with a default of 0.07. This value denotes the radius of the icon that will be added for the user to click. Values can go as high as 1.0. Lastly, you must specify where the anchor will be placed. Click on the “Click to select” text and then you will click in your scene where the anchor should be placed.
  
• Now I will present each of the types of extensions:

HTML & Video

The HTML Extension can be used to place any type of HTML content (including links to external videos like YouTube). All you have to do is put the HTML into the box where is says “Content to display…”. I do have some tips to consider:

• I have found that it is best to use an external HTML editor to create the HTML so that you can work out all of the details (i.e. formatting and etc.). Then just cut and paste into this box.
• Do not try to include local image or video files. You may only include a link to them somewhere on the Web here. If your license allows you to self host, you might be able to include a local link to them (but I have not tried that).
• Video (like YouTube) can be included but I suggest that you use the “embed” code to accomplish that.
• “iFrame” functions can also be used to control and display the content. This can be especially useful for doing something like including the YouTube video.
• In my testing to date, it appears that most all HTML functions can be included (but I have not tried everything). I did use “style” attributes in several places to control the appearance of items. I have not yet tried to including a “style sheet section” in the HTML.

Material Picker

The “Material Picker” is probably the most complicated of the extensions to use.

• First you must specify the material that you want to replace. When you click on the + icon for the “Material to Replace”, You will get this popup screen and you must then pick the material in the scene that you want to be replaced.
  
• Now you will need to pick the materials you want to use to replace the existing material.
• This is where the tricky part comes in. You will need click on an object in your scene that contains the alternative material you want to use. The way I went about this in my scene was to add an object (just a simple block object) that has the “replacement/alternative” material. You will need one of these for each of the alternatives you want to offer. Once I had added the material picker, I then hid these blocks from all views since I was only using them to supply the alternative materials.
  
  

Audio

This extension seems to be the easiest to use. You just provide the URL to link to the external audio file (again, must already be available someplace on the web - you cannot upload an audio file). You then just check the “Autoplay” if you want the audio to be played when the scene loads.

I hope all of this helps… You may see my sample here: Interactive Test

Edited on 4/23 to clean up some of the text

[Antonio_Perez]

OMG thanks a lot i truly appreciate…i¿ll give it a try and let u know what i acomplished .
And again THANKSS A LOT

[ntxdave]

Sorry @jan - I was in the process of creating my “tutorial” when you posted. It will be interesting to see what “font-awesome” icons are all about.

Edit Should have clicked on your link first. That is going to pretty neat. One icon I could not find (but it at the top of their page) is an “info” icon. Sure a lot of neat one to use though. That is pretty neat. I will need to go back and redo my sample pages.

[Antonio_Perez]

i just tested it and it works like a charmm , i just included like 3 spheres with information about web pages and like 3 spheres with color picking option … but it goes well

https://gaesvr.shapespark.com/codornices_lote_23_shapespark/

thanks a lot once more dude¡¡¡

[ntxdave]

See, it really isn’t that difficult. Here are a couple of suggestions:

• Add a couple of views. One for he exterior, and a 2nd one inside so that the user is taken inside without having to guess about how to get in there.
• Now, for the links to HTML pages, you could place the link as the src attribute of an iFrame. That way the page would be viewed inside your model. If you look at my sample page, you will see an example.

[Eric_Bjornson]

Hi Ntxdave,

Would you ever consider doing Shapespark contract work for us? If so, can you send me an email so we can discuss? eric@kithouse.ca

[jorgearq]

Hi @ntxdave, where we can find and what kind of audio file we can use? I tried to use from YouTube, Dropbox and google drive and nothing happens

[ntxdave]

I posted a reply in your Audio does not work thread………….