Viewer api and javascript development

(Mauricesvay) #62
  • "modifying the autospin behavior": a camera auto-orbit could probably be implemented with the API. I'm interested to hear more about the kind of application you'd like to build with that.
  • "combine multiple scenes together": at the moment the Sketchfab viewer can not load more than one scene. Changing that doesn't seem trivial and would require a lot of work. It's been requested a few times in the past. We need to think about it.
  • "more control over UV placement" so you would like to offset the texture UV coordinates?

(Hakkun) #63

Thanks for your answer!

Point1, see graphic:

Point 3:
Yeah I think it is possible, so Ill give it a try.

Yes an own Loading UI as the Models are loaded into the viewer:


(Klaasnienhuis) #64

Hi @mauricesvay, thanks for reacting promptly
Consider a car configurator. The user can move around the car freely but it can be difficult to also look inside the car. It takes some experience to move the camera that precisely. For this purpose we add buttons which trigger the camera to move to a preset location: dashboard, passenger seat, back seat. And while we're at it we add a feature which transforms the model at the same time. e.g. move the camera to the rear AND open the trunk of the car in one smooth motion. This works great already with the current API. But, clients usually ask to add a smooth autospin to the scene. If there's no interaction the model starts spinning which shows off the 3D model and makes the page just look good.
Currently autospin, rotates the model. This means that the carefully crafted camera presets and my beautiful camera animation/trunk animation combo don't work anymore. The camera is animated, but since the model has rotated, the cameras end up in the wrong place.
Combine scenes
The viewer doesn't necessarily need to display multiple scenes, but the single scene needs to be able to import models from another scene. I understand it's hardly trivial but it's a feature I needed for a client project and had to use another platform for ( in my case).
offset, rotate and scale would be great to have more control over placement. There are already a few UV controls in the editor, adding the transforms makes sense as a next step. For my projects it's about placing text and logos on products but I'm sure there are many other use cases.

(Mauricesvay) #65
  • For materials, I think the best solution for now would be to have hidden geometry to store the materials you want to use. It's not optimal, but it should work. We tend to agressively remove any data that is not being used for performance. I'll add your feature request to our tracker nevertheless.
  • Keep us posted with your experiments with dynamic text. I'm curious to see how it pans out.
  • For the loading percentage, we have some internal API but it's not ready for public consumption. I'll add this request to our tracker as well.

(Mauricesvay) #66
  • Autospin the camera: I've added your request to our feature request tracker
  • Combine scene: I've added +1 for you on this feature request
  • UV control: I've added your request to our feature request tracker. We need to have this feature in the viewer before we can expose it as an API.


You can add your own loading UI and wait on the viewerready event, but accurate progress would be tricky.

(Quadriceps) #68

We would like to have somen enhancements on the Annotations.

Major thing is to be able to update the naming and texts of the annotation with the API, for example to be able to make the model multilingual.
Also it would be nice if the creation of annotations is dynamic, on the fly, or we would be able to show/hide certain annotations in moments they are not relevant..


Thanks for the feedback! I'll add it to our feature request tracker.

(Pierre Savoie) #70

Hi there, I would also be greatly interested in a update to the annotations system.
Much like Quadriceps, I would like to be able to show/hide only certain annotations at a time and also change the look of those annotations (color, font family, shape, etc).

As to a scenario involving that functionality, I am making a configurator with the API where I can show/hide certain part of a model. Problem is, when I hide a certain part, the associated annotations just float there next to nothing or isn't relevant to the new part anymore.

I just wanted to show my interest in this development and add my voice to this request so you guys can know more people want this.

(Justsleeping) #71

Is anyone making a tutorial of a basic show and hide of objects in a 3D. using the Api utility, would be very helpful.

(Jon Russell) #72

I would also be supportive of this. The annotations are a great feature but I imagine people are going to be using the API for more and more complex code/features, and this will always mean more flexibility at the sketchfab end. I am not complaining, Sketchfab is great, just adding my voice so we can make it even better.

Even the style of annotations is sometimes at odds with what is shown. I work in engineering so we normally use lines pointing to an object and minimal text, it looks really weird to put a massive number on something that is quite small/fine. I got around this recently by putting arrows and lines into the model itself and then putting an annotation on the lines or arrow:

In the future, I would like to hide the annotations and the arrows/lines so that only the model is viewable, but that is a task for another day.

Note: Remove the link above if this conflicts with the forum etiquette. I didnt want the whole text/image to appear, but I cant get rid of it without breaking the link, apologies.


Thanks for the feedback! If you put a space in front of the URL, the link will not expand into the preview, but it's fine either way :slight_smile:

(Dimetil) #74

Hello everyone, I’m trying to add a new texture, but I get the following error:
‘failed to add texture’

