├── react-arjs-example ├── src │ ├── App.css │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ └── ARjsComp.js ├── README.md ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .gitignore └── package.json ├── yarn.lock ├── react-threex-example ├── .nvmrc ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── data │ │ ├── camera_para.dat │ │ └── patt.hiro │ ├── manifest.json │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ └── ThreexComp.js ├── README.md ├── .gitignore └── package.json ├── react-threear-example ├── public │ ├── favicon.ico │ ├── manifest.json │ ├── index.html │ └── data │ │ └── patt.hiro ├── src │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── App.css │ ├── App.js │ ├── logo.svg │ └── serviceWorker.js └── package.json ├── .gitignore ├── react-aframe-ar ├── af.js └── index.html └── README.md /react-arjs-example/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0px; 3 | overflow: hidden; 4 | } 5 | -------------------------------------------------------------------------------- /react-arjs-example/README.md: -------------------------------------------------------------------------------- 1 | # react-arjs-example 2 | 3 | To test run in a console: 4 | 5 | yarn 6 | yarn start -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | -------------------------------------------------------------------------------- /react-arjs-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-threex-example/.nvmrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-threex-example/.nvmrc -------------------------------------------------------------------------------- /react-threex-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-threex-example/src/App.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | margin: 0; 5 | overflow: hidden; 6 | } -------------------------------------------------------------------------------- /react-arjs-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-arjs-example/public/favicon.ico -------------------------------------------------------------------------------- /react-arjs-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-arjs-example/public/logo192.png -------------------------------------------------------------------------------- /react-arjs-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-arjs-example/public/logo512.png -------------------------------------------------------------------------------- /react-threex-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-threex-example/public/favicon.ico -------------------------------------------------------------------------------- /react-threex-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-threex-example/public/logo192.png -------------------------------------------------------------------------------- /react-threex-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-threex-example/public/logo512.png -------------------------------------------------------------------------------- /react-threear-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-threear-example/public/favicon.ico -------------------------------------------------------------------------------- /react-threex-example/public/data/camera_para.dat: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalwalt/react-AR-experiments/HEAD/react-threex-example/public/data/camera_para.dat -------------------------------------------------------------------------------- /react-arjs-example/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import ARjsComp from './ARjsComp' 3 | 4 | function App() { 5 | 6 | return ( 7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /react-threex-example/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import ThreexComp from './ThreexComp'; 3 | 4 | function App() { 5 | 6 | return ( 7 | 8 | 9 | 10 | ); 11 | 12 | } 13 | export default App; -------------------------------------------------------------------------------- /react-arjs-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react-threex-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react-threex-example/README.md: -------------------------------------------------------------------------------- 1 | # React-threex-example 2 | A simple react app to test AR.js with ES6 and React. 3 | You need to clone the repository and then in the react-threex-example folder run: 4 | 5 | ``` 6 | yarn 7 | yarn start 8 | ``` 9 | 10 | and point a Hiro marker to your camera. 11 | -------------------------------------------------------------------------------- /react-arjs-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /react-threex-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /react-threear-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /react-threear-example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /react-arjs-example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react-threex-example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react-arjs-example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react-threear-example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react-threex-example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react-arjs-example/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-threex-example/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | */node_modules 5 | /node_modules 6 | /.pnp 7 | */.pnp 8 | .pnp.js 9 | /.pnp.js 10 | 11 | # testing 12 | /coverage 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | -------------------------------------------------------------------------------- /react-aframe-ar/af.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const container = document.querySelector('#marker'); 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 | 10 | 11 | 12 |
13 | ); 14 | } 15 | 16 | const root = ReactDOM.createRoot(container); 17 | root.render(); 18 | -------------------------------------------------------------------------------- /react-threear-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /react-arjs-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /react-threex-example/src/index.js: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import App from './App'; 3 | import './index.css'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | const container = document.getElementById('root'); 7 | const root = createRoot(container); // createRoot(container!) if you use TypeScript 8 | root.render(); 9 | 10 | // If you want to start measuring performance in your app, pass a function 11 | // to log results (for example: reportWebVitals(console.log)) 12 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 13 | reportWebVitals(); 14 | -------------------------------------------------------------------------------- /react-arjs-example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React ARjs", 3 | "name": "React ARjs example", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react-threex-example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React THREEx", 3 | "name": "React THREEx example", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react-threear-example/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /react-arjs-example/src/ARjsComp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Entity, Scene} from 'aframe-react'; 3 | import 'babel-polyfill'; 4 | import 'aframe' 5 | import 'arjs' 6 | 7 | export default class ARjsComp extends React.Component { 8 | 9 | componentDidMount(){ 10 | } 11 | 12 | render (){ 13 | return( 14 |
{ this.mount = mount}} 17 | > 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ) 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /react-threear-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-threear-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "acorn": "^8.1.0", 7 | "kind-of": "^6.0.3", 8 | "react": "^17.0.2", 9 | "react-dom": "^17.0.2", 10 | "react-scripts": "^4.0.3", 11 | "serialize-javascript": "^5.0.1", 12 | "three": "^0.126.1", 13 | "threear": "^1.0.0-alpha.5" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /react-threex-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-threex-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^18.3.1", 10 | "react-dom": "^18.3.1", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.2", 13 | "@ar-js-org/ar.js": "^3.4.5" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /react-arjs-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-arjs-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "aframe-react": "^4.4.0", 13 | "babel-polyfill": "^6.3.14", 14 | "web-vitals": "^1.0.1", 15 | "arjs": "https://github.com/AR-js-org/AR.js.git#595a5c1c7020d3dd46f7082f63b5b7cca6d376e3" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /react-aframe-ar/index.html: -------------------------------------------------------------------------------- 1 | 2 | React Aframe AR.js example 3 | 4 | 5 | 6 | 7 | 8 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /react-threear-example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /react-threex-example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React THREEx example 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-arjs-example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /react-threear-example/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | const THREE = require('three'); 4 | const THREEAR = require('threear'); 5 | 6 | 7 | class App extends React.Component { 8 | 9 | render(){ 10 | 11 | var scene = new THREE.Scene(); 12 | var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 13 | 14 | camera.position.z = 5; 15 | 16 | var renderer = new THREE.WebGLRenderer({ 17 | // antialias : true, 18 | alpha: true 19 | }); 20 | renderer.setClearColor(new THREE.Color('lightgrey'), 0) 21 | renderer.setSize( window.innerWidth, window.innerHeight ); 22 | renderer.domElement.style.position = 'absolute' 23 | renderer.domElement.style.top = '0px' 24 | renderer.domElement.style.left = '0px' 25 | document.body.appendChild( renderer.domElement ); 26 | 27 | var markerGroup = new THREE.Group(); 28 | scene.add(markerGroup); 29 | 30 | var source = new THREEAR.Source({ renderer, camera }); 31 | 32 | THREEAR.initialize({ source: source }).then((controller) => { 33 | var geometry = new THREE.BoxGeometry( 1, 1, 1 ); 34 | var material = new THREE.MeshNormalMaterial(); 35 | var cube = new THREE.Mesh( geometry, material ); 36 | scene.add( cube ); 37 | markerGroup.add(cube) 38 | var path = './data/patt.hiro'; 39 | var patternMarker = new THREEAR.PatternMarker({ 40 | patternUrl: path, 41 | markerObject: markerGroup 42 | }); 43 | controller.trackMarker(patternMarker); 44 | 45 | requestAnimationFrame(function animate(nowMsec){ 46 | // measure time 47 | var lastTimeMsec = lastTimeMsec || nowMsec-1000/60; 48 | var deltaMsec = Math.min(200, nowMsec - lastTimeMsec); 49 | lastTimeMsec = nowMsec; 50 | renderer.render( scene, camera ); 51 | controller.update( source.domElement ); 52 | cube.rotation.x += 0.01; 53 | cube.rotation.y += 0.01; 54 | // keep looping 55 | requestAnimationFrame( animate ); 56 | }); 57 | 58 | }); 59 | return( 60 |
61 | ) 62 | } 63 | } 64 | 65 | export default App; 66 | -------------------------------------------------------------------------------- /react-threear-example/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /react-threear-example/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React AR experiments 2 | 3 | Some experiments with [Ar.js](https://github.com/jeromeetienne/AR.js), [THREEAR.js](https://github.com/JamesMilnerUK/THREEAR), [React.js](https://reactjs.org/) and [Three.js](https://threejs.org/). 4 | In a Future i will add other examples tests... 5 | 6 | You can find the [react-threear-example](https://github.com/kalwalt/react-AR-experiments/tree/master/react-threear-example) a simple example to show the THREEAR lib in action with React.js. 7 | This is the basic setup to start a project with the two libs. 8 | 9 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 10 | 11 | There is also the basic [AR.js and React example](https://github.com/kalwalt/react-AR-experiments/react-aframe-ar) as discussed in this [issue](https://github.com/jeromeetienne/AR.js/issues/493#issue) 12 | 13 | ## AR.js with ES6 and React 14 | 15 | This is a **AR.js** feature under development. You can test an example with **THREEx** API in the react-threex-example folder. 16 | 17 | ## Steps to start a project from scratch with THREEAR and React 18 | 19 | 1. Start a project with the create React app with the command: 20 | 21 | `npx create-react-app your-project-name` 22 | 23 | 2. Install Three.js and THEEAR.js with npm 24 | 25 | `npm install three threear` 26 | 27 | 3. Check if in package.json are installed the two libs. 28 | 4. In App.js import the two libs (with const require) 29 | 5. In the `render()` method of the App Component inject THREE renderer and camera into the `THREEAR.source()`: 30 | 31 | `var source = new THREEAR.Source({ renderer, camera });` 32 | 6. Initialize the tracking process: 33 | 34 | ```javascript 35 | THREEAR.initialize({ source: source }).then((controller) => { 36 | /* Three.js code here (mesh, materials... to be attached to the marker)*/ 37 | var path = './data/patt.hiro'; 38 | var patternMarker = new THREEAR.PatternMarker({ 39 | patternUrl: path, 40 | markerObject: markerGroup 41 | }); 42 | controller.trackMarker(patternMarker); 43 | )}; 44 | ``` 45 | 7. Remember to update the controller in the `requestAnimationFrame`: 46 | 47 | ```javascript 48 | requestAnimationFrame(function animate(nowMsec){ 49 | // measure time 50 | // your measure time code here 51 | renderer.render( scene, camera ); 52 | controller.update( source.domElement ); 53 | 54 | // keep looping 55 | requestAnimationFrame( animate ); 56 | }); 57 | 58 | ``` 59 | 8. In `return()` create a simple div: 60 | 61 | ```javascript 62 | return( 63 |
64 | ) 65 | ``` 66 | ## Final notes 67 | 68 | One important thing: resources (patterns, images, video...) must be in the public folder. 69 | 70 | ## Available Scripts 71 | 72 | In every project directory, you can run: 73 | 74 | ### `npm start` 75 | 76 | Runs the app in the development mode.
77 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 78 | 79 | The page will reload if you make edits.
80 | You will also see any lint errors in the console. 81 | 82 | ### `npm test` 83 | 84 | Launches the test runner in the interactive watch mode.
85 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 86 | 87 | ### `npm run build` 88 | 89 | Builds the app for production to the `build` folder.
90 | It correctly bundles React in production mode and optimizes the build for the best performance. 91 | 92 | The build is minified and the filenames include the hashes.
93 | Your app is ready to be deployed! 94 | 95 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 96 | 97 | ### `npm run eject` 98 | 99 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 100 | 101 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 102 | 103 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 104 | 105 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 106 | 107 | ## Learn More 108 | 109 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 110 | 111 | To learn React, check out the [React documentation](https://reactjs.org/). 112 | 113 | ### Code Splitting 114 | 115 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 116 | 117 | ### Analyzing the Bundle Size 118 | 119 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 120 | 121 | ### Making a Progressive Web App 122 | 123 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 124 | 125 | ### Advanced Configuration 126 | 127 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 128 | 129 | ### Deployment 130 | 131 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 132 | 133 | ### `npm run build` fails to minify 134 | 135 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 136 | -------------------------------------------------------------------------------- /react-threex-example/src/ThreexComp.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from '@ar-js-org/ar.js/three.js/build/ar-threex.js'; 3 | import * as THREE from 'three'; 4 | 5 | export default class ThreexComp extends React.Component { 6 | 7 | componentDidMount() { 8 | ArToolkitContext.baseURL = './' 9 | // init renderer 10 | var renderer = new THREE.WebGLRenderer({ 11 | // antialias : true, 12 | alpha: true 13 | }); 14 | renderer.setClearColor(new THREE.Color('lightgrey'), 0) 15 | // renderer.setPixelRatio( 2 ); 16 | renderer.setSize(640, 480); 17 | renderer.domElement.style.position = 'absolute' 18 | renderer.domElement.style.top = '0px' 19 | renderer.domElement.style.left = '0px' 20 | document.body.appendChild( renderer.domElement ); 21 | 22 | // array of functions for the rendering loop 23 | var onRenderFcts= []; 24 | var arToolkitContext, arMarkerControls; 25 | 26 | // init scene and camera 27 | var scene = new THREE.Scene(); 28 | 29 | ////////////////////////////////////////////////////////////////////////////////// 30 | // Initialize a basic camera 31 | ////////////////////////////////////////////////////////////////////////////////// 32 | 33 | // Create a camera 34 | var camera = new THREE.Camera(); 35 | scene.add(camera); 36 | const artoolkitProfile = new ArToolkitProfile() 37 | artoolkitProfile.sourceWebcam() 38 | 39 | const arToolkitSource = new ArToolkitSource(artoolkitProfile.sourceParameters) 40 | 41 | arToolkitSource.init(function onReady(){ 42 | initARContext(); 43 | onResize() 44 | }) 45 | 46 | // handle resize 47 | window.addEventListener('resize', function(){ 48 | onResize() 49 | }) 50 | function onResize(){ 51 | arToolkitSource.onResizeElement() 52 | arToolkitSource.copyElementSizeTo(renderer.domElement) 53 | if( arToolkitContext.arController !== null ){ 54 | arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas) 55 | } 56 | } 57 | 58 | function initARContext() { // create atToolkitContext 59 | arToolkitContext = new ArToolkitContext({ 60 | cameraParametersUrl: ArToolkitContext.baseURL + '../data/camera_para.dat', 61 | detectionMode: 'mono' 62 | }) 63 | // initialize it 64 | arToolkitContext.init(() => { // copy projection matrix to camera 65 | camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix()); 66 | 67 | arToolkitContext.arController.orientation = getSourceOrientation(); 68 | arToolkitContext.arController.options.orientation = getSourceOrientation(); 69 | 70 | console.log('arToolkitContext', arToolkitContext); 71 | window.arToolkitContext = arToolkitContext; 72 | }) 73 | 74 | // MARKER 75 | arMarkerControls = new ArMarkerControls(arToolkitContext, camera, { 76 | type: 'pattern', 77 | patternUrl: ArToolkitContext.baseURL + '../data/patt.hiro', 78 | // patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji', 79 | // as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix' 80 | changeMatrixMode: 'cameraTransformMatrix' 81 | }) 82 | 83 | scene.visible = false 84 | 85 | console.log('ArMarkerControls', arMarkerControls); 86 | window.arMarkerControls = arMarkerControls; 87 | } 88 | 89 | 90 | function getSourceOrientation() { 91 | if (!arToolkitSource) { 92 | return null; 93 | } 94 | 95 | console.log( 96 | 'actual source dimensions', 97 | arToolkitSource.domElement.videoWidth, 98 | arToolkitSource.domElement.videoHeight 99 | ); 100 | 101 | if (arToolkitSource.domElement.videoWidth > arToolkitSource.domElement.videoHeight) { 102 | console.log('source orientation', 'landscape'); 103 | return 'landscape'; 104 | } else { 105 | console.log('source orientation', 'portrait'); 106 | return 'portrait'; 107 | } 108 | } 109 | 110 | // update artoolkit on every frame 111 | onRenderFcts.push(function () { 112 | if (!arToolkitContext || !arToolkitSource || !arToolkitSource.ready) { 113 | return; 114 | } 115 | 116 | arToolkitContext.update(arToolkitSource.domElement) 117 | 118 | // update scene.visible if the marker is seen 119 | scene.visible = camera.visible 120 | }) 121 | 122 | ////////////////////////////////////////////////////////////////////////////////// 123 | // add an object in the scene 124 | ////////////////////////////////////////////////////////////////////////////////// 125 | 126 | var markerGroup = new THREE.Group() 127 | scene.add(markerGroup) 128 | var markerScene = new THREE.Scene() 129 | markerGroup.add(markerScene) 130 | 131 | var axes = new THREE.AxesHelper() 132 | markerScene.add(axes) 133 | 134 | // add a torus knot 135 | var geometry = new THREE.BoxGeometry(1,1,1); 136 | var material = new THREE.MeshNormalMaterial({ 137 | transparent : true, 138 | opacity: 0.5, 139 | side: THREE.DoubleSide 140 | }); 141 | var mesh = new THREE.Mesh( geometry, material ); 142 | mesh.position.y = geometry.parameters.height/2 143 | markerScene.add(mesh) 144 | 145 | var tgeometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16); 146 | var tmaterial = new THREE.MeshNormalMaterial(); 147 | var torus = new THREE.Mesh( tgeometry, tmaterial ); 148 | torus.position.y = 0.5 149 | markerScene.add( torus ); 150 | 151 | onRenderFcts.push(function(delta){ 152 | torus.rotation.x += delta * Math.PI 153 | }) 154 | 155 | ////////////////////////////////////////////////////////////////////////////////// 156 | // render the whole thing on the page 157 | ////////////////////////////////////////////////////////////////////////////////// 158 | onRenderFcts.push(function(){ 159 | renderer.render( scene, camera ); 160 | }) 161 | 162 | // run the rendering loop 163 | var lastTimeMsec= null 164 | requestAnimationFrame(function animate(nowMsec){ 165 | // keep looping 166 | requestAnimationFrame( animate ); 167 | // measure time 168 | lastTimeMsec = lastTimeMsec || nowMsec-1000/60 169 | var deltaMsec = Math.min(200, nowMsec - lastTimeMsec) 170 | lastTimeMsec = nowMsec 171 | // call each update function 172 | onRenderFcts.forEach(function(onRenderFct){ 173 | onRenderFct(deltaMsec/1000, nowMsec/1000) 174 | }) 175 | }) 176 | } 177 | 178 | render() { 179 | return ( 180 |
{ this.mount = mount}} 183 | /> 184 | ) 185 | } 186 | } -------------------------------------------------------------------------------- /react-threear-example/public/data/patt.hiro: -------------------------------------------------------------------------------- 1 | 234 235 240 233 240 234 240 235 240 237 240 238 240 240 240 232 2 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228 3 | 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239 4 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 5 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 6 | 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 7 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 8 | 231 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 9 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 10 | 225 149 240 240 186 216 225 174 240 240 240 237 238 240 240 240 11 | 150 107 238 231 75 208 115 147 238 228 223 226 237 180 226 240 12 | 150 62 181 213 62 187 113 169 197 72 29 237 120 50 53 207 13 | 149 63 47 78 53 184 113 101 142 5 150 150 45 217 186 83 14 | 121 84 220 222 58 180 121 92 128 109 237 124 155 232 161 64 15 | 149 71 240 240 76 210 98 109 122 108 240 129 51 119 161 155 16 | 149 186 240 240 98 219 135 152 207 191 236 227 152 77 175 209 17 | 235 235 240 233 240 234 240 235 240 236 240 238 240 240 240 240 18 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 19 | 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 20 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 21 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 22 | 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 23 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 24 | 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 25 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 26 | 225 156 240 240 186 216 225 186 240 240 240 240 240 240 240 240 27 | 150 117 240 231 72 206 115 162 240 232 223 237 240 180 226 240 28 | 150 74 187 213 51 184 103 168 197 78 29 237 120 50 53 216 29 | 144 77 51 74 61 184 106 101 142 5 150 152 52 217 186 85 30 | 117 89 219 219 65 184 121 92 128 100 236 125 156 240 170 73 31 | 148 71 240 240 76 210 109 109 121 99 240 137 51 120 166 164 32 | 140 186 240 240 98 220 150 156 207 192 236 230 152 77 176 212 33 | 234 235 240 233 240 234 240 235 240 236 240 238 240 240 240 233 34 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239 35 | 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 36 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 37 | 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 38 | 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 39 | 235 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 40 | 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 41 | 228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 42 | 225 156 240 240 182 212 225 180 240 240 240 240 240 240 240 240 43 | 150 116 238 228 66 205 115 151 238 236 225 240 240 180 226 240 44 | 156 84 186 211 47 184 109 170 200 92 30 240 120 50 53 216 45 | 147 83 51 73 50 184 106 110 148 17 151 150 45 217 186 85 46 | 127 98 219 219 58 179 109 101 128 107 237 125 155 240 163 72 47 | 155 86 240 240 76 201 85 108 121 95 232 137 51 118 153 155 48 | 149 189 240 240 98 220 141 154 206 178 235 230 152 77 175 209 49 | 50 | 232 228 239 240 240 240 240 240 240 240 240 207 83 64 155 209 51 | 240 240 240 240 240 240 240 240 240 240 226 53 186 161 161 175 52 | 240 240 240 240 240 240 240 240 240 240 180 50 217 232 119 77 53 | 240 240 240 240 240 240 240 240 240 238 237 120 45 155 51 152 54 | 238 240 240 240 240 240 240 240 240 237 226 237 150 124 129 227 55 | 240 240 240 240 240 240 240 240 240 240 223 29 150 237 240 236 56 | 237 240 240 240 240 240 240 240 240 240 228 72 5 109 108 191 57 | 240 240 240 240 240 240 240 240 240 240 238 197 142 128 122 207 58 | 235 240 240 240 240 240 240 240 240 174 147 169 101 92 109 152 59 | 240 240 240 240 240 240 240 240 240 225 115 113 113 121 98 135 60 | 234 240 240 240 240 240 240 240 240 216 208 187 184 180 210 219 61 | 240 240 240 240 240 240 240 240 240 186 75 62 53 58 76 98 62 | 233 240 240 240 240 240 240 240 240 240 231 213 78 222 240 240 63 | 240 240 240 240 240 240 240 240 240 240 238 181 47 220 240 240 64 | 235 240 240 240 240 240 240 240 240 149 107 62 63 84 71 186 65 | 234 229 227 240 236 234 236 231 229 225 150 150 149 121 149 149 66 | 240 240 240 240 240 240 240 240 240 240 240 216 85 73 164 212 67 | 240 240 240 240 240 240 240 240 240 240 226 53 186 170 166 176 68 | 240 240 240 240 240 240 240 240 240 240 180 50 217 240 120 77 69 | 240 240 240 240 240 240 240 240 240 240 240 120 52 156 51 152 70 | 238 240 240 240 240 240 240 240 240 240 237 237 152 125 137 230 71 | 240 240 240 240 240 240 240 240 240 240 223 29 150 236 240 236 72 | 236 240 240 240 240 240 240 240 240 240 232 78 5 100 99 192 73 | 240 240 240 240 240 240 240 240 240 240 240 197 142 128 121 207 74 | 235 240 240 240 240 240 240 240 240 186 162 168 101 92 109 156 75 | 240 240 240 240 240 240 240 240 240 225 115 103 106 121 109 150 76 | 234 240 240 240 240 240 240 240 240 216 206 184 184 184 210 220 77 | 240 240 240 240 240 240 240 240 240 186 72 51 61 65 76 98 78 | 233 240 240 240 240 240 240 240 240 240 231 213 74 219 240 240 79 | 240 240 240 240 240 240 240 240 240 240 240 187 51 219 240 240 80 | 235 240 240 240 240 240 240 240 240 156 117 74 77 89 71 186 81 | 235 229 227 240 236 234 236 232 229 225 150 150 144 117 148 140 82 | 233 239 240 240 240 240 240 240 240 240 240 216 85 72 155 209 83 | 240 240 240 240 240 240 240 240 240 240 226 53 186 163 153 175 84 | 240 240 240 240 240 240 240 240 240 240 180 50 217 240 118 77 85 | 240 240 240 240 240 240 240 240 240 240 240 120 45 155 51 152 86 | 238 240 240 240 240 240 240 240 240 240 240 240 150 125 137 230 87 | 240 240 240 240 240 240 240 240 240 240 225 30 151 237 232 235 88 | 236 240 240 240 240 240 240 240 240 240 236 92 17 107 95 178 89 | 240 240 240 240 240 240 240 240 240 240 238 200 148 128 121 206 90 | 235 240 240 240 240 240 240 240 240 180 151 170 110 101 108 154 91 | 240 240 240 240 240 240 240 240 240 225 115 109 106 109 85 141 92 | 234 240 240 240 240 240 240 240 240 212 205 184 184 179 201 220 93 | 240 240 240 240 240 240 240 240 240 182 66 47 50 58 76 98 94 | 233 240 240 240 240 240 240 240 240 240 228 211 73 219 240 240 95 | 240 240 240 240 240 240 240 240 240 240 238 186 51 219 240 240 96 | 235 240 240 240 240 240 240 240 240 156 116 84 83 98 86 189 97 | 234 229 227 240 234 232 235 232 228 225 150 156 147 127 155 149 98 | 99 | 209 175 77 152 227 236 191 207 152 135 219 98 240 240 186 149 100 | 155 161 119 51 129 240 108 122 109 98 210 76 240 240 71 149 101 | 64 161 232 155 124 237 109 128 92 121 180 58 222 220 84 121 102 | 83 186 217 45 150 150 5 142 101 113 184 53 78 47 63 149 103 | 207 53 50 120 237 29 72 197 169 113 187 62 213 181 62 150 104 | 240 226 180 237 226 223 228 238 147 115 208 75 231 238 107 150 105 | 240 240 240 238 237 240 240 240 174 225 216 186 240 240 149 225 106 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 107 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 231 108 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 109 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234 110 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 111 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 112 | 239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227 113 | 228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 114 | 232 240 240 240 238 240 237 240 235 240 234 240 233 240 235 234 115 | 212 176 77 152 230 236 192 207 156 150 220 98 240 240 186 140 116 | 164 166 120 51 137 240 99 121 109 109 210 76 240 240 71 148 117 | 73 170 240 156 125 236 100 128 92 121 184 65 219 219 89 117 118 | 85 186 217 52 152 150 5 142 101 106 184 61 74 51 77 144 119 | 216 53 50 120 237 29 78 197 168 103 184 51 213 187 74 150 120 | 240 226 180 240 237 223 232 240 162 115 206 72 231 240 117 150 121 | 240 240 240 240 240 240 240 240 186 225 216 186 240 240 156 225 122 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 123 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232 124 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 125 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234 126 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 127 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 128 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227 129 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 130 | 240 240 240 240 238 240 236 240 235 240 234 240 233 240 235 235 131 | 209 175 77 152 230 235 178 206 154 141 220 98 240 240 189 149 132 | 155 153 118 51 137 232 95 121 108 85 201 76 240 240 86 155 133 | 72 163 240 155 125 237 107 128 101 109 179 58 219 219 98 127 134 | 85 186 217 45 150 151 17 148 110 106 184 50 73 51 83 147 135 | 216 53 50 120 240 30 92 200 170 109 184 47 211 186 84 156 136 | 240 226 180 240 240 225 236 238 151 115 205 66 228 238 116 150 137 | 240 240 240 240 240 240 240 240 180 225 212 182 240 240 156 225 138 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228 139 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232 140 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 235 141 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232 142 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234 143 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 144 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227 145 | 239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 146 | 233 240 240 240 238 240 236 240 235 240 234 240 233 240 235 234 147 | 148 | 149 149 121 149 150 150 225 229 231 236 234 236 240 227 229 234 149 | 186 71 84 63 62 107 149 240 240 240 240 240 240 240 240 235 150 | 240 240 220 47 181 238 240 240 240 240 240 240 240 240 240 240 151 | 240 240 222 78 213 231 240 240 240 240 240 240 240 240 240 233 152 | 98 76 58 53 62 75 186 240 240 240 240 240 240 240 240 240 153 | 219 210 180 184 187 208 216 240 240 240 240 240 240 240 240 234 154 | 135 98 121 113 113 115 225 240 240 240 240 240 240 240 240 240 155 | 152 109 92 101 169 147 174 240 240 240 240 240 240 240 240 235 156 | 207 122 128 142 197 238 240 240 240 240 240 240 240 240 240 240 157 | 191 108 109 5 72 228 240 240 240 240 240 240 240 240 240 237 158 | 236 240 237 150 29 223 240 240 240 240 240 240 240 240 240 240 159 | 227 129 124 150 237 226 237 240 240 240 240 240 240 240 240 238 160 | 152 51 155 45 120 237 238 240 240 240 240 240 240 240 240 240 161 | 77 119 232 217 50 180 240 240 240 240 240 240 240 240 240 240 162 | 175 161 161 186 53 226 240 240 240 240 240 240 240 240 240 240 163 | 209 155 64 83 207 240 240 240 240 240 240 240 240 239 228 232 164 | 140 148 117 144 150 150 225 229 232 236 234 236 240 227 229 235 165 | 186 71 89 77 74 117 156 240 240 240 240 240 240 240 240 235 166 | 240 240 219 51 187 240 240 240 240 240 240 240 240 240 240 240 167 | 240 240 219 74 213 231 240 240 240 240 240 240 240 240 240 233 168 | 98 76 65 61 51 72 186 240 240 240 240 240 240 240 240 240 169 | 220 210 184 184 184 206 216 240 240 240 240 240 240 240 240 234 170 | 150 109 121 106 103 115 225 240 240 240 240 240 240 240 240 240 171 | 156 109 92 101 168 162 186 240 240 240 240 240 240 240 240 235 172 | 207 121 128 142 197 240 240 240 240 240 240 240 240 240 240 240 173 | 192 99 100 5 78 232 240 240 240 240 240 240 240 240 240 236 174 | 236 240 236 150 29 223 240 240 240 240 240 240 240 240 240 240 175 | 230 137 125 152 237 237 240 240 240 240 240 240 240 240 240 238 176 | 152 51 156 52 120 240 240 240 240 240 240 240 240 240 240 240 177 | 77 120 240 217 50 180 240 240 240 240 240 240 240 240 240 240 178 | 176 166 170 186 53 226 240 240 240 240 240 240 240 240 240 240 179 | 212 164 73 85 216 240 240 240 240 240 240 240 240 240 240 240 180 | 149 155 127 147 156 150 225 228 232 235 232 234 240 227 229 234 181 | 189 86 98 83 84 116 156 240 240 240 240 240 240 240 240 235 182 | 240 240 219 51 186 238 240 240 240 240 240 240 240 240 240 240 183 | 240 240 219 73 211 228 240 240 240 240 240 240 240 240 240 233 184 | 98 76 58 50 47 66 182 240 240 240 240 240 240 240 240 240 185 | 220 201 179 184 184 205 212 240 240 240 240 240 240 240 240 234 186 | 141 85 109 106 109 115 225 240 240 240 240 240 240 240 240 240 187 | 154 108 101 110 170 151 180 240 240 240 240 240 240 240 240 235 188 | 206 121 128 148 200 238 240 240 240 240 240 240 240 240 240 240 189 | 178 95 107 17 92 236 240 240 240 240 240 240 240 240 240 236 190 | 235 232 237 151 30 225 240 240 240 240 240 240 240 240 240 240 191 | 230 137 125 150 240 240 240 240 240 240 240 240 240 240 240 238 192 | 152 51 155 45 120 240 240 240 240 240 240 240 240 240 240 240 193 | 77 118 240 217 50 180 240 240 240 240 240 240 240 240 240 240 194 | 175 153 163 186 53 226 240 240 240 240 240 240 240 240 240 240 195 | 209 155 72 85 216 240 240 240 240 240 240 240 240 240 239 233 196 | 197 | -------------------------------------------------------------------------------- /react-threex-example/public/data/patt.hiro: -------------------------------------------------------------------------------- 1 | 234 235 240 233 240 234 240 235 240 237 240 238 240 240 240 232 2 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228 3 | 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239 4 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 5 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 6 | 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 7 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 8 | 231 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 9 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 10 | 225 149 240 240 186 216 225 174 240 240 240 237 238 240 240 240 11 | 150 107 238 231 75 208 115 147 238 228 223 226 237 180 226 240 12 | 150 62 181 213 62 187 113 169 197 72 29 237 120 50 53 207 13 | 149 63 47 78 53 184 113 101 142 5 150 150 45 217 186 83 14 | 121 84 220 222 58 180 121 92 128 109 237 124 155 232 161 64 15 | 149 71 240 240 76 210 98 109 122 108 240 129 51 119 161 155 16 | 149 186 240 240 98 219 135 152 207 191 236 227 152 77 175 209 17 | 235 235 240 233 240 234 240 235 240 236 240 238 240 240 240 240 18 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 19 | 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 20 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 21 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 22 | 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 23 | 236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 24 | 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 25 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 26 | 225 156 240 240 186 216 225 186 240 240 240 240 240 240 240 240 27 | 150 117 240 231 72 206 115 162 240 232 223 237 240 180 226 240 28 | 150 74 187 213 51 184 103 168 197 78 29 237 120 50 53 216 29 | 144 77 51 74 61 184 106 101 142 5 150 152 52 217 186 85 30 | 117 89 219 219 65 184 121 92 128 100 236 125 156 240 170 73 31 | 148 71 240 240 76 210 109 109 121 99 240 137 51 120 166 164 32 | 140 186 240 240 98 220 150 156 207 192 236 230 152 77 176 212 33 | 234 235 240 233 240 234 240 235 240 236 240 238 240 240 240 233 34 | 229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239 35 | 227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 36 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 37 | 234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 38 | 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 39 | 235 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 40 | 232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 41 | 228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 42 | 225 156 240 240 182 212 225 180 240 240 240 240 240 240 240 240 43 | 150 116 238 228 66 205 115 151 238 236 225 240 240 180 226 240 44 | 156 84 186 211 47 184 109 170 200 92 30 240 120 50 53 216 45 | 147 83 51 73 50 184 106 110 148 17 151 150 45 217 186 85 46 | 127 98 219 219 58 179 109 101 128 107 237 125 155 240 163 72 47 | 155 86 240 240 76 201 85 108 121 95 232 137 51 118 153 155 48 | 149 189 240 240 98 220 141 154 206 178 235 230 152 77 175 209 49 | 50 | 232 228 239 240 240 240 240 240 240 240 240 207 83 64 155 209 51 | 240 240 240 240 240 240 240 240 240 240 226 53 186 161 161 175 52 | 240 240 240 240 240 240 240 240 240 240 180 50 217 232 119 77 53 | 240 240 240 240 240 240 240 240 240 238 237 120 45 155 51 152 54 | 238 240 240 240 240 240 240 240 240 237 226 237 150 124 129 227 55 | 240 240 240 240 240 240 240 240 240 240 223 29 150 237 240 236 56 | 237 240 240 240 240 240 240 240 240 240 228 72 5 109 108 191 57 | 240 240 240 240 240 240 240 240 240 240 238 197 142 128 122 207 58 | 235 240 240 240 240 240 240 240 240 174 147 169 101 92 109 152 59 | 240 240 240 240 240 240 240 240 240 225 115 113 113 121 98 135 60 | 234 240 240 240 240 240 240 240 240 216 208 187 184 180 210 219 61 | 240 240 240 240 240 240 240 240 240 186 75 62 53 58 76 98 62 | 233 240 240 240 240 240 240 240 240 240 231 213 78 222 240 240 63 | 240 240 240 240 240 240 240 240 240 240 238 181 47 220 240 240 64 | 235 240 240 240 240 240 240 240 240 149 107 62 63 84 71 186 65 | 234 229 227 240 236 234 236 231 229 225 150 150 149 121 149 149 66 | 240 240 240 240 240 240 240 240 240 240 240 216 85 73 164 212 67 | 240 240 240 240 240 240 240 240 240 240 226 53 186 170 166 176 68 | 240 240 240 240 240 240 240 240 240 240 180 50 217 240 120 77 69 | 240 240 240 240 240 240 240 240 240 240 240 120 52 156 51 152 70 | 238 240 240 240 240 240 240 240 240 240 237 237 152 125 137 230 71 | 240 240 240 240 240 240 240 240 240 240 223 29 150 236 240 236 72 | 236 240 240 240 240 240 240 240 240 240 232 78 5 100 99 192 73 | 240 240 240 240 240 240 240 240 240 240 240 197 142 128 121 207 74 | 235 240 240 240 240 240 240 240 240 186 162 168 101 92 109 156 75 | 240 240 240 240 240 240 240 240 240 225 115 103 106 121 109 150 76 | 234 240 240 240 240 240 240 240 240 216 206 184 184 184 210 220 77 | 240 240 240 240 240 240 240 240 240 186 72 51 61 65 76 98 78 | 233 240 240 240 240 240 240 240 240 240 231 213 74 219 240 240 79 | 240 240 240 240 240 240 240 240 240 240 240 187 51 219 240 240 80 | 235 240 240 240 240 240 240 240 240 156 117 74 77 89 71 186 81 | 235 229 227 240 236 234 236 232 229 225 150 150 144 117 148 140 82 | 233 239 240 240 240 240 240 240 240 240 240 216 85 72 155 209 83 | 240 240 240 240 240 240 240 240 240 240 226 53 186 163 153 175 84 | 240 240 240 240 240 240 240 240 240 240 180 50 217 240 118 77 85 | 240 240 240 240 240 240 240 240 240 240 240 120 45 155 51 152 86 | 238 240 240 240 240 240 240 240 240 240 240 240 150 125 137 230 87 | 240 240 240 240 240 240 240 240 240 240 225 30 151 237 232 235 88 | 236 240 240 240 240 240 240 240 240 240 236 92 17 107 95 178 89 | 240 240 240 240 240 240 240 240 240 240 238 200 148 128 121 206 90 | 235 240 240 240 240 240 240 240 240 180 151 170 110 101 108 154 91 | 240 240 240 240 240 240 240 240 240 225 115 109 106 109 85 141 92 | 234 240 240 240 240 240 240 240 240 212 205 184 184 179 201 220 93 | 240 240 240 240 240 240 240 240 240 182 66 47 50 58 76 98 94 | 233 240 240 240 240 240 240 240 240 240 228 211 73 219 240 240 95 | 240 240 240 240 240 240 240 240 240 240 238 186 51 219 240 240 96 | 235 240 240 240 240 240 240 240 240 156 116 84 83 98 86 189 97 | 234 229 227 240 234 232 235 232 228 225 150 156 147 127 155 149 98 | 99 | 209 175 77 152 227 236 191 207 152 135 219 98 240 240 186 149 100 | 155 161 119 51 129 240 108 122 109 98 210 76 240 240 71 149 101 | 64 161 232 155 124 237 109 128 92 121 180 58 222 220 84 121 102 | 83 186 217 45 150 150 5 142 101 113 184 53 78 47 63 149 103 | 207 53 50 120 237 29 72 197 169 113 187 62 213 181 62 150 104 | 240 226 180 237 226 223 228 238 147 115 208 75 231 238 107 150 105 | 240 240 240 238 237 240 240 240 174 225 216 186 240 240 149 225 106 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 107 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 231 108 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 109 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234 110 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 111 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 112 | 239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227 113 | 228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 114 | 232 240 240 240 238 240 237 240 235 240 234 240 233 240 235 234 115 | 212 176 77 152 230 236 192 207 156 150 220 98 240 240 186 140 116 | 164 166 120 51 137 240 99 121 109 109 210 76 240 240 71 148 117 | 73 170 240 156 125 236 100 128 92 121 184 65 219 219 89 117 118 | 85 186 217 52 152 150 5 142 101 106 184 61 74 51 77 144 119 | 216 53 50 120 237 29 78 197 168 103 184 51 213 187 74 150 120 | 240 226 180 240 237 223 232 240 162 115 206 72 231 240 117 150 121 | 240 240 240 240 240 240 240 240 186 225 216 186 240 240 156 225 122 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 123 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232 124 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 125 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234 126 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236 127 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 128 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227 129 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 130 | 240 240 240 240 238 240 236 240 235 240 234 240 233 240 235 235 131 | 209 175 77 152 230 235 178 206 154 141 220 98 240 240 189 149 132 | 155 153 118 51 137 232 95 121 108 85 201 76 240 240 86 155 133 | 72 163 240 155 125 237 107 128 101 109 179 58 219 219 98 127 134 | 85 186 217 45 150 151 17 148 110 106 184 50 73 51 83 147 135 | 216 53 50 120 240 30 92 200 170 109 184 47 211 186 84 156 136 | 240 226 180 240 240 225 236 238 151 115 205 66 228 238 116 150 137 | 240 240 240 240 240 240 240 240 180 225 212 182 240 240 156 225 138 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228 139 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232 140 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 235 141 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232 142 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234 143 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 144 | 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227 145 | 239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229 146 | 233 240 240 240 238 240 236 240 235 240 234 240 233 240 235 234 147 | 148 | 149 149 121 149 150 150 225 229 231 236 234 236 240 227 229 234 149 | 186 71 84 63 62 107 149 240 240 240 240 240 240 240 240 235 150 | 240 240 220 47 181 238 240 240 240 240 240 240 240 240 240 240 151 | 240 240 222 78 213 231 240 240 240 240 240 240 240 240 240 233 152 | 98 76 58 53 62 75 186 240 240 240 240 240 240 240 240 240 153 | 219 210 180 184 187 208 216 240 240 240 240 240 240 240 240 234 154 | 135 98 121 113 113 115 225 240 240 240 240 240 240 240 240 240 155 | 152 109 92 101 169 147 174 240 240 240 240 240 240 240 240 235 156 | 207 122 128 142 197 238 240 240 240 240 240 240 240 240 240 240 157 | 191 108 109 5 72 228 240 240 240 240 240 240 240 240 240 237 158 | 236 240 237 150 29 223 240 240 240 240 240 240 240 240 240 240 159 | 227 129 124 150 237 226 237 240 240 240 240 240 240 240 240 238 160 | 152 51 155 45 120 237 238 240 240 240 240 240 240 240 240 240 161 | 77 119 232 217 50 180 240 240 240 240 240 240 240 240 240 240 162 | 175 161 161 186 53 226 240 240 240 240 240 240 240 240 240 240 163 | 209 155 64 83 207 240 240 240 240 240 240 240 240 239 228 232 164 | 140 148 117 144 150 150 225 229 232 236 234 236 240 227 229 235 165 | 186 71 89 77 74 117 156 240 240 240 240 240 240 240 240 235 166 | 240 240 219 51 187 240 240 240 240 240 240 240 240 240 240 240 167 | 240 240 219 74 213 231 240 240 240 240 240 240 240 240 240 233 168 | 98 76 65 61 51 72 186 240 240 240 240 240 240 240 240 240 169 | 220 210 184 184 184 206 216 240 240 240 240 240 240 240 240 234 170 | 150 109 121 106 103 115 225 240 240 240 240 240 240 240 240 240 171 | 156 109 92 101 168 162 186 240 240 240 240 240 240 240 240 235 172 | 207 121 128 142 197 240 240 240 240 240 240 240 240 240 240 240 173 | 192 99 100 5 78 232 240 240 240 240 240 240 240 240 240 236 174 | 236 240 236 150 29 223 240 240 240 240 240 240 240 240 240 240 175 | 230 137 125 152 237 237 240 240 240 240 240 240 240 240 240 238 176 | 152 51 156 52 120 240 240 240 240 240 240 240 240 240 240 240 177 | 77 120 240 217 50 180 240 240 240 240 240 240 240 240 240 240 178 | 176 166 170 186 53 226 240 240 240 240 240 240 240 240 240 240 179 | 212 164 73 85 216 240 240 240 240 240 240 240 240 240 240 240 180 | 149 155 127 147 156 150 225 228 232 235 232 234 240 227 229 234 181 | 189 86 98 83 84 116 156 240 240 240 240 240 240 240 240 235 182 | 240 240 219 51 186 238 240 240 240 240 240 240 240 240 240 240 183 | 240 240 219 73 211 228 240 240 240 240 240 240 240 240 240 233 184 | 98 76 58 50 47 66 182 240 240 240 240 240 240 240 240 240 185 | 220 201 179 184 184 205 212 240 240 240 240 240 240 240 240 234 186 | 141 85 109 106 109 115 225 240 240 240 240 240 240 240 240 240 187 | 154 108 101 110 170 151 180 240 240 240 240 240 240 240 240 235 188 | 206 121 128 148 200 238 240 240 240 240 240 240 240 240 240 240 189 | 178 95 107 17 92 236 240 240 240 240 240 240 240 240 240 236 190 | 235 232 237 151 30 225 240 240 240 240 240 240 240 240 240 240 191 | 230 137 125 150 240 240 240 240 240 240 240 240 240 240 240 238 192 | 152 51 155 45 120 240 240 240 240 240 240 240 240 240 240 240 193 | 77 118 240 217 50 180 240 240 240 240 240 240 240 240 240 240 194 | 175 153 163 186 53 226 240 240 240 240 240 240 240 240 240 240 195 | 209 155 72 85 216 240 240 240 240 240 240 240 240 240 239 233 196 | 197 | --------------------------------------------------------------------------------