reactjs - 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 对象和数组。

以下是io3d.furniture.search在反应组件中使用的方法：https ://jsfiddle.net/wo2xpb9g/

2. 如何结合 react 和 a-frame

有一个 aframe-react 项目，它将使组合 a-frame 和反应更容易https://github.com/ngokevin/aframe-react

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

3. 如何io3d.scene.getAframeElements与反应一起使用

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

有两种可能，

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

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