Paintables can be used to let the client/browser draw graphics like SVG onto the 3d model.
See detailed Paintables description for more info.
The new convenience function Viewer.autofocusActiveCamera
can be used to quickly "re-center" the camera to show the whole scene.
It also adjusts some properties of the camera controls like panning sensibility, wheel precision etc. to gain more consistency in the usability of 3d models regardless of their size, scale, etc.
All built in parameters and events thrown by any part of the viewer are now exported by the classes Parameter
& Event
which simplifies usage as there's no more need to use "magic strings" in your code.
Before:
const spec = {
variants: {
dirtbike: {
elements: {
Bumper: [
/* ... */
],
},
parameters: {
'Bumper.material.color': '#FF3200', // <-------
},
},
},
};
// ...
viewer.on(
'sceneProcessingEnd', // <-------
scene => {
/* ... */
}
);
await viewer.bootstrap();
viewer.variantInstances.commitParameters({
'Bumper.material.color': '#E45115', // <-------
});
Now:
const spec = {
variants: {
dirtbike: {
elements: {
Bumper: [
/* ... */
],
},
parameters: {
[`Bumper.${Parameter.MATERIAL_COLOR}`]: '#FF3200', // <-------
},
},
},
};
// ...
viewer.on(
Event.SCENE_PROCESSING_END, // <-------
scene => {
/* ... */
}
);
await viewer.bootstrap();
viewer.variantInstances.commitParameters({
[`Bumper.${Parameter.MATERIAL_COLOR}`]: '#E45115', // <-------
});
Even though the new code may look a little more "convoluted" at first glance, it prevents errors due to typos & misspellings and simplifies writing the code as it allows the IDE to give you code completion. Also you can "browse" through the available built in parameters and events within your IDE without having to open the docs.
The following functions have been changed to return an asynchronous promise instead of a synchronous return value:
commitParameter
& commitParameters
functions like Variant.commitParameters
, Element.commitParameters
etc.show
, hide
, toggle
& toggleHighlight
of the classes Element
& Variant
This change brings our Viewer API more "in line" with how the underlying Babylon.js core actually works and therefore allows us greater flexibility for future changes.
Generated using TypeDoc