If you need the thumbnails to match a configuration I would fire off a batch of WebGL renders so each configuration has an image attributed to it and we can query the Layers API for those images.
It should be a matter of simply making a GET request to a URL similar to something like: https://{ENV}.threekit.com/api/layers/layer?bearer_token={TOKEN}&assetLayerConfiguration={CONFIG}&assetId={ASSETID}
A couple of things to note:
If you are making this request from the browser, make sure your bearer token is the public token authorized for the domain.
The assetLayerConfiguration will have to be encoded and stringified JSON: encodeURIComponent(JSON.stringify({key: value}))
Finally, this API will return an object similar to the following:
we need to share the screenshot of the configured product along with the BOM. we have hosted the code on the github. Can you please suggest how we can get the snapshot of the configured product. i am not able to find player.snapshotAsync function.
I have edited your post to remove the link to your in-development project - Will
Hi Prashant, did you see the post directly above yours?
If you create webgl renders from the platform, it will create images of all your available configurations. Then using the layers API you can grab them by sending a config along with the call. Otherwise you can create a data-encoded image which you can do whatever you’d like:
let image = new Image();
let imgSrc = await player.snapshotAsync();
image.src = imgSrc;
// Either append the image or save it somehow
document.body.appendChild(image)
Ah, yes I see now, the player variable is dependent on what you called your player in the embed promise. See the code below for reference and replace player with what you have the player called.
The snapshot api will capture the image from current player canvas so you may want to switch to a specific or frame the camera before you take the snapshot
If you need specific cameras or viewpoints, you should investigate the asset-jobs technique to generate images and then use our files API to retrieve them. There is more information in the thread I linked.
Hello @Will,
Nice to see you, you are like everywhere at this forum… I have a question, Do I have to create a Layer first?
What I mean is I am trying to do an endpoint using nodejs to retrieve a image like a thumbnail or snapshot, I am trying this solution with postman because code is somewhat easy but isn’t working for me, using postman… my bearer_token is the one I just created, assetLayoutConfiguration its just a color parameter {“Color”: “Blue”} and the assetID I went to assets and copy the assetid of the asset url.
and I am retrieved this { "status": 404, "code": "layer_not_found", "message": "Layer not found" }
Any thoughts on that?
Hey Carlos, you don’t necessarily need to create a layer. Can you let me know what endpoint you are trying to hit and what the body of your API call looks like?
There are a number of approaches to take that will give you a thumbnail or snapshot of the player. What are you trying to accomplish? I just want to make sure I send you in the right direction
Got it. The layers service can do a lot - but, like you said, it is dependent that the ‘layer’ you are trying to retrieve has been created already (I misremembered in my earlier post). It’s important to note that a ‘layer’ can refer to several things:
A layer in a layered render
A complete render
An AR file
If you are trying to capture/create a render or snapshot of an item (and have not created any renders on-platform) you will have to follow a different path, you have two options.
Option #1 - create a snapshot from the player API. This can be done in several lines of code. Keep in mind, this will capture and create an image of exactly what is in the player at that moment. If you have a certain angle in mind, set a camera position before creating the snapshot.
Option #2 - Server side approach. You can create renders by hitting our asset-jobs API
I think either of those may be a better option for you. Let me know if this is helpful.
@Will ,
I was about to post a thread but I think it is better to place questions here.
My approach is to create a snapshot using nodejs, the instructions in my mind are the following:
I am stuck on the first point, I am getting 403 forbidden and I already added the information, maybe the project has a miss on the configurations?
Bearer token accepts localhost domain but isn’t working… how do I check if the endpoint is working?
Project is: SCS unlimited.
Can you please elaborate on what you are trying to accomplish? If you are trying to create a snapshot, you can use the Server side approach by hitting our asset-jobs API, which renders an asset using WebGL - what exactly are you trying to do with the layers API?
For the unauthorized issue - when you are using our Server-Side APIs you must use a private token, not a public token.
The asset jobs endpoint: https://preview.threekit.com/api/asset-jobs/:assetId/render/webgl/image?cache=[cache]&wait=[wait]
Will, thanks for your patience.
The private token worked for me, now I am trying to retrieve layer’s snapshot…
First I created the layer, here’s the output:
Can you let me know why you are using the layers service rather than the asset-jobs API I suggested? I want to make sure I give you the right resources.
I am trying the approach right now, bearer token should be private too, right?
I am fetching 403 error with nodejs, let me work further and I will giving feed back.
the ID that is in the files array is the FileID that you just created. If you would like to see the information on that file, you can use that ID in an endpoint like this: https://preview.threekit.com/api/files/${FILE_ID} which will give you JSON about the file:
