Online 3d product configurator

[Daniel_Gomes]

Hello,

I’m finishing my Electronics Engineering course and for my master thesis I’m trying to develop a 3d product configurator. I see that people already asked some questions about how to make one, and I’ve read the details but still need more help to translate what I know from other software into armory, that seems to be a good fit for this kind of project.

I’ve checked this topic Online product configurator using Armory?

I want to “build configurator of predefined items / colors (so it’s all packed in the app itself)”
So, I will use this topic as a place to get help and post updates for this project if it works out.

I’ll start with a kind of template project:

Simple object, several materials, UI to enable the user to switch between materials.
Something similar to Scooter – 3D Product Customizer, which is a Verge3d project but I want something simpler, just to understand how to develop using Armory3d.

So, features to develop:
Material Switch
UI connected to the material switch function/ability
Move camera around the object without letting it go too far or too close, have a zoom range

Any tips to develop this?

[rogper]

Hey @Daniel_Gomes!
Good to see you here!

For the camera movement, one idea that may work is:

• Place an empty on the object location
• Assing to the empty the left and right movement/rotation;
• Add a dynamic rigid body cube and parent the camera to it;
• Assing to the cube the forward and backward movement
• Create a passive rigid body around the scene to limit the cube movement
  
  
  
  Hope it helps

[Daniel_Gomes]

Progress Update #1

So, after a few basic tutorials, I managed to get a working switch material system.

Made a basic table with 3 configurable materials, when clicking on one, it updates the table material.

Node tree was quite simple to make, after a few tries with the wrong logic I managed to get this logic.
My programming side of the brain is working to figure out how to simplify the node tree to not repeat this 3 times, one per object.

@rogper Will try to implement that solution asap. Thank you for the help.

[QuantumCoderQC]

Hi!

@Daniel_Gomes

“build configurator of predefined items / colors (so it’s all packed in the app itself)”

Cool project! And seems to be very much possible with Armory.

@Daniel_Gomes

Material Switch

As I see, you have already implemented a basic version of it.

@Daniel_Gomes

UI connected to the material switch function/ability

For this you need to add a UI canvas to the scene. Then add a simple button. In the logic nodes, when the button is clicked, you can change the material on the selected object. You may use this node for checking if the button was clicked: On Canvas Element Node

@Daniel_Gomes

Move camera around the object without letting it go too far or too close, have a zoom range

Before I could suggest a method for doing this, I first have a few questions…

1. Should the camera be able to pan freely? or should it be somehow restricted to “orbiting” around a selected object?
2. Should this movement also be done through the UI or also with keyboard + mouse combinations?

Lastly, apart from Armory’s default 2D UI, there are other libraries which have much more customization options and themes, such as Koui. But for this, you need some Haxe programming knowledge since nodes don’t work as yet for these libraries.

[3D-Penguin]

Have you seen the House presenter from Kaiwas yet: https://forums.armory3d.org/t/web-presentation-at-home-with-a-little-interactive-html5/4390/3. He also offers the blend to check it out.

[Daniel_Gomes]

@QuantumCoderQC

For this you need to add a UI canvas to the scene. Then add a simple button. In the logic nodes, when the button is clicked, you can change the material on the selected object. You may use this node for checking if the button was clicked:

Will learn about UI canvas tomorrow, thank you for leading me in the right path (hopefully).

@QuantumCoderQC

Before I could suggest a method for doing this, I first have a few questions…

1. Should the camera be able to pan freely? or should it be somehow restricted to “orbiting” around a selected object?
2. Should this movement also be done through the UI or also with keyboard + mouse combinations?

1. The camera should be focused on the object, being restricted to it. I don’t want users of the configurator to look around. They should focus on the product only, while being able to check the overall aspect of it.

2. I prefer to learn both control methods, so I get a better understanding of the possibilities of this software and difficulties I might encounter while developing the final configurator. “It’s better to be a warrior in a garden than a gardener in war”

@QuantumCoderQC

Lastly, apart from Armory’s default 2D UI, there are other libraries which have much more customization options and themes, such as Koui. But for this, you need some Haxe programming knowledge since nodes don’t work as yet for these libraries.

Thank you, need to learn more about the default 2D UI, then Koui.
I’ve learned C and C++. Tinkered a bit with Python and Javascript. So Haxe/Koui shouldn’t be a big problem, just need to understand how to work with it. Time to learn…

@3D-Penguin

Have you seen the House presenter from Kaiwas

Thank you for this, will check it out later. It is good to know other people already used armory for similar ideas, so I’ll be able to check some of its game logic and maybe adapt my configurator using their ideas.

So, new small update: Now I’m able to toggle visibility of assets. this will be useful to hide/unhide objects when switching meshes.

Is there an optimized way to do this mesh switch in terms of render calls? Like if it is a car configurator, the option to switch between different types of rims. Just to understand the fastest and more memory efficient way to do it, to make app run smoothly in mobile devices on web.

When clicking the Suzanne, the diamond will appear/disappear.

Nodes for this toggle visibility are here:

[Daniel_Gomes]

So, after checking how to design a simple UI and consulting the UI_CANVAS example in the official examples page, I face an error. I’m still learning the Haxe sintax, so I was expecting this sort of stuff to happen

I understand it has to do with the “notifyOnReady” returning null or getting something returned as null that shouldn’t be null.

This is the part of the hx file that I need to fix/understand. It is the same one as the official ui_canvas hx file but I’ve adapted it to the UI elements I created and named. It should work…

I’ll also leave a screenshot of the nodeTree:

This is my UI:

[QuantumCoderQC]

@Daniel_Gomes

I cannot tell where exactly this is wrong from just the images, but it seems like “canvas” is null here…so line canvas.notifyOnReady seems to throw the error