We have successfully direct embedded one of our models using React framework with the help from the previous posts about react framework in this forum. But we are currently unable to retrieve a list of parameters. Are we doing something wrong here?
class SDViewer extends React.Component {
constructor(props) {
super(props);
// create a reference to the viewer container created in render
this.containerSD = React.createRef();
this.api = null;
}
componentDidMount() {
// container for the viewer
// here the reference works and the container is loaded correctly
let _container = this.containerSD.current;
// viewer settings
const settings = {
container: _container,
ticket:
'85d9977f5426033e058a60c8b81c2c91d331d5eec7bdfed66d354132539d4efb0d01bd6e5d7bc61bc8894b820fff1922d2a2e7e6b7f5883d244f93f0c9ce73daa540ccd7b6d1a1d9ccc40307c3549ff3bbce1a7e902ac438abb53b472d73f2fd2578881f8846e73c4af238f34b9725c41232a2e3129d-d34ace0dbe577c6152ee63654b9e807c',
modelViewUrl: this.props.modelViewUrl
};
this.api = new window.SDVApp.ParametricViewer(settings);
console.log(this.api.parameters.get());
}
render() {
return <div className='sdv-container' ref={this.containerSD} />;
}
The model gets loaded asynchronously, therefore the parameter definitions are typically not yet available immediately after constructing an instance of the viewer. I have updated our React example on Codepen, to demonstrate how to solve this. A snippet from this example:
async componentDidMount() {
// container for the viewer
// here the reference works and the container is loaded correctly
let _container = this.containerSD.current;
// ShapeDiver Viewer constructor settings
// Refer to https://app.shapediver.com/api for details
let settings = {
container: _container,
showSceneMode: 1 // do not show the scene automatically
};
// construct an instance of the viewer
this.api = new window.SDVApp.ParametricViewer(settings);
// register a ShapeDiver CommPlugin
await this.api.plugins.registerCommPluginAsync({
// ticket of the model as shown on app.shapediver.com
ticket: this.props.ticket,
// URL of the ShapeDiver backend system used
modelViewUrl: this.props.modelViewUrl,
// runtime id to use for this CommPlugin (you might register several)
runtimeId: 'CommPlugin_1',
// the following setting tells the viewer to wait with loading of geometry
deferGeometryLoading: true
});
console.log('ShapeDiver CommPlugin successfully loaded');
// get parameters of the model
this.parameters = await this.api.parameters.get().data;
console.log('Available model parameters', this.parameters);
// optionally change parameter values before showing the scene
//await this.api.parameters.updateAsync([
// {name: INSERT_NAME_OF_PARAMETER, value: INSERT_VALUE},
// {id: INSERT_ID_OF_PARAMETER, value: INSERT_VALUE},
//]);
// refresh (load geometry), because the initial parameter update might not have changed any values
await this.api.plugins.refreshPluginAsync('CommPlugin_1');
// finally show the scene
await this.api.updateSettingAsync('scene.show', true);
}