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

 

有问题请留言,希望对你有帮助!

 

 

 

 

 


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

发表评论