The url in which I have exposed the image is the following:

This does not throw me any error of the CORS, which can be ?, I appreciate the help and collaboration

(Shaderbytes) #75

i believe annotation hide/show is on the roadmap, but i dont think skinning of them is, i could be wrong. Also an event for when an annotation is clicked ( not after the animation happens for a click as it is currently )

(Shaderbytes) #76

@dimetil there is no link provided unless it was stripped. Useless without a link

(4 D Research Lab) #77

Hi @shaderbytes , I just started with trying to learn viewer api scripting and came across your examples. However, they seem to be broken today. Such as the ghostbusters car (not allowed to post links to it apparently since i’m i new user). The object selection list is not loaded correctly.
I could see that the reference to gl-matrix.js is dead, so I uploaded your example to my site and changed the reference, but to no avail.
Then I found out that @ayvlasov s cat example does still work even with the broken reference.
However, the same cat does not work if I upload it to my own site (4dresearchlab. nl/ sketchfab/ 5.htm - just remove the spaces). Same problem as with ghostbusters car and some other examples on your site.

So what might be the culprit?

(Alex) #78

Hello @4DResearchLab, my example uses local old version SketchfabAPIUtility.js of API, March 2016, - the file is in the same directory …\test2\

(Shaderbytes) #79

@4DResearchLab sorry about that , to much has changed in the api tool and the examples didnt get updated.

I updated example 2 now so it works for you :

of coarse this is now using the latest version of the APIUtility tool available on github:

Thr problem is is changed the way nodes are stored in the tool , you should be able to still use other API functions and they will not cause issues , the problem here is the old code was actually not using any api functions and just referencing into the object , incorrectly as well since the object node storage has changed.

The change became nessasary because the tool was not working well with animated models. Sadly this is because of a inconsistency in the manner the scene graph is built internally so nothing i can do about that.

Anyway i store the nodes now per type, it does default to “MatrixTransform” when callling certain api functions when not setting the target storage argument. This is how the storage declaration now looks :

 this.nodeTypeMatrixtransform = "MatrixTransform";
    this.nodeTypeCurrent = classScope.nodeTypeMatrixtransform;
    this.nodeTypeGeometry = "Geometry";
    this.nodeTypeGroup = "Group";
    this.nodeTypeRigGeometry = "RigGeometry";

    classScope.nodeHash[classScope.nodeTypeMatrixtransform] = {};
    classScope.nodeHash[classScope.nodeTypeGeometry] = {};
    classScope.nodeHash[classScope.nodeTypeGroup] = {};
    classScope.nodeHash[classScope.nodeTypeRigGeometry] = {};

the loop in the example2 html it now references into one of these storage’s “nodeTypeMatrixtransform” :

//dynamically populate the selection menu for this example
			var li_string = "";
			for (var key in sketchfabAPIUtility.nodeHash[sketchfabAPIUtility.nodeTypeMatrixtransform]) {
				if (Array.isArray(sketchfabAPIUtility.nodeHash[sketchfabAPIUtility.nodeTypeMatrixtransform][key])) {
					for (var i = 0; i < sketchfabAPIUtility.nodeHash[sketchfabAPIUtility.nodeTypeMatrixtransform][key].length; i++) {
							li_string += '<li><a data-buttonid="' + key + '" data-index="'+i+'" class="showObjectsEventTarget">' + key + '</a></li>';
				} else {
					li_string += '<li><a data-buttonid="' + key + '" class="showObjectsEventTarget">' + key + '</a></li>';
			$(".dropdown-menu")[0].innerHTML = li_string;

			//add mouse events to dropdowns
			$("#showObjectsEventParent").on("click", ".showObjectsEventTarget", function (event) {

if the model is a skinned model you will find this does not work , but you can easily fix that by rather referencing the “nodeTypeGroup” object as the matrix transforms will be empty nodes with no geometry and setting their visibility state wont do anything.

You will notice in the example two it is still exactly the same to call the toggle visibility function :



(4 D Research Lab) #80

@shaderbytes Great! This is very helpful. Thanks for the explanation and updating the example.

(4 D Research Lab) #81

@shaderbytes I have been experimenting with the development of a website plugin using your api utility ( I added interactivity and extended annotations by linking the sketchfab annotations to a sliding side panel with additional information of an archaeological object. However, now everything broke again because of the following:

Uncaught TypeError: Cannot read property ‘’ of undefined
at API.SketchfabAPIUtility.generateNodeHash (SketchfabAPIUtility.js:266)
at APIClient.eval (webpack:///./static/sources/apis/viewer/lib/APIClient.js?:195)

Apparently sketchfab changed some code in APIClient.js and now APIUtility cannot access the nodes anymore. Also affects the mdoel you updated for me earlier (