Adding Images to Puzzles

Tagged: element

This topic has 14 replies, 6 voices, and was last updated 5 years, 7 months ago by Yuri Kovelenov.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
2018-05-21 at 2:40 pm #4251

aepete02
Participant

Hi,

I’m no coder, to be clear. I’m also using 3ds max, not blender. I see lots of examples that have images like material spheres, or color options on top of the 3D scene, not included in the original 3D scene.

They are obviously not in the 3D scene, but also not really clear in the puzzles interface how to add buttons. So I’m guessing these are manually input into the coding?

I’d love to add these features to my app. But not sure how

Thanks

2018-05-21 at 2:58 pm #4252

Mikhail Luzyanin
Staff

Hi! You can create an HTML elements using any visual HTML editor like https://webflow.com (we use it in our pipeline) and then add interation with it using special HTML puzzles. You will need just to add and ID on the buttons using a HTML editor and then add a click event on them with HTML Puzzles elements. You can find examples in our SDK: Teapot Heater or Recliner – they both awailable for 3ds max and has created by an artist without any line of code.

Co-founder and lead graphics specialist at Soft8Soft.

2018-05-21 at 6:36 pm #4253

aepete02
Participant

Hi,

Thanks for this.Question – can I use Illustrator to create the images I want to add and then export the CSS from that? And save over the .css file already in the folder for that application

Thanks

2018-05-21 at 7:46 pm #4254

aepete02
Participant

This seems like a really big feature that could be super useful if it was built into the app.

2018-05-22 at 7:16 am #4255

Mikhail Luzyanin
Staff

aepete02 wrote:

Question – can I use Illustrator to create the images I want to add and then export the CSS from that?

I’m not familliar with Illustrator and exporting css from it, the CSS folder that your can find in our examples and all html page elements was created in Webflow, so css was imported from it with all content. We do not provide indegration with separate elements like CSS or something else we provide integration with html site that already contains all elements like CSS. So if you can create an html page and integrate it somehow with css exported from Illustrator it will work with Verge3D.

Co-founder and lead graphics specialist at Soft8Soft.

2018-06-14 at 8:33 am #5046

Mirage_Studio
Customer

Hey,

Can you please record or PrtSc steep by step of this proses?
I’m try to do this too and it’s very confusing…

i can create an element via webflow (which i created my website with), then i need to export the html code?
and then, where i need to import the code in the app and name it?

can you make it easy for dumb people like my to get it?

Thanks a lot.
Bar

2018-06-14 at 8:52 am #5047

Mikhail Luzyanin
Staff

Hi, I created a simple video how to embed your project into webflow. We plan to create a series of tutorials about this process but little bit stuck with other tasks.
Small Video Tutorial
So, step by step:
1. Create your page using Webflow or any other visual html editor
2. Insert Embed element with the specific code (watch the video) with the name of the html file of the appliction
3. Export the whole site and extract it to the folder with the application where html of the application is located
4. Then run your index.html page.

Co-founder and lead graphics specialist at Soft8Soft.

2018-06-14 at 9:07 am #5049

Mirage_Studio
Customer

thanks a lot for that!

i will create a tutorial as soon I’ll understand how to do so.

2018-06-14 at 9:34 am #5051

Mikhail Luzyanin
Staff

Mirage_Studio wrote:

i will create a tutorial as soon I’ll understand how to do so.

Thank you, it would be a big help for us and community because we are very busy with the development.

Co-founder and lead graphics specialist at Soft8Soft.

2018-06-15 at 8:47 pm #5086

Mirage_Studio
Customer

Hey Mikhail,

so I manage to create this, which is really cool.

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:6034bba917/applications/Fan_Web_01/index.html

for now its just a 3d app in a web without any more connection.

now I want to make the buttons to the page (not a mesh in the model like the ‘ring’ app). how do I do it?
i made some elements and gave theme names, how do i make the connection?

i try to open the puzzle of the ‘Recliner’ app, it’s just open the web page, so I cant see the puzzle inside.

thank you for the help and as i said, I promise you a tutorial after that.

2018-06-16 at 9:33 pm #5091

Viktor.Rios
Participant

@Mikhail Luzyanin you mentioned the teapot in the SDK is created with 3DsMax, is there a chance to get for Blender, please?
I´m also interested on how to visually design an .html page with embedded .glTF that will do interactions at the push of (buttons).
Thanks.

2018-06-18 at 7:38 am #5097

Mikhail Luzyanin
Staff

Mirage_Studio wrote:

so I manage to create this, which is really cool.

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:6034bba917/applications/Fan_Web_01

Looks promisingly!

Mirage_Studio wrote:

i try to open the puzzle of the ‘Recliner’ app, it’s just open the web page, so I cant see the puzzle inside.

Just scroll the puzzle’s canvas little bit to the righn or click on “center” button in the left bottom corner. TO create interraction with your buttons you need to set a specific ID for each button and then use HTML puzzles to call it using this ID.

Viktor.Rios wrote:

you mentioned the teapot in the SDK is created with 3DsMax, is there a chance to get for Blender, please?

It’s already there, just check it out.

Viktor.Rios wrote:

I´m also interested on how to visually design an .html page with embedded .glTF that will do interactions at the push of (buttons).
Thanks.

We plan to make a seriaes of tutorials about how to make it, fro now you can study it for yourself usign Reciner, Teapot Heater and Farmer’s Journey demos and ofcourse ask us here on the forum if you will have a specific questions.

Co-founder and lead graphics specialist at Soft8Soft.

2018-06-28 at 2:00 pm #5299

Viktor.Rios
Participant

Yes, a tutorial series like you mentioned would be high on my interest. I´ll check out those scenes on Blender meanwhile.

2019-03-20 at 3:25 pm #13064

NaxosCG
Customer

Yes, please, a tutorial !

"1+1=3... for large values of 1"

2019-03-21 at 7:17 am #13078

Yuri Kovelenov
Staff

here it is https://www.youtube.com/watch?v=g0wTXSm5mN0

Chief 3D Verger | LinkedIn | Twitter
Author

Posts