Click events on 3D Objects

21

Hi @jan, thanks again.

I did host now the textures from external sources our own server, but I got an issue, whenever I use my custom material picker, it seems like it removes the material. like this screenshot below:

PNG
PNG1320×842 172 KB

here’s our project link : https://smartview-media.shapespark.com/elwood-234_with_custom_menu/

…
For this one

var viewer = WALK.getViewer();
viewer.onSceneReadyToDisplay(function() {
var setMaterialForNodeOriginal = viewer.setMaterialForNode;
viewer.setMaterialForNode = function(material, node) {
setMaterialForNodeOriginal.apply(this, [material, node]);
alert(material.toSource());
showMessage('material: ’ + material.baseTexture.name);
}
});

I’ve use the material.baseTexture.name and I couldnt make it appear anything, what are the methods inside material? my goal is to show the base texture name instead of the material name.

Thank you!

22

@Half_stack can you configure the server to return one of the following two headers with texture related responses:
Access-Control-Allow-Origin: smartview-media.shapespark.com
or
Access-Control-Allow-Origin: *
Without such header browsers won’t allow the textures from your server to be used in WebGL.

1 Like
23

@jan I just did add the following header response on the server:

Access-Control-Allow-Origin: smartview-media.shapespark.com

I’ve used this http checker to check if the header response is included: https://www.webconfs.com/http-header-check.php

this is the url for one of the texture : https://justcaravansaustralia.com.au/sample/textures/floor1_156_parquet_medium_color_texture.jpg

and our project url : https://smartview-media.shapespark.com/elwood-234_with_custom_menu/

Still it does’nt work.

Thanks @jan

24

It looks like CloudFlare that your server is using still returns a cached texture without this header. When I inspect the header in the Network panel of the browser debug console (F12) the header is missing and there is a cf-cache-status: HIT header that indicates that the response is served from CloudFlare cache. If I open the texture with some string added to the URL to bypass the cache, like: https://justcaravansaustralia.com.au/sample/textures/floor1_156_parquet_medium_color_texture.jpg?foo=bar the header is present.

You can wait until CloudFlare cache clears, or force CloudFlare to refresh the cache.

1 Like
25

Tried to replace the image path with the foo=bar querystring to test the texture picker

-https://justcaravansaustralia.com.au/sample/texture/floor1_156_parquet_medium_color_texture.jpg?foo=bar

still won’t work. https://smartview-media.shapespark.com/elwood-234_with_custom_menu/

Appreciate all the help @jan

26

I’m sorry, the header I asked you to configure is incorrect, because the URL has to include protocol:

Access-Control-Allow-Origin: https://smartview-media.shapespark.com

instead of Access-Control-Allow-Origin: smartview-media.shapespark.com

Please also add crossorigin="anonymous" property to html <img> elements. In case of your menu it will look like this:

<img class="textureSelect" targetarea="FLOOR1" roughness="img" metallic="0.2" bump="null" roughnessCode="156_roughness"
                 src="https://justcaravansaustralia.com.au/sample/textures/floor1_156_parquet_medium_color_texture.jpg?foo=bar"
                 id="floor1_156_parquet_medium_color_texture" crossorigin="anonymous"/>
1 Like
27

Thank you @jan, It solved my problems for the textures.

I have 2 questions for the API
Is there a way to target this for the custom material picker.
correction

Also I plan to create a separate button to trigger the same functionality with this arrow:
openclose
this would make our custom picker uniform with the separate button, just want to ask what function do I trigger to show and hide similar with that arrow on that screenshot.

Thank you so much

28

  1. You can set these material properties in the following way:

    var material = viewer.findMaterial(‘someMaterialName’);
    material.baseColorTextureCorrection = true;
    material.baseColorTextureContrast = 0.8;
    material.baseColorTextureHslOffset.h = 0.1;
    material.baseColorTextureHslOffset.s = 0.2;
    material.baseColorTextureHslOffset.l = 0.3;
    material.setUniforms();

  2. We are finalizing a new Shapespark release that will add functions to hide menu via API. We are adding a property Viewer.menuVisible that allows to set and get the menu visibility. We are also adding Viewer.onMenuVisibilityChanged(callback) to allow to synchronize the visibility state of custom menu elements and built-in elements.

2 Likes
29

@jan Thank you :smiley:

Looking forward for the new release! :fire:

30

Any chance you will be adding any options that allow us to trigger menu options based on a users location in the model?

31

There are two options that could allow to customize menu based on a user location (See this doc):

  • You can listen for notifications when the user switches to views using right-top menu.
  • You can query camera x.y.z location

Shapespark doesn’t have semantic information about a model (room names, room boundaries, etc.), so it is not possible to for example get notifications when a user enters a kitchen.

1 Like
32

@Half_stack can you look into this on Monday please :slight_smile:

Thanks Jan!

1 Like