React与Unity的webGL

前言：

不了解前端的我前一阵子也学了学React，那么问题来了，React怎么和Unity的WebGL结合起来的，我推荐一个很棒的React的第三方库——react-unity-webgl

 

 

 

 

 

---

react-unity-webgl

使用之前

请先对React有一定了解再往下面看。

 

关于这个第三方库的npm网页：点击这里

对应的可参考github：点击这里

使用

React这边需要你配置好基本的东西，比如webpack、webpack-dev、babel……

首先导出Unity的webGL项目，得到这样的三个东西

index.html没用了，忘了它吧！

将上面两个目录移动到你的React项目中。

最后的目录结构大致是这样

好，导入这个库

cnpm install react-unity-webgl

入口文件（src/index.js）的内容如下，已经写好对应注释

//这两个导入的时候，接收的成员名称（React/ReactDOM）必须这么写
import React from 'react'   //创建组件、虚拟DOM元素，生命周期
import ReactDOM from 'react-dom'  //把创建好的组件和虚拟DOM放到页面上

//开始创建一个新的React组件并导入库！
import Unity, { UnityContent } from "react-unity-webgl";

export class App extends React.Component {
  constructor(props) {
    super(props);

    /*接下来创建一个新的Unity内容对象初始化并定义WebGL构建。
    这个路径是相对于索引文件的。 */
    this.unityContent = new UnityContent(
      "../Build/webgltest.json",
      "../Build//UnityLoader.js"
    );
  }

  render() {

    //最后渲染Unity组件并通过通过道具统一内容。
    return <Unity unityContent={this.unityContent} />;
  }
}
ReactDOM.render(<div>
    <App />
</div>,document.getElementById('app'))

有问题请留言，希望对你有帮助！

 

 

博客：is-hash.com

商业转载 请联系作者获得授权，非商业转载 请标明出处，谢谢