我在React应用程序中使用X3DOM来显示外部X3D文件
export class X3DComponent extends React.Component {
constructor(props) {
super(props);
this.x3dLoaded = this.x3dLoaded.bind(this);
}
x3dLoaded(e){
console.log('inside');
console.log(e);
}
render() {
return (
<div>
<x3d id='x3dElement' is='x3d'>
<scene is="x3d">
<navigationInfo type='EXAMINE' is='x3d'/>
<viewpoint id="viewPoint" is="x3d"
centerOfRotation='0 0 0 '
position="-1.94639 1.79771 -2.89271"
orientation="0.03886 0.99185 0.12133 3.7568"
isActive="true"
/>
<inline id="x3dInline" DEF='x3dInline' nameSpaceName="tanatloc" is="x3d" mapDEFToID="true"
url={this.props.fileUrl}/>
<loadSensor is='x3d' DEF='InlineLoadSensor' isLoaded={this.x3dLoaded} timeOut='5'>
<inline is='x3d' USE='x3dInline' containerField='watchList'/>
</loadSensor>
</scene>
</x3d>
</div>
);
}
}
我想听一下loadSensor中isLoaded发出的事件。
根据X3D规格
当所有元素都已加载时,将生成一个isLoaded TRUE事件。 (http://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/networking.html#LoadSensor)
如何使用React做到这一点?在componentDidMount之后发出此事件。
谢谢 !
最佳答案
我不认为loadSensor
已在X3DOM中实现,参见https://doc.x3dom.org/author/nodes.html。但是,您可以在内联文件上使用“简单” onload
事件:
<inline id="x3dInline" DEF='x3dInline' nameSpaceName="tanatloc" is="x3d"
mapDEFToID="true" url={this.props.fileUrl} onload={this.x3dLoaded} />
您也可以查看https://github.com/x3dom/x3dom/blob/7d8ad13c2d2c17d9fd317e27b9e121379a53407f/test/regression-suite/test/cases/inlineEvents/inlineEvents.html以获得更多示例。