Virtual art gallery question

1

I want to make an inquiry while watching this YouTube. How to set up a pop-up window that explains the description that appears when you click a photo like this link, and a description pop-up appears when the work is clicked when you click the photo? If there is a video or article that can be referenced, I would like to refer to it.

2

Such popups can be added with HTML label extension described here: https://help.shapespark.com/hc/en-us/articles/360010148837-Extensions
This gallery additionally changes style of such popups with custom HTML/CSS code. Default popups look differently.

4

Thank you for your answer I have a few more questions. 1. Is the function that clicks when the object color changes when clicking the picture like that video is HTML? Is it included in SHAPESPARK? If it’s HTML, is there any code I can refer to?
2. During autoplay, is there a way to automatically execute in a way other than #autoplay execution command??
3. If you have done all the work, and you want to remove a tree, or remove or add a picture, should you rework the 3d file and open it again? Do I need to open it and reset the lights one by one? Can I save the lights and recall them separately?

5

  1. Changing color of an object when the object is clicked is not supported. I’m not sure how it is done in this gallery, but perhaps it is a ‘Switch to view’ extension, where a view hides the original paining object and shows an alternative version of the object that has some highlight added (object visibility can be configured per view in the editor Objects tab).

  2. To autoplay the scene without the need for the #autoplay hash in the URL, you can place the following file in your scene folder (Documents\Shapespark\SCENE-NAME): https://gist.githubusercontent.com/wrr/53d621126b71da9b977656c9ffb98653/raw/165e316d798eaac78aae4409e8f218690d45e826/body-end.html
    Note that the Starter subscription plan doesn’t allow to upload a scene with such HTML based customizations.

  3. You can update the model without redoing Shapespark editor work from scratch. Remove the tree in the 3D modelling program, and then, if you use SketchUp, Revit or 3ds Max, use the Shapespark extension Update function. If you import the file via FBX, COLLADA, OBJ or some other format, use the ‘Update’ button in the Shapespark main window. Lights and other Shapespark specific settings will be preserved.

6

Thank you. It was so much helpful. But there was one more problem. If you attach a texture png image like a photo, a strange afterimage appears somewhere. How do I fix this? I want to attach the texture png neatly.

image1
image11908×1033 151 KB

7

It looks like the surface that you apply this texture to is incorrectly oriented - with the front face towards the wall instead of the camera. Could you check it in the 3D modeling tool? After correcting it, you can disable the “Double sided” option for this material.

8

jpeg
jpeg1907×988 76.1 KB
jpeg2
jpeg21059×620 24.8 KB

Thank you. It was resolved right away! Sorry to keep asking. Like a photo, baking like a messy pixel breaks? What if the light comes on? If you turn off sky, you cannot see it, but due to the nature of the gallery, you cannot turn off sky.

9

@artincity, to fix these light leaks you can add outer ceiling and floor surfaces. Take a look at this thread: Separate floor & ceiling geometry creating bake artifacts? - #6 by wojtek

10

is the html/css code style directly in the html label? or should it be in a head-end-html file in the folder?

11

The label can use inline CSS styles: Inline CSS Explained: Learn to Add Inline CSS Style
If you would like to have more comples styles or easily share style between several labels, placing them in head-end.html will be more convenient.

1 Like