How it works "popup"

Hi,

Can someone help me to understand how to create transparent popup as per the link below.

(3D walkthrough demo room by Shapespark) How it works camera

I am new to shapespark and don’t have much idea how to do this, in this scene, when we go to upper floor, there is one pc, and once we click on “I” it show one transparent popups which is also change when we click on next, i want to do something similar to this, is this required some code or it will be done with the help of extension tool.

1 Like

Hello @rit2020
This feature does’t require any code to create it I used “switch object” extension. What is important in this particular case is that both - the trigger “i” and presentation have a trigger function - what it means is that you can click on “i” or on presentation itself and this makes you switch in between objects. This was achived by parenting the objects. The trigger in this case is not a default one from shapespark but importet sphere from 3D program - otherwise I would not be able to set it as a parent to the other objects.

6 Likes

Thank you for quick response, i am able to do this by clicking on trigger (imported from 3d program) but not able to do same with particular popup, like in demo scene when i click on next, it trigger next popou,

in demo scene the trigger for this extension is an empty locator (it’s invisible in shapespark) - trigger and all the popups are it’s children. So all of the objets together are triggers than.

1 Like

Hi @magda, veri nice tricks, I suggest you to include a camera movement extension for people to be in front of the info banners :ok_hand:t3:

2 Likes

Hi @magda,

You did a great presentation scene opportunities of Shapespark.

Can you share 3D avatar models with or without video faces for our promotions?

I hope that soon there will be extensions of Shapespark 3D meetings for these situations as well:

These are just ideas, and whether I will be able to realize them, depends a lot on the possibilities of Shapespark 3D meetings and end customers.

Thanks!

1 Like

thank you! I am very happy that you like our demo scene. Thank you for all your suggestions. I will send you a PM so we can disscuss about avatar models.

1 Like

Hi Magda,

Just saw the Shapespark demo scene. This looks indeed nice. I just found a problem with the connection of the reference images.

Somehow the links are reversed.

1 Like

Thank you for pointing it out :slight_smile: I also noticed that and already fixed that. My fix with some other changes should be visible for all the users soon.

1 Like

Hello all , i have a question, how u make this pop up? and make that effect disappear when i click sometimes?

1 Like

Hello @Christian_Maldonado
@magda explain it here

2 Likes

Ok ty Jorgearq lo probare de todos modos , pero creo que aun asi no me funcionara esa configuración ya que necesito que sea un evento HTML para poder analizarlo , en cuestión de que ve o hace el usuario como analitico.

Hola Cristian, no ocupas código! Es un asunto de coordinación de las extensiones, pero no es difícil, si puedo te mando un video.

2 Likes

Hi guys i was wondering how to give format to the pop up that displays text because when i use it with the html extension it just ahows a long box with the text instead of respecting Row chnge for example

You should use html coding to structure whatever you need to display :slight_smile:
For example here it looks like this:

<h2 style="margin: 10px">Interactions</h2>
<div style="max-width: 600px; margin: 10px">
<p>Interactions have an important role to play, as you are about to see.</p>

<p>Adding many types of content like texts, images, links or videos turns the walkthrough into a wonderful presentation space.</p>
<p>Create interactive art gallery labels, product descriptions with links to an online store and many more.</p>
<p>The picture shows <i>Arrangements Square Large</i> lighting device by FLOS. <a href="https://flos.com/products/pendant/arrangements/arrangements-square-large/" target="_blank">This is a link to the producer's website.</a></p>
<div style="text-align: center">
<img src="https://cdn0.shapespark.com/demo/ASSETS/flos_lamp.jpg" style="max-width: 300px; max-height: 30vh; text-align: center">
</div>
</div>
2 Likes

Awesome thanks a lot Magda =)

1 Like

Sorry, where can I download sample shapespark project data ?

This scene was only shared as a link for Shapespark users as a starting point where they could familiarize themselves with what our software is able to do before they start working with the editor. If you want to experiment on one of our scenes you can find one on your account on cloud.shapespark.com or in your in your desktop editor.