Customising Material Picker section

Hello,

Many of our clients are asking us to have a different style of displaying “Material Picker” options. Some clients want the options to be docked on the left, some want it to be docked on the right, some want it to be displayed like a list with image. Is it possible to do custom CSS styling to the Material Picker options with body-end / head-end.html file ? Or is it something we can do with a different approach. @jan and @wojtek, can you please help me in this ?

The material picker spheres are 3D objects placed temporarily inside the scene. They aren’t based on HTML, so they cannot by styled with CSS. Currently there are no options, neither in the UI or set through body-end.html or head-end.html that would modify how material picker looks.

Is the styling done inside some of the Json files or JS files which are referred inside the Shapespark application ? There has to be a place where the styling has been done, right ? Else, how will the computer know how to style it.

How the material picker looks like and where it’s placed is defined inside the JavaScript viewer engine code. This part of the code doesn’t have any entrances or hooks that would allow for customization.

So, currently you cannot customize the built-in material picker. However, you could build a custom HTML-based material picker using the viewer’s JavaScript API: GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene. (Note that, such an HTML-based picker wouldn’t be available in the VR mode, because HTML cannot be rendered as a part of the 3D scene).

Hello @wojtek,

Thanks a lot for clarifying this. Is it possible to hide default Material Picker UI if I happen to build an HTML based picker on top of it ? If yes, can you tell us how to hide it?

I think your custom material picker would have to totally replace the buit-in MaterialPicker extension. There wouldn’t be any MaterialPicker extension in the scene, so there wouldn’t be any interference between your custom material pickers and built-in ones either.

OK. Understood. Many thanks for your help :slight_smile:

Hi, @nishantambekar, have you managed to make the materials displayed on the left or right side of the screen? These guys achieved something similar of having materials on the right side and I would like to achieve this as well. Plant Prefab - Configurator