3D Quiz Application with Verge3D and Blender

Tagged: 3D Quiz

This topic has 13 replies, 3 voices, and was last updated 3 years, 2 months ago by sebastiann.

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

Author

Posts
2020-10-28 at 2:35 am #34658

sebastiann
Participant

Hi everyone,

I would like to create a 3D Quiz Application with Verge3D and Blender.

What I want to create is a 3D model of the Earth that is cut in half. Inside the Earth you will see the different layers of rock that are available to see and select. The user will be asked a series of questions asking to select the layers of rock inside the Earth. For each question the user has to select the correct layer of rock on the 3D model of the Earth.

Once all questions have been answered, there will be a screen at the end to indicate how many questions the user got correct. All answered questions will indicate the correct answer next to them.

Here is an example of how this 3D quiz may look like:

What I am wondering is, how may this 3D quiz app be created?

I was thinking of using plain old JavaScript to create this. Is php necessary for something like this? Perhaps the whole thing can be achieved with Verge3D, Blender, and JavaScript. Would TypeScript, Vue.js, or Alpine.js be necessary? What about Three.js? Would I need to be experienced with that library?

I’m looking for some advice and direction on how to go about creating this 3D Quiz.

I can create the 3D model of the Earth in Cinema 4D and then export it to Blender and render it using the Eevee render engine. From there I can use the puzzles editor to create some basic interactivity and then perhaps use object oriented JavaScript to create the rest of the interactivity.

Is this the right approach? Can you please offer me some guidance on whether I’m on the right path?

Thank you.
Sebastian N.

Attachments:
You must be logged in to view attached files.

2020-10-28 at 2:04 pm #34668

Yuri Kovelenov
Staff

Hi Sebastian,

sebastiann wrote:

I can create the 3D model of the Earth in Cinema 4D and then export it to Blender and render it using the Eevee render engine. From there I can use the puzzles editor to create some basic interactivity and then perhaps use object oriented JavaScript to create the rest of the interactivity.

This looks like a good approach! There is no need to employ server-side.
You might check out the demo called Elearning in Verge3D examples. Here is another app which looks very similar.

Chief 3D Verger | LinkedIn | Twitter

2020-10-29 at 12:18 am #34688

sebastiann
Participant

Hi Yuri!

Thank you for writing back to me. It is very much appreciated.
I will go ahead and get started with this project.

From my understanding, Three.js can be integrated with Verge3D.
Can this integration be made with the Freelance License of Verge3D for Blender?

Best,
Sebastian N.

2020-10-29 at 7:22 am #34697

Yuri Kovelenov
Staff

In fact, Verge3D is based on Three.js, so you can use the API of the latter without linking the original library.

Chief 3D Verger | LinkedIn | Twitter

2020-10-30 at 12:41 pm #34774

sebastiann
Participant

Hi Yuri,

That is amazing! Thanks for letting me know.

Best,
Sebastian N.

2021-09-09 at 5:08 am #44417

sebastiann
Participant

Hi everyone,

So after some time, I decided to go ahead and try to do this quiz.

This is what I have so far:
https://sebastiann88.github.io/3d-earth-quiz/

I have a few questions:

1) How can I get the interface to change while not having to reload the 3D model?
2) How can I get the user to select the parts of the earth?
3) How can the interactivity be implemented in Verge3D to change the end result of the quiz, i.e. the score. This needs to be dynamic and change based on the correct selections made.

I would appreciate some help and advice with this.

Best,
Sebastian N.

2021-09-09 at 4:02 pm #44471

sebastiann
Participant

I got the questions to load on the same page. Now I just need to figure out how to select the 3D model and create the results page.

2021-09-11 at 4:59 pm #44530

xeon
Customer

Hi Sebastiann,
I reviewed your work in progress. I don’t believe there is any reason to have to reload scenese at all based on your object or need to have questions answered and track progress.

Depending on what version of Verge you are using…there is no reason to even use CSS or HTML.

You might want to try Version 3.8.5 (beta) to make it without css/html.

If you are wanting to keep the CSS/HTML overlays…then one simple project is all you need. The earth…if its 3D object is broken into separate objects for each “core”/part…then and on click and on hover will give the user all the info they need to select the object.

A simple step / if look will allow you to sequence through the questions following each click. There would be no need for a submit button. If you want a secondary click…you can give them a 3D button for submitting or a next button.

I will see if I can get some time to create a simple demo you can have.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-09-11 at 5:23 pm #44533

xeon
Customer

The e-learning demo as previously mentioned is a good starting point for learning how to lock non-html text labels to the camera.

Where things get overly complicated based on your existing demo is the STEP procedure. Since there is no animation this might be a bit overkill but it will allow you to step through the questions.

So the question now is the QUIZ functionality. Do you need the quiz to capture the persons name, store it to a Database and keep record of the score or is this more of a repeatable self Quiz where the score is just for the end user and to allow them to know when they have mastered the subject?

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-09-11 at 8:09 pm #44536

sebastiann
Participant

Hi Xeon,

This quiz was meant to be just on the front-end, meaning it was meant to be a repeatable self-quiz. Perhaps it would be interesting if there would be a back-end involved.

Anyway this was just an experiment to see if it was possible to make a 3D quiz with Verge3D. I’m sure it’s possible, but I would need to be more experienced with JavaScript and perhaps Three.js to execute on the idea.

In my experience, I found that I had trouble figuring out how to write out the JavaScript to get this to work.

If you would like to show a demo yourself of something similar you had in mind, feel free to share it. I would be happy to see a 3D interactive quiz working with Verge3D.

Best,
Sebastian N.

2021-09-12 at 6:03 am #44539

xeon
Customer

OK…here is a rought sample of what I think you are trying to do.

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f2f27a4091/applications/earth_quiz/earth_quiz.html

I am happy to send you the entire project (Blend files and application/puzzles). This was done in verge3d 3.71.

If you are interested email me at xeonjcase@gmail.com in all its about 2.6MB.

I didn’t spend any time trying to make the earth look good or even worry about geometry…I brut forced the puzzles but its pretty simple so not too much to worry about.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-09-12 at 1:46 pm #44555

sebastiann
Participant

Hi Xeon,

That’s amazing. You got it to work, incredible!
I would love to see how you built this 3D quiz.
Thank you so much for taking the time to help me out.

Feel free to send me the files at: sebastian@skylightdesigns.ca.
I’ll send you an e-mail as well.

Well done!

Sebastian

2021-09-12 at 3:20 pm #44559

xeon
Customer

Hi Sebastiann,
My previous post has the attachment but just in case, I have emailed it to you as well.

Good luck.
Xeon

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-09-14 at 2:33 am #44607

sebastiann
Participant

Hi Xeon,

Thank you for the files, after our e-mail exchanges and your help, this is what I put together:

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:6d5e62bb2d/applications/earth_core/index.html

Hope you like it.

Cheers,
Sebastian N.
Author

Posts