React 项目中的 3d.io api

Question

3d.io 将来会支持 React 组件吗？现在，我需要从组件中找到利用“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 方法返回可用于任何 javascript 库的纯 js 对象和数组。

在 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 并直接做出反应，这是一个示例：https://codepen.io/cassiecodes/pen/akXWjo?editors=1010

1. 如何在 react 中使用 io3d.scene.getAframeElements

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

有两种可能，

• 代替getAframeElements，将sceneStructure 从io3d.scene.getStructure 转换为自己的反应虚拟DOM。希望很快会为此发布一个社区库。

• 将 a-frame DOM 与 react 分开。这是有时用于将 react 与直接操作 DOM 的库（例如 D3）结合使用的方法......这里通过示例讨论了这种方法：https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71