├── .babelrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── app.webpack.config.babel.js ├── app ├── .babelrc ├── app.js ├── components │ └── BasicSphere.js ├── index.html └── index.js ├── build ├── react-whs.js └── react-whs.js.map ├── package-lock.json ├── package.json ├── src ├── .babelrc ├── App.js ├── TransitionBase.js ├── components │ ├── cameras │ │ ├── CubeCamera.js │ │ ├── OrthographicCamera.js │ │ ├── PerspectiveCamera.js │ │ └── index.js │ ├── lights │ │ ├── AmbientLight.js │ │ ├── DirectionalLight.js │ │ ├── HemisphereLight.js │ │ ├── PointLight.js │ │ ├── SpotLight.js │ │ └── index.js │ └── meshes │ │ ├── Box.js │ │ ├── Cylinder.js │ │ ├── Dodecahedron.js │ │ ├── Extrude.js │ │ ├── Group.js │ │ ├── Icosahedron.js │ │ ├── Lathe.js │ │ ├── Line.js │ │ ├── Model.js │ │ ├── Octahedron.js │ │ ├── Parametric.js │ │ ├── Plane.js │ │ ├── Polyhedron.js │ │ ├── Ring.js │ │ ├── Shape.js │ │ ├── Sphere.js │ │ ├── Tetrahedron.js │ │ ├── Text.js │ │ ├── Torus.js │ │ ├── Torusknot.js │ │ ├── Tube.js │ │ └── index.js ├── index.js └── reactify.js ├── test ├── .babelrc └── folding │ ├── folding.js │ └── folding.test.js └── webpack.config.babel.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-1" 5 | ], 6 | "plugins": [ 7 | "react-hot-loader/babel" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | __snapshots__ 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | examples/ 2 | src/ -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | before_script: 5 | - if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi 6 | - npm install 7 | - npm install -g jest 8 | script: 9 | - npm test 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](http://i.imgur.com/MJmzMdb.png) 2 | 3 | # react-whs [![Build Status](https://img.shields.io/travis/WhitestormJS/react-whs.svg?style=flat-square)](https://travis-ci.org/WhitestormJS/react-whs) [![NPM Version](https://img.shields.io/npm/v/react-whs.svg?style=flat-square)](https://www.npmjs.com/package/react-whs) 4 | 5 | > Go to [WhitestormJS/whitestorm.js](https://github.com/WhitestormJS/whitestorm.js) 6 | 7 | ## Usage 8 | 9 | Try with **React** on [**Codepen**](http://codepen.io/sasha240100/pen/dNqKMd?editors=1010): 10 | 11 | 12 | 13 | 14 | ```javascript 15 | import React, {Component} from 'react'; 16 | import {App, Sphere} from 'react-whs'; 17 | 18 | export class Application extends Component { 19 | render() { 20 | return ( 21 | 31 | 35 | 36 | ) 37 | } 38 | } 39 | ``` 40 | 41 | ### Children 42 | 43 | ```javascript 44 | import React, {Component} from 'react'; 45 | import {App, Sphere} from 'react-whs'; 46 | 47 | export class Application extends Component { 48 | render() { 49 | return ( 50 | 53 | 57 | 62 | 63 | 64 | ) 65 | } 66 | } 67 | ``` 68 | 69 | ## How whs components can be transformed to react components 70 | 71 | ### Custom components (that are not included in whs lib) 72 | 73 | > Simply include `@reactify` decorator. 74 | 75 | ```javascript 76 | import React, {Component} from 'react'; 77 | import * as THREE from 'three'; 78 | import {MeshComponent} from 'whs/src/core/MeshComponent'; 79 | 80 | import {reactify} from 'react-whs'; 81 | 82 | @reactify 83 | export default class BasicSphere extends MeshComponent { 84 | build() { 85 | return new THREE.Mesh( 86 | new THREE.SphereGeometry(3, 16, 16), 87 | new THREE.MeshBasicMaterial({color: 0xff0000}) // red 88 | ); 89 | } 90 | } 91 | ``` 92 | 93 | ### Get reference to Component/App to work with them in js 94 | For **App** use `refApp`. 95 | 96 | For **any component (Mesh, Light, Camera, ...)** use `refComponent`. 97 | 98 | ```javascript 99 | import React, {Component} from 'react'; 100 | import {App, Sphere} from 'react-whs'; 101 | 102 | export class Application extends Component { 103 | render() { 104 | return ( 105 | { 108 | console.log(app); // will log this WHS.App object 109 | }} 110 | ]}> 111 | { 115 | console.log(component); // will log this WHS.Sphere object 116 | }} 117 | /> 118 | 119 | ) 120 | } 121 | } 122 | ``` 123 | 124 | 125 | 126 | ### Properties/params syntax 127 | > To see how to make whs components work in react see previous note (Custom components) 128 | 129 | WHS: 130 | 131 | ```javascript 132 | const component = new MyComponent({ 133 | parameter1: value1, 134 | parameter2: value2, 135 | position: new THREE.Vector3(x, y, z) 136 | }); 137 | 138 | component.addTo(app); 139 | ``` 140 | 141 | React: 142 | 143 | ```javascript 144 | class MyComponentSyntaxExample { 145 | render() { 146 | return ( 147 | 152 | ) 153 | } 154 | } 155 | ``` 156 | -------------------------------------------------------------------------------- /app.webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import webpack from 'webpack'; 3 | 4 | process.env.BABEL_ENV = 'browser'; 5 | 6 | const isProduction = process.env.NODE_ENV === 'production'; 7 | 8 | console.log( 9 | isProduction 10 | ? 'Production mode' 11 | : 'Development mode' 12 | ); 13 | 14 | export default { 15 | devtool: isProduction ? false : 'source-map', 16 | entry: ['react-hot-loader/patch', './app/index.js'], 17 | target: 'web', 18 | output: { 19 | path: path.join(__dirname, './app/build/'), 20 | filename: 'bundle.js', 21 | publicPath: '/build/' 22 | }, 23 | module: { 24 | loaders: [ 25 | { 26 | test: /\.js$/, 27 | exclude: /node_modules/, 28 | loader: 'babel-loader' 29 | } 30 | ] 31 | }, 32 | plugins: isProduction 33 | ? [ 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { warnings: false }, 36 | minimize: true 37 | }), 38 | ] 39 | : [ 40 | new webpack.HotModuleReplacementPlugin(), 41 | new webpack.NamedModulesPlugin() 42 | ], 43 | devServer: { 44 | contentBase: './app/', 45 | publicPath: '/build/', 46 | hot: true 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "plugins": [ 7 | "add-module-exports", 8 | "transform-class-properties", 9 | "transform-decorators-legacy" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {App, Sphere} from '../src/index'; 3 | 4 | import {MeshBasicMaterial} from 'three'; 5 | 6 | import { 7 | SceneModule, 8 | CameraModule, 9 | RenderingModule, 10 | OrbitControlsModule, 11 | DefineModule, 12 | PerspectiveCamera, 13 | } from 'whs'; 14 | 15 | import {BasicSphere} from './components/BasicSphere'; 16 | 17 | export class Application extends Component { 18 | render() { 19 | return ( 20 | { 31 | console.log(app); // app 32 | }} 33 | > 34 | { 39 | console.log(component); // component 40 | }} 41 | > 42 | 47 | 48 | 54 | { 57 | component.material.color.setRGB(1, 1, 0); // Set yellow 58 | }} 59 | /> 60 | 61 | ) 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /app/components/BasicSphere.js: -------------------------------------------------------------------------------- 1 | import { 2 | Mesh, 3 | IcosahedronGeometry, 4 | MeshBasicMaterial 5 | } from 'three'; 6 | 7 | import {MeshComponent} from 'whs'; 8 | import {reactify} from '../../src/index'; 9 | 10 | @reactify 11 | export class BasicSphere extends MeshComponent { 12 | build() { 13 | return new Mesh( 14 | new IcosahedronGeometry(3, 5), 15 | this.applyBridge({ 16 | material: new MeshBasicMaterial({color: 0xffffff}) 17 | }).material 18 | ) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 |
15 | 16 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { AppContainer } from 'react-hot-loader'; 4 | 5 | import {Application} from './app'; 6 | 7 | const render = Component => { 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | } 15 | 16 | render(Application); 17 | 18 | if (module.hot) { 19 | module.hot.accept('./app', () => { 20 | const NextApp = require('./app').Application; 21 | render(NextApp); 22 | }); 23 | } -------------------------------------------------------------------------------- /build/react-whs.js: -------------------------------------------------------------------------------- 1 | /*! react-whs v0.1.9 */ 2 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("whs")):"function"==typeof define&&define.amd?define(["whs"],t):"object"==typeof exports?exports.WHSReact=t(require("whs")):e.WHSReact=t(e.WHS)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=37)}([function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e){return function(t){function r(){var t;n(this,r);for(var u=arguments.length,i=Array(u),c=0;c0?t.map(function(t){return e.wrapChild(t)}):t?this.wrapChild(t):null}},{key:"mount",value:function(){var e=this;this.props.parent&&(this.props.parent.mounted?this.props.parent.native.add(this.native):this.props.onParentMount&&this.props.onParentMount(function(){return e.props.parent.native.add(e.native)})),this.defer.forEach(function(e){return e()}),this.mounted=!0}},{key:"unmount",value:function(){this.props.parent&&this.props.parent.native.remove(this.native),this.mounted=!1}}]),t}(c.Component)},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.App=void 0;var i,c,a=function(){function e(e,t){for(var r=0;r$.length&&$.push(e)}function d(e,t,r,o){var u=typeof e;"undefined"!==u&&"boolean"!==u||(e=null);var i=!1;if(null===e)i=!0;else switch(u){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case P:case g:case M:case k:i=!0}}if(i)return r(o,e,""===t?"."+y(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var c=0;c 0) return children.map(function (child) {\n return _this2.wrapChild(child);\n });else if (children) return this.wrapChild(children);else return null;\n }\n }, {\n key: 'mount',\n value: function mount() {\n var _this3 = this;\n\n if (this.props.parent) if (this.props.parent.mounted) this.props.parent.native.add(this.native);else if (this.props.onParentMount) this.props.onParentMount(function () {\n return _this3.props.parent.native.add(_this3.native);\n });\n\n this.defer.forEach(function (func) {\n return func();\n });\n this.mounted = true;\n }\n }, {\n key: 'unmount',\n value: function unmount() {\n if (this.props.parent) this.props.parent.native.remove(this.native);\n\n this.mounted = false;\n }\n }]);\n\n return TransitionBase;\n}(_react.Component);\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.App = undefined;\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _class, _temp;\n\nvar _react = __webpack_require__(2);\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _whs = __webpack_require__(1);\n\nvar _TransitionBase2 = __webpack_require__(3);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar App = exports.App = (_temp = _class = function (_TransitionBase) {\n _inherits(App, _TransitionBase);\n\n function App() {\n var _ref;\n\n _classCallCheck(this, App);\n\n for (var _len = arguments.length, props = Array(_len), _key = 0; _key < _len; _key++) {\n props[_key] = arguments[_key];\n }\n\n var _this = _possibleConstructorReturn(this, (_ref = App.__proto__ || Object.getPrototypeOf(App)).call.apply(_ref, [this].concat(props)));\n\n var _this$props = _this.props,\n refApp = _this$props.refApp,\n start = _this$props.start;\n\n\n _this.native = new _whs.App();\n if (start) _this.native.start();\n if (refApp) refApp(_this.native);\n return _this;\n }\n\n _createClass(App, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n var _this2 = this;\n\n var _props = this.props,\n modules = _props.modules,\n afterMount = _props.afterMount,\n afterMountParams = _props.afterMountParams,\n passAppToView = _props.passAppToView;\n\n\n this.native.manager.set('element', this.element, { alias: '$element' });\n\n modules.forEach(function (module) {\n _this2.native.applyModule(module);\n });\n\n if (passAppToView) passAppToView(this);\n this.mount();\n if (afterMount) afterMount.bind(this)(afterMountParams);\n }\n }, {\n key: 'render',\n value: function render() {\n var _this3 = this;\n\n var _props2 = this.props,\n Parent = _props2.parent,\n parentStyle = _props2.parentStyle;\n\n\n return _react2.default.createElement(\n Parent,\n { style: parentStyle, className: 'whs', ref: function ref(_ref2) {\n _this3.element = _ref2;\n } },\n this.applyChildren()\n );\n }\n }]);\n\n return App;\n}(_TransitionBase2.TransitionBase), _class.defaultProps = {\n start: true,\n parent: 'div',\n parentStyle: { flex: 1 }\n}, _temp);\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _CubeCamera = __webpack_require__(8);\n\nObject.keys(_CubeCamera).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _CubeCamera[key];\n }\n });\n});\n\nvar _OrthographicCamera = __webpack_require__(9);\n\nObject.keys(_OrthographicCamera).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _OrthographicCamera[key];\n }\n });\n});\n\nvar _PerspectiveCamera = __webpack_require__(10);\n\nObject.keys(_PerspectiveCamera).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _PerspectiveCamera[key];\n }\n });\n});\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _AmbientLight = __webpack_require__(11);\n\nObject.keys(_AmbientLight).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _AmbientLight[key];\n }\n });\n});\n\nvar _DirectionalLight = __webpack_require__(12);\n\nObject.keys(_DirectionalLight).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _DirectionalLight[key];\n }\n });\n});\n\nvar _HemisphereLight = __webpack_require__(13);\n\nObject.keys(_HemisphereLight).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _HemisphereLight[key];\n }\n });\n});\n\nvar _PointLight = __webpack_require__(14);\n\nObject.keys(_PointLight).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _PointLight[key];\n }\n });\n});\n\nvar _SpotLight = __webpack_require__(15);\n\nObject.keys(_SpotLight).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _SpotLight[key];\n }\n });\n});\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _Box = __webpack_require__(16);\n\nObject.keys(_Box).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Box[key];\n }\n });\n});\n\nvar _Cylinder = __webpack_require__(17);\n\nObject.keys(_Cylinder).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Cylinder[key];\n }\n });\n});\n\nvar _Dodecahedron = __webpack_require__(18);\n\nObject.keys(_Dodecahedron).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Dodecahedron[key];\n }\n });\n});\n\nvar _Extrude = __webpack_require__(19);\n\nObject.keys(_Extrude).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Extrude[key];\n }\n });\n});\n\nvar _Icosahedron = __webpack_require__(21);\n\nObject.keys(_Icosahedron).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Icosahedron[key];\n }\n });\n});\n\nvar _Lathe = __webpack_require__(22);\n\nObject.keys(_Lathe).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Lathe[key];\n }\n });\n});\n\nvar _Line = __webpack_require__(23);\n\nObject.keys(_Line).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Line[key];\n }\n });\n});\n\nvar _Model = __webpack_require__(24);\n\nObject.keys(_Model).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Model[key];\n }\n });\n});\n\nvar _Octahedron = __webpack_require__(25);\n\nObject.keys(_Octahedron).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Octahedron[key];\n }\n });\n});\n\nvar _Parametric = __webpack_require__(26);\n\nObject.keys(_Parametric).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Parametric[key];\n }\n });\n});\n\nvar _Plane = __webpack_require__(27);\n\nObject.keys(_Plane).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Plane[key];\n }\n });\n});\n\nvar _Polyhedron = __webpack_require__(28);\n\nObject.keys(_Polyhedron).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Polyhedron[key];\n }\n });\n});\n\nvar _Ring = __webpack_require__(29);\n\nObject.keys(_Ring).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Ring[key];\n }\n });\n});\n\nvar _Shape = __webpack_require__(30);\n\nObject.keys(_Shape).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Shape[key];\n }\n });\n});\n\nvar _Sphere = __webpack_require__(31);\n\nObject.keys(_Sphere).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Sphere[key];\n }\n });\n});\n\nvar _Tetrahedron = __webpack_require__(32);\n\nObject.keys(_Tetrahedron).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Tetrahedron[key];\n }\n });\n});\n\nvar _Text = __webpack_require__(33);\n\nObject.keys(_Text).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Text[key];\n }\n });\n});\n\nvar _Torus = __webpack_require__(34);\n\nObject.keys(_Torus).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Torus[key];\n }\n });\n});\n\nvar _Torusknot = __webpack_require__(35);\n\nObject.keys(_Torusknot).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Torusknot[key];\n }\n });\n});\n\nvar _Tube = __webpack_require__(36);\n\nObject.keys(_Tube).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Tube[key];\n }\n });\n});\n\nvar _Group = __webpack_require__(20);\n\nObject.keys(_Group).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _Group[key];\n }\n });\n});\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.CubeCamera = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar CubeCamera = exports.CubeCamera = (0, _reactify.reactify)(_whs.CubeCamera);\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.OrthographicCamera = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar OrthographicCamera = exports.OrthographicCamera = (0, _reactify.reactify)(_whs.OrthographicCamera);\n\n/***/ }),\n/* 10 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.PerspectiveCamera = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar PerspectiveCamera = exports.PerspectiveCamera = (0, _reactify.reactify)(_whs.PerspectiveCamera);\n\n/***/ }),\n/* 11 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.AmbientLight = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar AmbientLight = exports.AmbientLight = (0, _reactify.reactify)(_whs.AmbientLight);\n\n/***/ }),\n/* 12 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.DirectionalLight = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar DirectionalLight = exports.DirectionalLight = (0, _reactify.reactify)(_whs.DirectionalLight);\n\n/***/ }),\n/* 13 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.HemisphereLight = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar HemisphereLight = exports.HemisphereLight = (0, _reactify.reactify)(_whs.HemisphereLight);\n\n/***/ }),\n/* 14 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.PointLight = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar PointLight = exports.PointLight = (0, _reactify.reactify)(_whs.PointLight);\n\n/***/ }),\n/* 15 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.SpotLight = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar SpotLight = exports.SpotLight = (0, _reactify.reactify)(_whs.SpotLight);\n\n/***/ }),\n/* 16 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Box = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Box = exports.Box = (0, _reactify.reactify)(_whs.Box);\n\n/***/ }),\n/* 17 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Cylinder = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Cylinder = exports.Cylinder = (0, _reactify.reactify)(_whs.Cylinder);\n\n/***/ }),\n/* 18 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Dodecahedron = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Dodecahedron = exports.Dodecahedron = (0, _reactify.reactify)(_whs.Dodecahedron);\n\n/***/ }),\n/* 19 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Extrude = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Extrude = exports.Extrude = (0, _reactify.reactify)(_whs.Extrude);\n\n/***/ }),\n/* 20 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Group = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Group = exports.Group = (0, _reactify.reactify)(_whs.Group);\n\n/***/ }),\n/* 21 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Icosahedron = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Icosahedron = exports.Icosahedron = (0, _reactify.reactify)(_whs.Icosahedron);\n\n/***/ }),\n/* 22 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Lathe = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Lathe = exports.Lathe = (0, _reactify.reactify)(_whs.Lathe);\n\n/***/ }),\n/* 23 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Line = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Line = exports.Line = (0, _reactify.reactify)(_whs.Line);\n\n/***/ }),\n/* 24 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Model = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Model = exports.Model = (0, _reactify.reactify)(_whs.Model);\n\n/***/ }),\n/* 25 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Octahedron = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Octahedron = exports.Octahedron = (0, _reactify.reactify)(_whs.Octahedron);\n\n/***/ }),\n/* 26 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Parametric = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Parametric = exports.Parametric = (0, _reactify.reactify)(_whs.Parametric);\n\n/***/ }),\n/* 27 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Plane = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Plane = exports.Plane = (0, _reactify.reactify)(_whs.Plane);\n\n/***/ }),\n/* 28 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Polyhedron = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Polyhedron = exports.Polyhedron = (0, _reactify.reactify)(_whs.Polyhedron);\n\n/***/ }),\n/* 29 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Ring = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Ring = exports.Ring = (0, _reactify.reactify)(_whs.Ring);\n\n/***/ }),\n/* 30 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Shape = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Shape = exports.Shape = (0, _reactify.reactify)(_whs.Shape);\n\n/***/ }),\n/* 31 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Sphere = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Sphere = exports.Sphere = (0, _reactify.reactify)(_whs.Sphere);\n\n/***/ }),\n/* 32 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Tetrahedron = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Tetrahedron = exports.Tetrahedron = (0, _reactify.reactify)(_whs.Tetrahedron);\n\n/***/ }),\n/* 33 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Text = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Text = exports.Text = (0, _reactify.reactify)(_whs.Text);\n\n/***/ }),\n/* 34 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Torus = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Torus = exports.Torus = (0, _reactify.reactify)(_whs.Torus);\n\n/***/ }),\n/* 35 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Torusknot = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Torusknot = exports.Torusknot = (0, _reactify.reactify)(_whs.Torusknot);\n\n/***/ }),\n/* 36 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Tube = undefined;\n\nvar _whs = __webpack_require__(1);\n\nvar _reactify = __webpack_require__(0);\n\nvar Tube = exports.Tube = (0, _reactify.reactify)(_whs.Tube);\n\n/***/ }),\n/* 37 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _App = __webpack_require__(4);\n\nObject.keys(_App).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _App[key];\n }\n });\n});\n\nvar _reactify = __webpack_require__(0);\n\nObject.keys(_reactify).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _reactify[key];\n }\n });\n});\n\nvar _index = __webpack_require__(7);\n\nObject.keys(_index).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _index[key];\n }\n });\n});\n\nvar _index2 = __webpack_require__(6);\n\nObject.keys(_index2).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _index2[key];\n }\n });\n});\n\nvar _index3 = __webpack_require__(5);\n\nObject.keys(_index3).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _index3[key];\n }\n });\n});\n\n/***/ }),\n/* 38 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\n\nfunction makeEmptyFunction(arg) {\n return function () {\n return arg;\n };\n}\n\n/**\n * This function accepts and discards inputs; it has no side effects. This is\n * primarily useful idiomatically for overridable function endpoints which\n * always need to be callable, since JS lacks a null-call idiom ala Cocoa.\n */\nvar emptyFunction = function emptyFunction() {};\n\nemptyFunction.thatReturns = makeEmptyFunction;\nemptyFunction.thatReturnsFalse = makeEmptyFunction(false);\nemptyFunction.thatReturnsTrue = makeEmptyFunction(true);\nemptyFunction.thatReturnsNull = makeEmptyFunction(null);\nemptyFunction.thatReturnsThis = function () {\n return this;\n};\nemptyFunction.thatReturnsArgument = function (arg) {\n return arg;\n};\n\nmodule.exports = emptyFunction;\n\n/***/ }),\n/* 39 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\n\n\nvar emptyObject = {};\n\nif (false) {\n Object.freeze(emptyObject);\n}\n\nmodule.exports = emptyObject;\n\n/***/ }),\n/* 40 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n/***/ }),\n/* 41 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n/** @license React v16.2.0\n * react.production.min.js\n *\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nvar m=__webpack_require__(40),n=__webpack_require__(39),p=__webpack_require__(38),q=\"function\"===typeof Symbol&&Symbol[\"for\"],r=q?Symbol[\"for\"](\"react.element\"):60103,t=q?Symbol[\"for\"](\"react.call\"):60104,u=q?Symbol[\"for\"](\"react.return\"):60105,v=q?Symbol[\"for\"](\"react.portal\"):60106,w=q?Symbol[\"for\"](\"react.fragment\"):60107,x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){for(var b=arguments.length-1,e=\"Minified React error #\"+a+\"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\\x3d\"+a,c=0;cM.length&&M.push(a)}\nfunction P(a,b,e,c){var d=typeof a;if(\"undefined\"===d||\"boolean\"===d)a=null;var g=!1;if(null===a)g=!0;else switch(d){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case r:case t:case u:case v:g=!0}}if(g)return e(c,a,\"\"===b?\".\"+Q(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var k=0;k 0) return children.map(child => this.wrapChild(child));\n else if (children) return this.wrapChild(children);\n else return null;\n }\n\n mount() {\n if (this.props.parent)\n if (this.props.parent.mounted)\n this.props.parent.native.add(this.native);\n else if (this.props.onParentMount)\n this.props.onParentMount(() => this.props.parent.native.add(this.native));\n\n this.defer.forEach(func => func());\n this.mounted = true;\n }\n\n unmount() {\n if (this.props.parent)\n this.props.parent.native.remove(this.native);\n \n this.mounted = false;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/TransitionBase.js","import React from 'react';\nimport {App as AppOrigin} from 'whs';\nimport {TransitionBase} from './TransitionBase';\n\nexport class App extends TransitionBase {\n static defaultProps = {\n start: true,\n parent: 'div',\n parentStyle: {flex: 1}\n };\n\n constructor(...props) {\n super(...props);\n\n const {refApp, start} = this.props;\n\n this.native = new AppOrigin();\n if (start) this.native.start();\n if (refApp) refApp(this.native);\n }\n\n componentDidMount() {\n const {\n modules,\n afterMount,\n afterMountParams,\n passAppToView\n } = this.props;\n\n this.native.manager.set('element', this.element, {alias: '$element'});\n\n modules.forEach(module => {\n this.native.applyModule(module);\n });\n\n if (passAppToView) passAppToView(this);\n this.mount();\n if (afterMount) afterMount.bind(this)(afterMountParams);\n }\n\n render() {\n const {parent: Parent, parentStyle} = this.props;\n\n return (\n {this.element = ref}}>\n {this.applyChildren()}\n \n )\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.js","export * from './CubeCamera';\nexport * from './OrthographicCamera';\nexport * from './PerspectiveCamera';\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/cameras/index.js","export * from './AmbientLight';\nexport * from './DirectionalLight';\nexport * from './HemisphereLight';\nexport * from './PointLight';\nexport * from './SpotLight';\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/lights/index.js","export * from './Box';\nexport * from './Cylinder';\nexport * from './Dodecahedron';\nexport * from './Extrude';\nexport * from './Icosahedron';\nexport * from './Lathe';\nexport * from './Line';\nexport * from './Model';\nexport * from './Octahedron';\nexport * from './Parametric';\nexport * from './Plane';\nexport * from './Polyhedron';\nexport * from './Ring';\nexport * from './Shape';\nexport * from './Sphere';\nexport * from './Tetrahedron';\nexport * from './Text';\nexport * from './Torus';\nexport * from './Torusknot';\nexport * from './Tube';\nexport * from './Group';\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/index.js","import {CubeCamera as CubeCameraOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const CubeCamera = reactify(CubeCameraOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/cameras/CubeCamera.js","import {OrthographicCamera as OrthographicCameraOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const OrthographicCamera = reactify(OrthographicCameraOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/cameras/OrthographicCamera.js","import {PerspectiveCamera as PerspectiveCameraOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const PerspectiveCamera = reactify(PerspectiveCameraOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/cameras/PerspectiveCamera.js","import {AmbientLight as AmbientLightOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const AmbientLight = reactify(AmbientLightOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/lights/AmbientLight.js","import {DirectionalLight as DirectionalLightOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const DirectionalLight = reactify(DirectionalLightOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/lights/DirectionalLight.js","import {HemisphereLight as HemisphereLightOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const HemisphereLight = reactify(HemisphereLightOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/lights/HemisphereLight.js","import {PointLight as PointLightOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const PointLight = reactify(PointLightOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/lights/PointLight.js","import {SpotLight as SpotLightOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const SpotLight = reactify(SpotLightOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/lights/SpotLight.js","import {Box as BoxOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Box = reactify(BoxOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Box.js","import {Cylinder as CylinderOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Cylinder = reactify(CylinderOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Cylinder.js","import {Dodecahedron as DodecahedronOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Dodecahedron = reactify(DodecahedronOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Dodecahedron.js","import {Extrude as ExtrudeOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Extrude = reactify(ExtrudeOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Extrude.js","import {Group as GroupOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Group = reactify(GroupOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Group.js","import {Icosahedron as IcosahedronOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Icosahedron = reactify(IcosahedronOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Icosahedron.js","import {Lathe as LatheOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Lathe = reactify(LatheOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Lathe.js","import {Line as LineOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Line = reactify(LineOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Line.js","import {Model as ModelOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Model = reactify(ModelOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Model.js","import {Octahedron as OctahedronOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Octahedron = reactify(OctahedronOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Octahedron.js","import {Parametric as ParametricOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Parametric = reactify(ParametricOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Parametric.js","import {Plane as PlaneOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Plane = reactify(PlaneOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Plane.js","import {Polyhedron as PolyhedronOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Polyhedron = reactify(PolyhedronOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Polyhedron.js","import {Ring as RingOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Ring = reactify(RingOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Ring.js","import {Shape as ShapeOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Shape = reactify(ShapeOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Shape.js","import {Sphere as SphereOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Sphere = reactify(SphereOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Sphere.js","import {Tetrahedron as TetrahedronOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Tetrahedron = reactify(TetrahedronOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Tetrahedron.js","import {Text as TextOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Text = reactify(TextOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Text.js","import {Torus as TorusOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Torus = reactify(TorusOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Torus.js","import {Torusknot as TorusknotOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Torusknot = reactify(TorusknotOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Torusknot.js","import {Tube as TubeOrigin} from 'whs';\nimport {reactify} from '../../reactify';\nexport const Tube = reactify(TubeOrigin);\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/meshes/Tube.js","export * from './App';\nexport * from './reactify';\nexport * from './components/meshes/index';\nexport * from './components/lights/index';\nexport * from './components/cameras/index';\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","\"use strict\";\n\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\n\nfunction makeEmptyFunction(arg) {\n return function () {\n return arg;\n };\n}\n\n/**\n * This function accepts and discards inputs; it has no side effects. This is\n * primarily useful idiomatically for overridable function endpoints which\n * always need to be callable, since JS lacks a null-call idiom ala Cocoa.\n */\nvar emptyFunction = function emptyFunction() {};\n\nemptyFunction.thatReturns = makeEmptyFunction;\nemptyFunction.thatReturnsFalse = makeEmptyFunction(false);\nemptyFunction.thatReturnsTrue = makeEmptyFunction(true);\nemptyFunction.thatReturnsNull = makeEmptyFunction(null);\nemptyFunction.thatReturnsThis = function () {\n return this;\n};\nemptyFunction.thatReturnsArgument = function (arg) {\n return arg;\n};\n\nmodule.exports = emptyFunction;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/fbjs/lib/emptyFunction.js\n// module id = 38\n// module chunks = 0","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\n'use strict';\n\nvar emptyObject = {};\n\nif (process.env.NODE_ENV !== 'production') {\n Object.freeze(emptyObject);\n}\n\nmodule.exports = emptyObject;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/fbjs/lib/emptyObject.js\n// module id = 39\n// module chunks = 0","/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n'use strict';\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/object-assign/index.js\n// module id = 40\n// module chunks = 0","/** @license React v16.2.0\n * react.production.min.js\n *\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var m=require(\"object-assign\"),n=require(\"fbjs/lib/emptyObject\"),p=require(\"fbjs/lib/emptyFunction\"),q=\"function\"===typeof Symbol&&Symbol[\"for\"],r=q?Symbol[\"for\"](\"react.element\"):60103,t=q?Symbol[\"for\"](\"react.call\"):60104,u=q?Symbol[\"for\"](\"react.return\"):60105,v=q?Symbol[\"for\"](\"react.portal\"):60106,w=q?Symbol[\"for\"](\"react.fragment\"):60107,x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){for(var b=arguments.length-1,e=\"Minified React error #\"+a+\"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\\x3d\"+a,c=0;cM.length&&M.push(a)}\nfunction P(a,b,e,c){var d=typeof a;if(\"undefined\"===d||\"boolean\"===d)a=null;var g=!1;if(null===a)g=!0;else switch(d){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case r:case t:case u:case v:g=!0}}if(g)return e(c,a,\"\"===b?\".\"+Q(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var k=0;k { 33 | this.native.applyModule(module); 34 | }); 35 | 36 | if (passAppToView) passAppToView(this); 37 | this.mount(); 38 | if (afterMount) afterMount.bind(this)(afterMountParams); 39 | } 40 | 41 | render() { 42 | const {parent: Parent, parentStyle} = this.props; 43 | 44 | return ( 45 | {this.element = ref}}> 46 | {this.applyChildren()} 47 | 48 | ) 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/TransitionBase.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | export class TransitionBase extends Component { 4 | defer = []; 5 | mounted = false; 6 | 7 | deferParent(func) { 8 | this.defer.push(func); 9 | } 10 | 11 | wrapChild(child) { 12 | return React.cloneElement(child, { 13 | parent: this, 14 | onParentMount: this.deferParent.bind(this) 15 | }); 16 | } 17 | 18 | applyChildren() { 19 | const children = this.props.children; 20 | 21 | if (children && children.length > 0) return children.map(child => this.wrapChild(child)); 22 | else if (children) return this.wrapChild(children); 23 | else return null; 24 | } 25 | 26 | mount() { 27 | if (this.props.parent) 28 | if (this.props.parent.mounted) 29 | this.props.parent.native.add(this.native); 30 | else if (this.props.onParentMount) 31 | this.props.onParentMount(() => this.props.parent.native.add(this.native)); 32 | 33 | this.defer.forEach(func => func()); 34 | this.mounted = true; 35 | } 36 | 37 | unmount() { 38 | if (this.props.parent) 39 | this.props.parent.native.remove(this.native); 40 | 41 | this.mounted = false; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/cameras/CubeCamera.js: -------------------------------------------------------------------------------- 1 | import {CubeCamera as CubeCameraOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const CubeCamera = reactify(CubeCameraOrigin); 4 | -------------------------------------------------------------------------------- /src/components/cameras/OrthographicCamera.js: -------------------------------------------------------------------------------- 1 | import {OrthographicCamera as OrthographicCameraOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const OrthographicCamera = reactify(OrthographicCameraOrigin); 4 | -------------------------------------------------------------------------------- /src/components/cameras/PerspectiveCamera.js: -------------------------------------------------------------------------------- 1 | import {PerspectiveCamera as PerspectiveCameraOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const PerspectiveCamera = reactify(PerspectiveCameraOrigin); 4 | -------------------------------------------------------------------------------- /src/components/cameras/index.js: -------------------------------------------------------------------------------- 1 | export * from './CubeCamera'; 2 | export * from './OrthographicCamera'; 3 | export * from './PerspectiveCamera'; 4 | -------------------------------------------------------------------------------- /src/components/lights/AmbientLight.js: -------------------------------------------------------------------------------- 1 | import {AmbientLight as AmbientLightOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const AmbientLight = reactify(AmbientLightOrigin); 4 | -------------------------------------------------------------------------------- /src/components/lights/DirectionalLight.js: -------------------------------------------------------------------------------- 1 | import {DirectionalLight as DirectionalLightOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const DirectionalLight = reactify(DirectionalLightOrigin); 4 | -------------------------------------------------------------------------------- /src/components/lights/HemisphereLight.js: -------------------------------------------------------------------------------- 1 | import {HemisphereLight as HemisphereLightOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const HemisphereLight = reactify(HemisphereLightOrigin); 4 | -------------------------------------------------------------------------------- /src/components/lights/PointLight.js: -------------------------------------------------------------------------------- 1 | import {PointLight as PointLightOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const PointLight = reactify(PointLightOrigin); 4 | -------------------------------------------------------------------------------- /src/components/lights/SpotLight.js: -------------------------------------------------------------------------------- 1 | import {SpotLight as SpotLightOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const SpotLight = reactify(SpotLightOrigin); 4 | -------------------------------------------------------------------------------- /src/components/lights/index.js: -------------------------------------------------------------------------------- 1 | export * from './AmbientLight'; 2 | export * from './DirectionalLight'; 3 | export * from './HemisphereLight'; 4 | export * from './PointLight'; 5 | export * from './SpotLight'; 6 | -------------------------------------------------------------------------------- /src/components/meshes/Box.js: -------------------------------------------------------------------------------- 1 | import {Box as BoxOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Box = reactify(BoxOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Cylinder.js: -------------------------------------------------------------------------------- 1 | import {Cylinder as CylinderOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Cylinder = reactify(CylinderOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Dodecahedron.js: -------------------------------------------------------------------------------- 1 | import {Dodecahedron as DodecahedronOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Dodecahedron = reactify(DodecahedronOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Extrude.js: -------------------------------------------------------------------------------- 1 | import {Extrude as ExtrudeOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Extrude = reactify(ExtrudeOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Group.js: -------------------------------------------------------------------------------- 1 | import {Group as GroupOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Group = reactify(GroupOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Icosahedron.js: -------------------------------------------------------------------------------- 1 | import {Icosahedron as IcosahedronOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Icosahedron = reactify(IcosahedronOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Lathe.js: -------------------------------------------------------------------------------- 1 | import {Lathe as LatheOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Lathe = reactify(LatheOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Line.js: -------------------------------------------------------------------------------- 1 | import {Line as LineOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Line = reactify(LineOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Model.js: -------------------------------------------------------------------------------- 1 | import {Model as ModelOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Model = reactify(ModelOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Octahedron.js: -------------------------------------------------------------------------------- 1 | import {Octahedron as OctahedronOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Octahedron = reactify(OctahedronOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Parametric.js: -------------------------------------------------------------------------------- 1 | import {Parametric as ParametricOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Parametric = reactify(ParametricOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Plane.js: -------------------------------------------------------------------------------- 1 | import {Plane as PlaneOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Plane = reactify(PlaneOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Polyhedron.js: -------------------------------------------------------------------------------- 1 | import {Polyhedron as PolyhedronOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Polyhedron = reactify(PolyhedronOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Ring.js: -------------------------------------------------------------------------------- 1 | import {Ring as RingOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Ring = reactify(RingOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Shape.js: -------------------------------------------------------------------------------- 1 | import {Shape as ShapeOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Shape = reactify(ShapeOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Sphere.js: -------------------------------------------------------------------------------- 1 | import {Sphere as SphereOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Sphere = reactify(SphereOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Tetrahedron.js: -------------------------------------------------------------------------------- 1 | import {Tetrahedron as TetrahedronOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Tetrahedron = reactify(TetrahedronOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Text.js: -------------------------------------------------------------------------------- 1 | import {Text as TextOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Text = reactify(TextOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Torus.js: -------------------------------------------------------------------------------- 1 | import {Torus as TorusOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Torus = reactify(TorusOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Torusknot.js: -------------------------------------------------------------------------------- 1 | import {Torusknot as TorusknotOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Torusknot = reactify(TorusknotOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/Tube.js: -------------------------------------------------------------------------------- 1 | import {Tube as TubeOrigin} from 'whs'; 2 | import {reactify} from '../../reactify'; 3 | export const Tube = reactify(TubeOrigin); 4 | -------------------------------------------------------------------------------- /src/components/meshes/index.js: -------------------------------------------------------------------------------- 1 | export * from './Box'; 2 | export * from './Cylinder'; 3 | export * from './Dodecahedron'; 4 | export * from './Extrude'; 5 | export * from './Icosahedron'; 6 | export * from './Lathe'; 7 | export * from './Line'; 8 | export * from './Model'; 9 | export * from './Octahedron'; 10 | export * from './Parametric'; 11 | export * from './Plane'; 12 | export * from './Polyhedron'; 13 | export * from './Ring'; 14 | export * from './Shape'; 15 | export * from './Sphere'; 16 | export * from './Tetrahedron'; 17 | export * from './Text'; 18 | export * from './Torus'; 19 | export * from './Torusknot'; 20 | export * from './Tube'; 21 | export * from './Group'; 22 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export * from './App'; 2 | export * from './reactify'; 3 | export * from './components/meshes/index'; 4 | export * from './components/lights/index'; 5 | export * from './components/cameras/index'; 6 | -------------------------------------------------------------------------------- /src/reactify.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {TransitionBase} from './TransitionBase'; 3 | 4 | export function reactify(component) { 5 | return class extends TransitionBase { 6 | constructor(...props) { 7 | super(...props); 8 | this.native = new component(Object.assign({}, this.props)); 9 | 10 | const {refComponent} = this.props; 11 | if (refComponent) refComponent(this.native); 12 | } 13 | 14 | render() { 15 | return this.applyChildren(); 16 | } 17 | 18 | componentDidMount() { 19 | this.mount(); 20 | } 21 | 22 | componentWillUnmount() { 23 | this.unmount(); 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "plugins": [ 7 | "add-module-exports", 8 | "transform-class-properties" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /test/folding/folding.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {App, Sphere} from '../../src/index'; 4 | 5 | import * as WHS from 'whs'; 6 | import * as THREE from 'three'; 7 | 8 | export class Application extends Component { 9 | render() { 10 | return ( 11 | 21 | 26 | 31 | 32 | 38 | 39 | ) 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /test/folding/folding.test.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import renderer from 'react-test-renderer'; 4 | 5 | import {Application} from './folding'; 6 | 7 | test('just works', () => { 8 | const component = renderer.create( 9 | 10 | ); 11 | 12 | const tree = component.toJSON(); 13 | expect(tree).toMatchSnapshot(); 14 | }); 15 | -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import webpack from 'webpack'; 3 | import {version} from './package.json'; 4 | 5 | process.env.BABEL_ENV = 'browser'; 6 | 7 | const isProduction = process.env.NODE_ENV === 'production'; 8 | 9 | console.log( 10 | isProduction 11 | ? 'Production mode' 12 | : 'Development mode' 13 | ); 14 | 15 | console.log(`react-whs v${version}`); 16 | 17 | export default { 18 | devtool: 'source-map', 19 | entry: './src/index.js', 20 | target: 'web', 21 | output: { 22 | path: path.join(__dirname, './build/'), 23 | filename: 'react-whs.js', 24 | libraryTarget: 'umd', 25 | library: 'WHSReact' 26 | }, 27 | externals: { 28 | whs: { 29 | commonjs: "whs", 30 | commonjs2: "whs", 31 | amd: "whs", 32 | root: "WHS" 33 | }, 34 | three: 'THREE' 35 | }, 36 | module: { 37 | loaders: [ 38 | { 39 | test: /\.js$/, 40 | exclude: /node_modules/, 41 | loader: 'babel-loader' 42 | } 43 | ] 44 | }, 45 | plugins: isProduction 46 | ? [ 47 | new webpack.BannerPlugin({ 48 | banner: `react-whs v${version}` 49 | }), 50 | new webpack.DefinePlugin({ 51 | 'process.env': { 52 | 'NODE_ENV': JSON.stringify('production') 53 | } 54 | }), 55 | new webpack.optimize.UglifyJsPlugin({ 56 | compress: { warnings: false }, 57 | minimize: true, 58 | sourceMap: true 59 | }), 60 | ] 61 | : [ 62 | new webpack.DefinePlugin({ 63 | 'process.env': { 64 | 'NODE_ENV': JSON.stringify('development') 65 | } 66 | }) 67 | ], 68 | resolve: { 69 | alias: { 70 | 'react': path.join(__dirname, 'node_modules', 'react') 71 | } 72 | }, 73 | devServer: { 74 | contentBase: './examples/', 75 | publicPath: '/build/' 76 | } 77 | } 78 | --------------------------------------------------------------------------------