Search code examples
javascriptreactjsdom-eventsx3dx3dom

react, x3d custom element and event listener


I am using X3DOM inside my React application to display an external X3D file

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>
        );
    }
}

I would like to listen to the event emitted by isLoaded in loadSensor. According to X3D specs

An isLoaded TRUE event is generated when all of the elements have been loaded. (http://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/networking.html#LoadSensor)

How can I do it using React ? This event is emitted after componentDidMount.

Thank you !


Solution

  • I don't think loadSensor has been implemented in X3DOM, c.f. https://doc.x3dom.org/author/nodes.html. But you can use a 'simple' onload event on your inline file:

    <inline id="x3dInline" DEF='x3dInline' nameSpaceName="tanatloc" is="x3d"
    mapDEFToID="true" url={this.props.fileUrl} onload={this.x3dLoaded} />
    

    You can also check out https://github.com/x3dom/x3dom/blob/7d8ad13c2d2c17d9fd317e27b9e121379a53407f/test/regression-suite/test/cases/inlineEvents/inlineEvents.html for more examples.