Material name under Sample

[Random]

Is it possible to add a material name under, in or above a sample?

Being able to select color options is pointless if people don’t know what the option is called.

[jan]

No, this is not possible. The material picker spheres are rendered in 3D, and positioning flat or 3D texts of different lengths on top of them would be quite an undertaking.

What should be possible is to display a message with a selected material name in a corner of the viewer when the user selects a material. For example: ‘Gray marble selected’. It would require naming the materials in a user friendly way. Would it be an acceptable solution for you?

[tim]

if not for @Random for me it would!
But please as an electable option.

[Oswald]

Yes @jan that would be an acceptable solution. But as @tim said, please make it an electable option.

[jan]

Please see this example: 3D scene

This scene uses the following custom body-end.html file to show a name of the selected material. You can place this file in your Documents\Shapespark\SCENE_NAME\ folder to have the same functionality.

[JOHN]

Hi Jan,

Could you explain how do this. It is not working for me.

Thanks

John

[jan]

@JOHN open a raw version of the file in your browser: https://gist.githubusercontent.com/wrr/822605c2bb581e75bb2cecfc72fe27d5/raw/2a3423b9ee46ebbcecb6d719ee794595f3c8242c/body-end.html, right click and select Save As, select a folder with your scene (it is in Documents\Shapespark\SCENE_NAME) and make sure the saved file is called body-end.html (by default a browser should suggest this name). Does it work?

[Jerry]

Hi Jan, regarding the custom material display html, I gave it a try but it was unsuccessful, and got this message instead. Is this feature not available to those on basic plan? also, it would be amazing if this could be a feature as @Random suggested. When you upload different textures which looks alike, its difficult to tell it apart when you have to choose it from the material picker spheres.

[jan]

Yes, body-end.html can be uploaded only in the Standard and Plus plan. This is because custom HTML allows to brand the viewer and such branding is not available in the Starter plan.

[VirtualTour3D]

Hi Jan,
I have copied your body-end file into the main folder of my scene but I still do not see any names come up when selecting the different materials. These are the files I have

Have I done something wrong? Project is here: 3D scene
Thank you

[VirtualTour3D]

I think I found my error I needed to put it in the actual folder in my documents. I have done that and rebundled but still see no names. Any advice or assistance would be greatly appreciated.

[kamil]

Hi!

Example script is using depreciated API function.

viewer.setMaterialForNode has been replaced with viewer.setMaterialForMesh

Here is updated version of the script with correct function call:

<style>
#banner {
   position: absolute;
   top: 30px;
   text-align: center;
   font-size: 3em;
   width: 100%;
   z-index: 10;
   visibility: hidden
}
</style>

<div id="banner"></div>
<script>
(function() {
  var messageId = 0;

  function hideBanner(bannerElement, messageIdArg) {
    return function() {
      // Hide the message only if it wasn't replaced with a new one.
      if (messageId === messageIdArg) {
        bannerElement.style.visibility = 'hidden';
      }
    }
  }

  function showMessage(message) {
    var bannerElement = document.getElementById('banner');
    bannerElement.textContent = message;
    bannerElement.style.visibility = 'visible';
    messageId += 1;
    setTimeout(hideBanner(bannerElement, messageId), 4000);
  }
  var viewer = WALK.getViewer();
  viewer.onSceneReadyToDisplay(function() {
    var setMaterialForNodeOriginal = viewer.setMaterialForMesh;
    viewer.setMaterialForMesh = function(material, node) {
      setMaterialForNodeOriginal.apply(this, [material, node]);
      showMessage('material: ' + material.name);
    }
  });
}());
</script>