|
1 | 1 | # React Unity WebGL
|
2 | 2 | When building content for the web, you might need to communicate with other elements on React Application. Or you might want to implement functionality using Web APIs which [Unity](https://unity3d.com) does not currently expose by default. In both cases, you need to directly interface with the browser’s JavaScript engine. React Unity WebGL provides an easy library for Unity 5.6 / 2017 or newer with different methods to do this.
|
3 | 3 |
|
4 |
| -<img src="https://raw.githubusercontent.com/jeffreylanters/react-unity-webgl/master/resources/readme/logo.png" width="300px"> |
| 4 | +<img src="https://raw.githubusercontent.com/jeffreylanters/react-unity-webgl/master/resources/readme/logo.png" width="300px"><br /> |
5 | 5 |
|
6 |
| -<img src="https://raw.githubusercontent.com/jeffreylanters/react-unity-webgl/master/resources/readme/demo.gif" width="300px"> |
| 6 | +<img src="https://raw.githubusercontent.com/jeffreylanters/react-unity-webgl/master/resources/readme/demo-video.gif" width="300px"> |
7 | 7 |
|
8 | 8 |
|
9 | 9 |
|
@@ -41,8 +41,8 @@ $ npm install react-unity-webgl
|
41 | 41 | To get started import the default Unity class from react-unity-webgl and include it in your render while giving the public path to your src and loader files. [Best practices for adding the src and loader files on a public path](#best-practices-for-adding-the-src-and-loader-files-on-a-public-path).
|
42 | 42 |
|
43 | 43 | ```js
|
44 |
| -import React from 'react'; |
45 |
| -import Unity from 'react-unity-webgl'; |
| 44 | +import React from 'react' |
| 45 | +import Unity from 'react-unity-webgl' |
46 | 46 |
|
47 | 47 | export class App extends React.Component {
|
48 | 48 | render () {
|
@@ -92,12 +92,12 @@ SendMessage (objectName, methodName, value);
|
92 | 92 |
|
93 | 93 | Where objectName is the name of an object in your scene; methodName is the name of a method in the script, currently attached to that object; value can be a string, a number, or can be empty. For example:
|
94 | 94 | ```js
|
95 |
| -import React from 'react'; |
96 |
| -import { SendMessage } from 'react-unity-webgl'; |
| 95 | +import React from 'react' |
| 96 | +import { SendMessage } from 'react-unity-webgl' |
97 | 97 |
|
98 | 98 | export class App extends React.Component {
|
99 | 99 | spawnEnemy (count) {
|
100 |
| - SendMessage ('SpawnBehaviour', 'SpawnEnemies', count); |
| 100 | + SendMessage ('SpawnBehaviour', 'SpawnEnemies', count) |
101 | 101 | }
|
102 | 102 | render () {
|
103 | 103 | return <div onClick={ this.spawnEnemy.bind(this, 5) }>
|
@@ -127,15 +127,15 @@ RegisterExternalListener (methodName, callback);
|
127 | 127 | ```
|
128 | 128 | Where methodName is the name of a method in the script, this method will be binded to the current browser window so Unity can refer to it; callback canwill be a function, which takes one parameter with the value passed by your content. Note that it is recommended to register the callbacks before loading the Unity content. For example:
|
129 | 129 | ```js
|
130 |
| -import React from 'react'; |
131 |
| -import { RegisterExternalListener } from 'react-unity-webgl'; |
| 130 | +import React from 'react' |
| 131 | +import { RegisterExternalListener } from 'react-unity-webgl' |
132 | 132 |
|
133 | 133 | export class App extends React.Component {
|
134 | 134 | constructor () {
|
135 |
| - RegisterExternalListener ('OpenMenu', this.openMenu.bind (this)); |
| 135 | + RegisterExternalListener ('OpenMenu', this.openMenu.bind (this)) |
136 | 136 | }
|
137 | 137 | openMenu (menuId) {
|
138 |
| - console.log (`opening menu with id ${menuId$}`); |
| 138 | + console.log (`opening menu with id ${menuId$}`) |
139 | 139 | }
|
140 | 140 | }
|
141 | 141 | ```
|
|
0 commit comments