3d.io api at React project

Question

Does 3d.io support React components at future ? Now, I need to find dom element utilized "ref" from component to retrieve io3d objects.

  render () {
    // this.props.elements is the state from getAframeElements
    if (this.props.sceneId !== '') {
      this.props.elements.forEach( (item) => {
        this.refs.scene.appendChild(item)
      })
    }
    return (
      <a-entity ref="scene">
      </a-entity>
    )
}

Do you have any guides how to use 3d.io at React project ? Or I need to use document.querySelector after componentDidMount event at React.

Answer 1

A few things here:

1. How to use react and 3d.io

Most 3dio-js methods return plain js objects and arrays that you can use with any javascript library.

Here's how you could use io3d.furniture.search in a react component: https://jsfiddle.net/wo2xpb9g/

2. How to combine react and a-frame

There is the aframe-react project that will make combining a-frame and react easier https://github.com/ngokevin/aframe-react

As of newer versions of react it seems possible to combine a-frame and react directly like you've done, here's an example: https://codepen.io/cassiecodes/pen/akXWjo?editors=1010

3. How to use io3d.scene.getAframeElements with react

getAframeElements is a convenience method which converts sceneStructure into real a-frame DOM nodes. In react projects, real DOM nodes are generated by react itself.

There are two possibilities,

• Instead of getAframeElements, convert sceneStructure from io3d.scene.getStructure into react virtual DOM yourself. Hopefully a community library will be published for this soon.

• Keep the a-frame DOM separate from react. This is the approach sometimes used to combine react with libraries such as D3, which directly manipulate the DOM... that approach is discussed with examples here: https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71