React项目中的3d.io api

Question

3d.io将来会支持React组件吗？现在，我需要从component中找到使用"ref“的dom元素来检索io3d对象。

​

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

​

你有关于如何在React项目中使用3d.io的指南吗？或者我需要在React的componentDidMount事件之后使用document.querySelector。

Answer 1

这里有几件事：

1. 如何使用react和3d.io

大多数3dio-js方法都返回纯js对象和数组，您可以在任何javascript库中使用这些对象和数组。

下面是如何在react组件中使用io3d.furniture.search：https://jsfiddle.net/wo2xpb9g/

1. 如何组合react和a-frame

有一个aframe-react项目可以使组合a-frame和react变得更容易https://github.com/ngokevin/aframe-react

在react的较新版本中，似乎可以像您所做的那样直接组合a-frame和react，下面是一个示例：https://codepen.io/cassiecodes/pen/akXWjo?editors=1010

1. 如何在react

中使用io3d.scene.getAframeElements

getAframeElements是一种将sceneStructure转换为真正的a帧DOM节点的便捷方法。在react项目中，真正的DOM节点是由react本身生成的。

有两种可能性，

• 而不是getAframeElements，你可以自己将sceneStructure从io3d.scene.getStructure转换成react虚拟DOM。
• 将a-frame DOM从react中分离出来，希望很快就能发布社区库。这是有时用于将react与D3等库结合使用的方法，这些库直接操作DOM...这里用例子讨论了这种方法：https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71