reactjs - React 项目中的 3d.io api

Question

3d.io future 会支持 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 并像您所做的那样直接使用react，这是一个示例:https://codepen.io/cassiecodes/pen/akXWjo?editors=1010

1. 如何将 io3d.scene.getAframeElements 与 React 一起使用

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

有两种可能，

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

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