├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── demo.gif ├── dist ├── index.d.ts ├── index.js ├── react-spline.js ├── react-spline.js.map ├── react-spline.modern.js.map ├── spline-runtime.d.ts └── splineRuntime.d.ts ├── example ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── precache-manifest.5dd236636be1d2e5d146985089f1054e.js │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.60b352f9.chunk.css │ │ └── main.60b352f9.chunk.css.map │ │ └── js │ │ ├── 2.75b2386a.chunk.js │ │ ├── 2.75b2386a.chunk.js.LICENSE.txt │ │ ├── 2.75b2386a.chunk.js.map │ │ ├── main.ce4e059d.chunk.js │ │ ├── main.ce4e059d.chunk.js.map │ │ ├── runtime-main.ef3808fc.js │ │ └── runtime-main.ef3808fc.js.map ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.test.tsx │ ├── App.tsx │ ├── assets.js │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── scene-two.json │ ├── scene.json │ └── setupTests.ts ├── tsconfig.json └── yarn.lock ├── package.json ├── scripts └── mv.js ├── src ├── index.tsx ├── react-app-env.d.ts ├── splineRuntime.js └── typings.d.ts ├── tsconfig.json ├── tsconfig.test.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | node_modules/ 4 | .snapshots/ 5 | *.min.js -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "extends": [ 4 | "standard", 5 | "standard-react", 6 | "plugin:prettier/recommended", 7 | "prettier/standard", 8 | "prettier/react", 9 | "plugin:@typescript-eslint/eslint-recommended" 10 | ], 11 | "env": { 12 | "node": true 13 | }, 14 | "parserOptions": { 15 | "ecmaVersion": 2020, 16 | "ecmaFeatures": { 17 | "legacyDecorators": true, 18 | "jsx": true 19 | } 20 | }, 21 | "settings": { 22 | "react": { 23 | "version": "16" 24 | } 25 | }, 26 | "rules": { 27 | "space-before-function-paren": 0, 28 | "react/prop-types": 0, 29 | "react/jsx-handler-names": 0, 30 | "react/jsx-fragments": 0, 31 | "react/no-unused-prop-types": 0, 32 | "import/export": 0 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | yarn-error.log 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "jsxSingleQuote": true, 4 | "semi": false, 5 | "tabWidth": 2, 6 | "bracketSpacing": true, 7 | "jsxBracketSameLine": false, 8 | "arrowParens": "always", 9 | "trailingComma": "none" 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Spline 2 | 3 | [![NPM](https://img.shields.io/npm/v/react-spline.svg)](https://www.npmjs.com/package/react-spline) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 4 | 5 | ## Archive Notice 6 | The repository has been archived now since Spline has released their official library [@splinetool/react-spline](https://www.npmjs.com/package/@splinetool/react-spline) for importing models. I had fun maintaining this project, if your existing workspace is using `react-spline`, the transitioning won't be hard since most of the generics are similar. Thanks for stopping by. 7 | 8 | A painless, configurable, [spline](https://spline.design) wrapper for React to add sweet animations easily into your projects. 9 | 10 | ![Demo Gif](./demo.gif) 11 | 12 | ## Install 13 | 14 | ```bash 15 | npm install --save react-spline 16 | ``` 17 | 18 | or 19 | 20 | ```bash 21 | yarn add react-spline 22 | ``` 23 | 24 | ## Usage 25 | 26 | Import the `Spline` component from `react-spline` and you're set. 27 | 28 | ```tsx 29 | import React, { Component } from 'react' 30 | 31 | import { Spline } from 'react-spline' 32 | import SCENE_OBJECT from './scene.json' 33 | 34 | class Example extends Component { 35 | render() { 36 | return 37 | } 38 | } 39 | ``` 40 | 41 | ## Props 42 | 43 | | Property | Description | 44 | | --------------------- | ------------------------------------------------------------------------ | 45 | | scene `object` | Required. The scene object exported from Spline. | 46 | | id `string` | Default empty. Assignable HTMLAttribute `id` for the `` element. | 47 | | className `string` | Default empty. Assignable HTMLAttribute `class` for the `
` wrapper. | 48 | | style `JSX CSS` | Default empty. Custom styling for the `
` wrapper. | 49 | | canvasStyle `JSX CSS` | Default empty. Custom styling for the `` element. | 50 | 51 | ## Loading the Spline model 52 | To download Spline models from the link that gets generated in Spline, it's accessible at ``https://my.spline.design/example-8b43571.../scene.json`` (**Note**: Here *example-8b43571* in the link is a placeholder for a Spline generated link). You can then import the object and use it like shown above. 53 | 54 | ## Multiple THREE.js Warning Issue 55 | The older versions of this library experience a ~~bug~~ problem, where outdated usage of functions in the Spline runtime cause multiple duplicate warnings to clutter the console. For now, it has been disabled by a workaround script that removes duplicate warnings from the console until we have a proper solution. 56 | 57 | ## License 58 | 59 | MIT © [utkarshdubey](https://github.com/utkarshdubey) 60 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/utkarshdubey/react-spline/282b00f626ed7dc6ed2c4e7f19712a6d9ef2a203/demo.gif -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | interface Props { 3 | scene: object; 4 | id?: string; 5 | className?: string; 6 | style?: React.CSSProperties; 7 | canvasStyle?: React.CSSProperties; 8 | containerStyle?: React.CSSProperties; 9 | } 10 | export declare const Spline: ({ scene, id, className, style, canvasStyle, containerStyle }: Props) => JSX.Element; 11 | export {}; 12 | -------------------------------------------------------------------------------- /dist/spline-runtime.d.ts: -------------------------------------------------------------------------------- 1 | export function speRuntimeFactory(exports: any): any; 2 | -------------------------------------------------------------------------------- /dist/splineRuntime.d.ts: -------------------------------------------------------------------------------- 1 | export function speRuntimeFactory(exports: any): any; 2 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | It is linked to the react-spline package in the parent directory for development purposes. 4 | 5 | You can run `yarn install` and then `yarn start` to test your package. 6 | -------------------------------------------------------------------------------- /example/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "./static/css/main.60b352f9.chunk.css", 4 | "main.js": "./static/js/main.ce4e059d.chunk.js", 5 | "main.js.map": "./static/js/main.ce4e059d.chunk.js.map", 6 | "runtime-main.js": "./static/js/runtime-main.ef3808fc.js", 7 | "runtime-main.js.map": "./static/js/runtime-main.ef3808fc.js.map", 8 | "static/js/2.75b2386a.chunk.js": "./static/js/2.75b2386a.chunk.js", 9 | "static/js/2.75b2386a.chunk.js.map": "./static/js/2.75b2386a.chunk.js.map", 10 | "index.html": "./index.html", 11 | "precache-manifest.5dd236636be1d2e5d146985089f1054e.js": "./precache-manifest.5dd236636be1d2e5d146985089f1054e.js", 12 | "service-worker.js": "./service-worker.js", 13 | "static/css/main.60b352f9.chunk.css.map": "./static/css/main.60b352f9.chunk.css.map", 14 | "static/js/2.75b2386a.chunk.js.LICENSE.txt": "./static/js/2.75b2386a.chunk.js.LICENSE.txt" 15 | }, 16 | "entrypoints": [ 17 | "static/js/runtime-main.ef3808fc.js", 18 | "static/js/2.75b2386a.chunk.js", 19 | "static/css/main.60b352f9.chunk.css", 20 | "static/js/main.ce4e059d.chunk.js" 21 | ] 22 | } -------------------------------------------------------------------------------- /example/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/utkarshdubey/react-spline/282b00f626ed7dc6ed2c4e7f19712a6d9ef2a203/example/build/favicon.ico -------------------------------------------------------------------------------- /example/build/index.html: -------------------------------------------------------------------------------- 1 | react-spline
-------------------------------------------------------------------------------- /example/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "react-spline", 3 | "name": "react-spline", 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 | -------------------------------------------------------------------------------- /example/build/precache-manifest.5dd236636be1d2e5d146985089f1054e.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "2697c9bb7142ee29a4c2d6d01f3f3443", 4 | "url": "./index.html" 5 | }, 6 | { 7 | "revision": "3c8277b577653fd7e68c", 8 | "url": "./static/css/main.60b352f9.chunk.css" 9 | }, 10 | { 11 | "revision": "c800876f1cbdde145e4a", 12 | "url": "./static/js/2.75b2386a.chunk.js" 13 | }, 14 | { 15 | "revision": "570d362d673dab785e62d2b8563e1118", 16 | "url": "./static/js/2.75b2386a.chunk.js.LICENSE.txt" 17 | }, 18 | { 19 | "revision": "3c8277b577653fd7e68c", 20 | "url": "./static/js/main.ce4e059d.chunk.js" 21 | }, 22 | { 23 | "revision": "f7a0d689a3fb70786813", 24 | "url": "./static/js/runtime-main.ef3808fc.js" 25 | } 26 | ]); -------------------------------------------------------------------------------- /example/build/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Welcome to your Workbox-powered service worker! 3 | * 4 | * You'll need to register this file in your web app and you should 5 | * disable HTTP caching for this file too. 6 | * See https://goo.gl/nhQhGp 7 | * 8 | * The rest of the code is auto-generated. Please don't update this file 9 | * directly; instead, make changes to your Workbox build configuration 10 | * and re-run your build process. 11 | * See https://goo.gl/2aRDsh 12 | */ 13 | 14 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); 15 | 16 | importScripts( 17 | "./precache-manifest.5dd236636be1d2e5d146985089f1054e.js" 18 | ); 19 | 20 | self.addEventListener('message', (event) => { 21 | if (event.data && event.data.type === 'SKIP_WAITING') { 22 | self.skipWaiting(); 23 | } 24 | }); 25 | 26 | workbox.core.clientsClaim(); 27 | 28 | /** 29 | * The workboxSW.precacheAndRoute() method efficiently caches and responds to 30 | * requests for URLs in the manifest. 31 | * See https://goo.gl/S9QRab 32 | */ 33 | self.__precacheManifest = [].concat(self.__precacheManifest || []); 34 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); 35 | 36 | workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("./index.html"), { 37 | 38 | blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/], 39 | }); 40 | -------------------------------------------------------------------------------- /example/build/static/css/main.60b352f9.chunk.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-align:center}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace} 2 | /*# sourceMappingURL=main.60b352f9.chunk.css.map */ -------------------------------------------------------------------------------- /example/build/static/css/main.60b352f9.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,SAAU,CACV,mJAEY,CACZ,kCAAmC,CACnC,iCAAkC,CAClC,iBAAkB,CAClB,iBACF,CAEA,KACE,yEAEF","file":"main.60b352f9.chunk.css","sourcesContent":["body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n text-align: center;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n\n"]} -------------------------------------------------------------------------------- /example/build/static/js/2.75b2386a.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** @license React v0.19.1 8 | * scheduler.production.min.js 9 | * 10 | * Copyright (c) Facebook, Inc. and its affiliates. 11 | * 12 | * This source code is licensed under the MIT license found in the 13 | * LICENSE file in the root directory of this source tree. 14 | */ 15 | 16 | /** @license React v16.14.0 17 | * react-dom.production.min.js 18 | * 19 | * Copyright (c) Facebook, Inc. and its affiliates. 20 | * 21 | * This source code is licensed under the MIT license found in the 22 | * LICENSE file in the root directory of this source tree. 23 | */ 24 | 25 | /** @license React v16.14.0 26 | * react.production.min.js 27 | * 28 | * Copyright (c) Facebook, Inc. and its affiliates. 29 | * 30 | * This source code is licensed under the MIT license found in the 31 | * LICENSE file in the root directory of this source tree. 32 | */ 33 | -------------------------------------------------------------------------------- /example/build/static/js/runtime-main.ef3808fc.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,l,a=r[0],p=r[1],i=r[2],c=0,s=[];c0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/utkarshdubey/react-spline/282b00f626ed7dc6ed2c4e7f19712a6d9ef2a203/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 16 | 17 | 18 | 27 | react-spline 28 | 29 | 30 | 31 | 34 | 35 |
36 | 37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "react-spline", 3 | "name": "react-spline", 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 | -------------------------------------------------------------------------------- /example/src/App.test.tsx: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SPLINE_EXPORTED_SCENE from './scene.json' 3 | import SPLINE_EXPORTED_SCENE_TWO from './scene-two.json' 4 | import { Spline } from 'react-spline' 5 | 6 | const App = () => { 7 | return ( 8 |
9 |
17 |

18 | If you see this, react-spline works. 19 |

20 | 21 |
22 |
32 |

33 | If you see this, multiple canvas elements work too :) 34 |

35 | 36 |
37 |
38 | ) 39 | } 40 | 41 | export default App 42 | -------------------------------------------------------------------------------- /example/src/assets.js: -------------------------------------------------------------------------------- 1 | export const SPLINE_ASSETS_LIST = { fonts: [], images: [], models: [], animations: [] } 2 | -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 5 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | overflow-x: hidden; 10 | text-align: center; 11 | } 12 | 13 | code { 14 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 15 | monospace; 16 | } 17 | 18 | -------------------------------------------------------------------------------- /example/src/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.css' 2 | 3 | import React from 'react' 4 | import ReactDOM from 'react-dom' 5 | import App from './App' 6 | 7 | ReactDOM.render(, document.getElementById('root')) 8 | -------------------------------------------------------------------------------- /example/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /example/src/scene-two.json: -------------------------------------------------------------------------------- 1 | {"object":{"uuid":"00CA2653-720C-445D-8E58-8D696C536182","objectType":"Scene","name":"character_bunny","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"layers":1,"children":[{"uuid":"0E8C84A4-5F66-48DA-B6F3-1FE5E2C87B4E","objectType":"EmptyObject","name":"Tree1","matrix":[0.858799099913613,0,-1.2697271927536715,0,0,1.5296979939103466,0,0,1.2666633717531104,0,0.8567268384604484,0,330.76511390385815,-253.9631978944266,-231.35007342621577,1],"layers":1,"children":[{"uuid":"24E5662F-6F3A-4702-AB36-CD38C9FE9F5F","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,374.74999999999983,-324.46319789442657,-245.69128907388722,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"68438FD3-C2A3-4D6D-801F-647E183C0F1F"},"geometry":"A8C9B966-7A9E-4D48-AC67-9BF854D13B1A","material":"4C9314E8-DCD0-42BC-BE83-40CB261D82E4"},{"uuid":"F957579C-DA97-4F6E-8EF3-10553B577FA5","objectType":"Mesh3D","name":"Cube","matrix":[0.9999999999999998,0,5.551115123125783e-17,0,0,1,0,0,-5.551115123125783e-17,0,0.9999999999999998,0,392.10019505040304,-256.1811978944267,-258.7024663386298,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"D889191C-F65C-4FC2-ABCB-6D2B600807D9"},"geometry":"DE5C49AB-9C5F-4F89-977B-E3CE536CEB6E","material":"880068FF-995C-40D2-B824-5031D1D4508A"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"9892BDEB-3760-4ABE-BAC9-EA88C00180D6"},"enableHelper":true},{"uuid":"0B60457B-C095-46A2-8C14-ADBFF523EAE6","objectType":"EmptyObject","name":"Tree2","matrix":[0.9852187630647823,0,0.5175144452668001,0,0,1.1144942527061088,0,0,-0.5208305966533332,0,0.9915318903543815,0,-333.90568179660914,-282.46319789442657,-233.39849250445067,1],"layers":1,"children":[{"uuid":"D1EC01E7-0CD7-4104-8318-7DA13B0C20BB","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,374.74999999999983,-324.46319789442657,-245.69128907388722,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"C6F5E6F9-F512-4E38-9115-5B097F12A20E"},"geometry":"6003697B-A8C1-448A-AABB-4F44AE336A19","material":"274D3445-58A5-4DF3-BF71-9E099FD8A8AA"},{"uuid":"DC1D80E9-DD29-4109-B9A5-FC1C5C8985BB","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,354.0949999999998,-256.1811978944266,-257.1912890738872,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"B16D767E-9694-438E-9C30-B5BEF6EA954B"},"geometry":"ADA52E7A-01E1-4A24-9562-D035E4486E63","material":"794EA124-18CB-43A9-8155-500D22537B35"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"532E54BB-5E6F-4701-962F-FD3198A9A3FC"},"enableHelper":true},{"uuid":"C1403094-9A4B-4312-9C48-38A88433E178","objectType":"EmptyObject","name":"Cloud4","matrix":[-1.9051086207259103,3.5214248906976436e-16,-0.8066253975290746,0,2.3225715138158774e-16,2.0595133735053066,3.5055561746817925e-16,0,0.8034541061560678,2.323912523862691e-16,-1.8976185831544972,0,1289.0521554875925,456.7925444597956,906.5461133898007,1],"layers":1,"children":[{"uuid":"47F57838-BD01-4D4F-98BD-24DBA31FEB46","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,399.6671583573018,-304.25855305002466,-206.81148041023368,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"B39007B0-AEF4-4FE6-9CC1-1BB8055D2EDD"},"geometry":"435E2184-7F9D-43D5-9303-76FBC1A6C14E","material":"E936ECDD-EBD8-4ED6-8BAE-DD2EEB63ED0D"},{"uuid":"877124A1-F9EC-4300-A3F5-6730F85C074C","objectType":"Mesh3D","name":"Cube","matrix":[0.9999999999999998,0,-5.551115123125783e-17,0,0,1,0,0,5.551115123125783e-17,0,0.9999999999999998,0,364.60019505040304,-228.65107178327128,-286.20246633862985,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"F9A79B80-5A5F-4461-B530-9A9BD8036016"},"geometry":"5DC42410-14B0-4782-B68C-DB89EC157DFD","material":"B9CF9B5B-E1D3-49E9-B178-C68BC665EE81"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"216C4081-FA1F-418C-A624-463EC39233D0"},"enableHelper":true},{"uuid":"6429A83F-7EE3-4F96-8198-948840A8A03E","objectType":"EmptyObject","name":"Cloud3","matrix":[-1.9051086207259125,3.5214248906976426e-16,-0.8066253975290744,0,2.322571513815877e-16,2.059513373505308,3.5055561746817925e-16,0,0.8034541061560679,2.323912523862694e-16,-1.8976185831545,0,1545.1370841208363,456.7925444597961,-334.446796242057,1],"layers":1,"children":[{"uuid":"1446CF79-CD54-4915-B66E-AD1789A6F746","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,410.6671583573016,-297.2585530500247,-215.3114804102336,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"1073DBD9-09F4-459A-9191-9ECA425F29F1"},"geometry":"6B4F5B0D-3BB9-4BB8-9B30-1AFB2CE02D55","material":"40E454A3-566E-45BC-B55E-EA2564D1382B"},{"uuid":"2BB0002E-98DA-4393-A567-192FB6BC60E7","objectType":"Mesh3D","name":"Cube","matrix":[0.9999999999999998,0,-5.551115123125783e-17,0,0,1,0,0,5.551115123125783e-17,0,0.9999999999999998,0,364.60019505040304,-228.65107178327128,-286.20246633862985,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"CF01912F-EB5A-40BE-A240-4AA01C396D90"},"geometry":"F4925746-F872-4664-8A01-C9C76956B096","material":"63C82497-F413-4E8D-9891-B4962B2DB28D"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"3F41D8CA-26DF-41B1-8575-E6F889D1538D"},"enableHelper":true},{"uuid":"47EBCF93-D6A3-41E8-A8AE-BA6F97B8B8CB","objectType":"EmptyObject","name":"Cloud2","matrix":[1.159064248202876,0,-1.7136666704003534,0,0,2.059513373505307,0,0,1.7069292972099028,0,1.154507324428413,0,-876.2676866696447,693.9174652161219,667.8363081339058,1],"layers":1,"children":[{"uuid":"71F1FF9F-F67D-421D-8AA7-B3278AA17FFF","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,382.91433322836747,-290.82636978973585,-401.34589180413263,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"44ED99CB-06E9-4D32-84A9-085B73B1FAD3"},"geometry":"F3A7FF06-4FEF-4013-BE33-668A69BE42AC","material":"5BBAFBC9-B395-40E4-9819-42C1F25F48DC"},{"uuid":"7441D432-8EF6-41A6-A514-6D8793922768","objectType":"Mesh3D","name":"Cube","matrix":[0.9999999999999998,0,-5.551115123125783e-17,0,0,1,0,0,5.551115123125783e-17,0,0.9999999999999998,0,338.6001950504033,-229.65107178327125,-275.70246633863,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"CDC87588-DE1F-410F-88D5-1023C6D3D2CF"},"geometry":"271475F2-93E1-4DB3-98E0-BF6D537C26F4","material":"C9DC1AC7-CA28-477B-A776-3EA8AD9BDB05"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"C4578C89-F015-4473-9C3A-87945C01DA49"},"enableHelper":true},{"uuid":"75D33F56-92CE-45D0-B37F-835FB28DEA56","objectType":"EmptyObject","name":"Cloud1","matrix":[1.1590642482028757,0,-1.7136666704003527,0,0,2.0595133735053084,0,0,1.7069292972099028,0,1.1545073244284134,0,-707.4508942298546,356.63629445979643,-887.5678546983647,1],"layers":1,"children":[{"uuid":"7D223844-4A93-4AC3-AD14-D590847E9D11","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,410.6671583573016,-297.2585530500247,-215.3114804102336,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"8C312F47-EF99-4BAE-91A8-6D81A6A65A7C"},"geometry":"444CC1FC-6055-4BBC-BC12-4D3E4FA90625","material":"4A940181-1EF8-45E9-8469-B6EA51BB7C9C"},{"uuid":"B6AC5CA6-7DA0-4EE5-B174-587A2F258908","objectType":"Mesh3D","name":"Cube","matrix":[0.9999999999999998,0,-5.551115123125783e-17,0,0,1,0,0,5.551115123125783e-17,0,0.9999999999999998,0,364.60019505040304,-228.65107178327128,-286.20246633862985,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-364.4224999999998,290.3221978944266,245.69128907388722,1],"interaction":{"uuid":"E1E67402-0EC6-470D-A958-717B411D8CD7"},"geometry":"9C03B438-B114-4D05-8EDD-91DA3E9CECC0","material":"A3974F17-C7C4-4686-A806-83A5C55BDBC0"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"D7D205C1-5074-4BAC-9B7B-58C306FA466C"},"enableHelper":true},{"uuid":"B8707B49-8AE0-4AE0-8E68-07AE8CC21608","objectType":"EmptyObject","name":"Character","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-0.7500000000000284,-48.981598947213286,0,1],"layers":1,"children":[{"uuid":"2E084399-65DE-40E9-8562-9C72A7F3B24F","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,-9,0,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"4115D59D-610A-4FE3-B4CB-ECC4BE98C878"},"geometry":"CD73B262-4311-4A54-9E78-D83942EE414C","material":"2B3579D9-F4AE-452E-AB5C-4A820CB5D02A"},{"uuid":"C44EB246-0518-4B72-85ED-1D97F03DFE1D","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,-155.46319789442657,-3,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"AD79F25D-A56E-4A12-84F3-2DCD38110843"},"geometry":"BF01B848-B147-4846-93F0-8C07F87E913D","material":"C9F8FFDE-CB9E-4198-A4BB-9994B4C341D6"},{"uuid":"1E556F36-E011-4AFD-A2A7-BB7A8154ADC6","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,-252.96319789442657,-3,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"4296679D-2747-4BCF-8342-0313D7E12837"},"geometry":"E7EADF0E-51B4-4A31-B8F6-59439375DBB8","material":"9B4896E8-A2E6-455D-B0BB-C96D7FC3E8F0"},{"uuid":"B56ED799-3266-4D5B-ACB9-9834C83E9C0B","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,1.8474111129762605e-13,-228.96319789442663,-108,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"A0186FA6-29C8-4DA2-8C9B-8F823688AF3B"},"geometry":"21FD66C2-0AD5-4F4D-A541-A31D09E798D5","material":"AEAD44AE-84C8-4105-B9D2-EB96E5F619E0"},{"uuid":"B708988D-693D-4796-B732-BD6722A73F60","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-72.50000000000003,7.500000000000028,95.37933532882346,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"D1F86E6F-96A9-4EC4-A723-75180EF848DB"},"geometry":"22013BB7-A38E-436A-B5FC-EEA7CE05B62A","material":"9420B7ED-60B7-4809-BB67-DB79D4444E1A"},{"uuid":"1335FD1E-8444-44DA-82E8-29A528257BEB","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,73.29999999999993,7.500000000000032,95.80983700466675,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"BAFDD093-6D62-444E-86E5-8C7E3E0F57AF"},"geometry":"EB49D5FB-1BFE-4FE0-931E-B71206F066F1","material":"9420B7ED-60B7-4809-BB67-DB79D4444E1A"},{"uuid":"A3F68743-9453-4E45-8AD7-76C322FF6B17","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,82.26337537518239,20.00000000000003,112.75867065764692,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"30DCAACC-D503-4331-9811-B6114BE5D686"},"geometry":"1674C793-4D13-4553-9870-898CCCF92839","material":"D4687AAD-792F-49CE-BD64-5C5DCE6640F4"},{"uuid":"DF1D8FC6-CB0D-4A8F-A022-A379BBE1192B","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-66.00000000000003,20.00000000000003,112.51734131529383,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"6C168164-E4FB-45BD-887A-19DD583199CC"},"geometry":"5B2E1C9B-DE88-482F-8406-1696F0B04CC1","material":"D4687AAD-792F-49CE-BD64-5C5DCE6640F4"},{"uuid":"E3C05C3F-3614-411B-B866-5B58981B978F","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-1.9999999999998135,-53.15707027999996,95.37933532882346,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"26F4BFC4-7B58-4975-9088-769986D4F9AF"},"geometry":"3A724AC4-9C31-42D2-A21B-35E741CDDC95","material":"7DB7E844-EECE-4A7C-A7EA-BE0B443DF2D5"},{"uuid":"D74F9795-1AF3-439B-AE4E-8F59CE8281A5","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-72.50000000000004,153.50000000000003,21.5,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"B8FAACA0-3141-469D-9F9A-A772A059E63F"},"geometry":"226F31A4-4804-4C88-B1B5-C394BE525843","material":"FAE7146D-6ED1-4D07-90B4-E602888C0C41"},{"uuid":"9E609C9E-736D-4E8E-9139-21F95C8B17D9","objectType":"Mesh3D","name":"Cube","matrix":[0.9718867822745324,-0.2354486832412865,0,0,0.2354486832412865,0.9718867822745324,0,0,0,0,1,0,84.26337537518239,146.868774892595,21,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"47230484-5D48-4172-97B4-30FA161CA983"},"geometry":"14276DA0-6713-402F-B110-73979D9FA477","material":"038D1026-1BD5-4B32-BF7C-A64B88216BBD"},{"uuid":"0AE8331D-0A15-4B5F-A212-93136B72637A","objectType":"Mesh3D","name":"Cube","matrix":[0.9718867822745324,-0.2354486832412865,0,0,0.2354486832412865,0.9718867822745324,0,0,0,0,1,0,93.84797312148604,188.39172194223232,25.999999999999996,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"56BAD432-6BFB-4E79-A69A-D678507FF9A9"},"geometry":"00AF00DA-8A62-4C73-B6F6-F1B261055170","material":"1D8CD08B-2F5E-4EDB-88DB-CE94029723CE"},{"uuid":"CD02F057-843E-4B49-9E9C-D571C82BF9DC","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-72.50000000000003,197.75972194223235,26,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"0253612C-CA2E-4D95-8B44-16DF19C943C7"},"geometry":"7392D3C2-FD4E-4AE1-9291-5B8A46854BC8","material":"F5F7FC74-EFCF-4363-8B04-3C12DF08E31E"},{"uuid":"D9494005-EA35-4BFB-A8D0-778A169FCEFA","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-123.50000000000006,-168.60279922095998,1,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"73927749-01AB-4133-AD76-F16C06EE055C"},"geometry":"23C53AEC-1747-4C64-8344-C4EAAF166FD6","material":"E5415489-5F88-4407-B89B-7232BA55B7E8"},{"uuid":"94B52D34-D555-4FD2-AF83-227EB8C6A4F0","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,122,-168.60279922095998,1,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"AE31A959-4111-4209-A3B3-20E2C0BDC10B"},"geometry":"9C45C54A-40A2-4FE3-A424-BD9B93AAB831","material":"EFD59CDC-91D8-4B7C-A623-A7732B6A1E19"},{"uuid":"4D214305-5DDA-41FB-A8EA-DD8A9622653A","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-79.00000000000003,-333.96319789442657,32,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"503BC318-C40A-4E40-9595-6AF37DC1700D"},"geometry":"335300D8-B746-463A-894B-7A269DD7DBD3","material":"1510DD96-21C0-4CB6-92A6-D949B09B6B27"},{"uuid":"F4234908-9A59-421C-B32F-86CD5F2CCAE1","objectType":"Mesh3D","name":"Cube","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,75.76337537518239,-333.96319789442657,32,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"59CE8A00-1F44-41F1-8573-BD72A43207D1"},"geometry":"2250BE1E-1217-441B-8455-9DA7B9949EE1","material":"FE41D302-064F-456D-ACAC-FF198F460575"},{"uuid":"CCE3609E-80D1-4C54-94DE-02A090C3273C","objectType":"Mesh2D","name":"Shadow","matrix":[1,0,0,0,0,2.220446049250313e-16,-1,0,0,1,2.220446049250313e-16,0,-4.630744724854465,-357.54202897196535,18.07841391998207,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0.7500000000000284,48.981598947213286,0,1],"interaction":{"uuid":"31C2D784-15FC-4EB3-BE6F-9D88BDB45764"},"geometry":"45FB4232-BE89-4827-9164-463DBB0C6247","material":"8BD8AF10-67E7-4B00-BD7C-890E9A393AC3"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"47C22C82-2DB5-471C-A80A-CDAA10D7C63E"},"enableHelper":true},{"uuid":"94E815B9-9833-40FD-AE0C-4253066D052D","objectType":"EmptyObject","name":"Floor","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,-413.96319789442657,-3,1],"layers":1,"children":[{"uuid":"374E26A0-C88C-49BC-B73E-F967D2CF5232","objectType":"Mesh3D","name":"Cube 2","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,-429.21319789442657,-3,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,413.96319789442657,3,1],"interaction":{"uuid":"505F7CFD-D262-42A6-8954-A17E0108B6D8"},"geometry":"49EFB973-54CB-49EA-8A3B-6F7C133BD51F","material":"38FBBC8A-0550-4682-8D6F-0ACF2ED0115A"},{"uuid":"7105AC1E-F4E8-4CBC-A7C5-AD5144FF894F","objectType":"Mesh3D","name":"Cube 2","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,-396.2131978944266,-3,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"ui":{"enabledScaleLock":false},"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,413.96319789442657,3,1],"interaction":{"uuid":"277F348A-6EA7-4172-9A0D-5E350D3316C0"},"geometry":"0FC6AFD8-1C32-4676-9D8E-36E141053E37","material":"27FAA123-FF16-42F7-BA51-4C4982CCFFFF"}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"FF426CFE-1034-49DB-B0CB-5C6A397E2007"},"enableHelper":true},{"uuid":"6D855ADB-27CA-4A5B-B86A-27BC5744EDCB","type":"HemisphereLight","name":"SceneLightAmbientDefault","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-0.5,0.75,-1,1],"color":13882323,"intensity":0.75,"groundColor":8553090},{"uuid":"FD7D5B04-4A31-4505-9C11-AE8FC9FA1EEF","objectType":"CombinedCamera","name":"Default Camera","matrix":[0.8015579298335783,1.3877787807814457e-17,-0.597917122284442,0,-0.2328484061411798,0.9210549752752888,-0.31215277073597997,0,0.5507145402823685,0.3894325776314008,0.7382789192445781,0,575.8719407440473,201.78435032165694,716.7669289940502,1],"layers":3,"userData":{"skip":true,"target":[25.15740046167902,-187.64822730974313,-21.511990250527248]},"children":[{"uuid":"6BB27D42-0D0E-448E-81C8-C2CD55B124E8","type":"DirectionalLight","name":"SceneLightDirectionalDefault","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,850000,1300000,1000000,1],"color":16777215,"intensity":0.75,"shadow":{"camera":{"uuid":"5D4E2F29-1019-4B9E-A527-BE05CE99C47C","type":"OrthographicCamera","layers":1,"zoom":1,"left":-5,"right":5,"top":5,"bottom":-5,"near":0.5,"far":500}}}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"01C0CB01-DB13-4A8D-B2FD-20754603DA5B"},"enableHelper":false,"cameraType":"OrthographicCamera","targetOffset":1000,"left":-768,"right":768,"top":401,"bottom":-401,"zoomOrtho":0.512,"nearOrtho":-50000,"far":100000,"aspect":1.915211970074813,"fov":45,"focus":10,"filmGauge":35,"filmOffset":0,"zoomPersp":1,"nearPersp":50}],"activeCamera":"FD7D5B04-4A31-4505-9C11-AE8FC9FA1EEF","camera":"FD7D5B04-4A31-4505-9C11-AE8FC9FA1EEF","directionalLight":"6BB27D42-0D0E-448E-81C8-C2CD55B124E8","ambientLight":"6D855ADB-27CA-4A5B-B86A-27BC5744EDCB","color":[1,0.9410764305722289,0.8480392156862745],"alpha":1,"directionalLightState":true,"ambientLightState":true,"canvas":{"mode":1,"size":{"width":512,"height":512},"fullScreen":true}},"metadata":{"version":1.4,"type":"Object","generator":"Object3D.toJSON"},"geometries":[{"uuid":"A8C9B966-7A9E-4D48-AC67-9BF854D13B1A","userData":{"parameters":{"width":71,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":12,"cornerSegments":8,"height":69,"depth":75,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"DE5C49AB-9C5F-4F89-977B-E3CE536CEB6E","userData":{"parameters":{"width":60,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":12,"cornerSegments":8,"height":69,"depth":52,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"6003697B-A8C1-448A-AABB-4F44AE336A19","userData":{"parameters":{"width":71,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":12,"cornerSegments":8,"height":69,"depth":75,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"ADA52E7A-01E1-4A24-9562-D035E4486E63","userData":{"parameters":{"width":71,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":12,"cornerSegments":8,"height":69,"depth":52,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"435E2184-7F9D-43D5-9303-76FBC1A6C14E","userData":{"parameters":{"width":172,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":93,"depth":163,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"5DC42410-14B0-4782-B68C-DB89EC157DFD","userData":{"parameters":{"width":115,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":69,"depth":107,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"6B4F5B0D-3BB9-4BB8-9B30-1AFB2CE02D55","userData":{"parameters":{"width":150,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":79,"depth":146,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"F4925746-F872-4664-8A01-C9C76956B096","userData":{"parameters":{"width":115,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":69,"depth":107,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"F3A7FF06-4FEF-4013-BE33-668A69BE42AC","userData":{"parameters":{"width":137,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":83,"depth":145,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"271475F2-93E1-4DB3-98E0-BF6D537C26F4","userData":{"parameters":{"width":133,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":71,"depth":128,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"444CC1FC-6055-4BBC-BC12-4D3E4FA90625","userData":{"parameters":{"width":150,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":79,"depth":146,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"9C03B438-B114-4D05-8EDD-91DA3E9CECC0","userData":{"parameters":{"width":115,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":69,"depth":107,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"CD73B262-4311-4A54-9E78-D83942EE414C","userData":{"parameters":{"width":293,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":24,"cornerSegments":8,"height":188,"depth":204,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"BF01B848-B147-4846-93F0-8C07F87E913D","userData":{"parameters":{"width":216,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":24,"cornerSegments":8,"height":111,"depth":158,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"E7EADF0E-51B4-4A31-B8F6-59439375DBB8","userData":{"parameters":{"width":237,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":24,"cornerSegments":8,"height":112,"depth":176,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"21FD66C2-0AD5-4F4D-A541-A31D09E798D5","userData":{"parameters":{"width":55,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":24,"cornerSegments":8,"height":42,"depth":47,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"22013BB7-A38E-436A-B5FC-EEA7CE05B62A","userData":{"parameters":{"width":51,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":9,"cornerSegments":8,"height":77,"depth":34,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"EB49D5FB-1BFE-4FE0-931E-B71206F066F1","userData":{"parameters":{"width":51,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":9,"cornerSegments":8,"height":77,"depth":34,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"1674C793-4D13-4553-9870-898CCCF92839","userData":{"parameters":{"width":13,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":3,"cornerSegments":8,"height":25,"depth":12,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"5B2E1C9B-DE88-482F-8406-1696F0B04CC1","userData":{"parameters":{"width":13,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":3,"cornerSegments":8,"height":25,"depth":12,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"3A724AC4-9C31-42D2-A21B-35E741CDDC95","userData":{"parameters":{"width":51,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":9,"cornerSegments":8,"height":31,"depth":34,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"226F31A4-4804-4C88-B1B5-C394BE525843","userData":{"parameters":{"width":82,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":24,"cornerSegments":8,"height":215,"depth":60,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"14276DA0-6713-402F-B110-73979D9FA477","userData":{"parameters":{"width":82,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":24,"cornerSegments":8,"height":215,"depth":61,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"00AF00DA-8A62-4C73-B6F6-F1B261055170","userData":{"parameters":{"width":39,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":13,"cornerSegments":8,"height":76,"depth":61,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"7392D3C2-FD4E-4AE1-9291-5B8A46854BC8","userData":{"parameters":{"width":39,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":13,"cornerSegments":8,"height":76,"depth":61,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"23C53AEC-1747-4C64-8344-C4EAAF166FD6","userData":{"parameters":{"width":118,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":18,"cornerSegments":8,"height":56,"depth":50,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"9C45C54A-40A2-4FE3-A424-BD9B93AAB831","userData":{"parameters":{"width":118,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":18,"cornerSegments":8,"height":56,"depth":50,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"335300D8-B746-463A-894B-7A269DD7DBD3","userData":{"parameters":{"width":94,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":19,"cornerSegments":8,"height":50,"depth":199,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"2250BE1E-1217-441B-8455-9DA7B9949EE1","userData":{"parameters":{"width":96,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":19,"cornerSegments":8,"height":50,"depth":199,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"45FB4232-BE89-4827-9164-463DBB0C6247","userData":{"parameters":{"width":402,"depth":0,"cornerRadius":[53,53,53,53],"cornerType":1,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1,"height":352},"ui":{"enabledIndieCorners":false},"type":"RectangleGeometry"}},{"uuid":"49EFB973-54CB-49EA-8A3B-6F7C133BD51F","userData":{"parameters":{"width":952,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":13,"cornerSegments":8,"height":80,"depth":952,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}},{"uuid":"0FC6AFD8-1C32-4676-9D8E-36E141053E37","userData":{"parameters":{"width":892,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":13,"cornerSegments":8,"height":75,"depth":892,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"CubeGeometry"}}],"materials":[{"uuid":"4C9314E8-DCD0-42BC-BE83-40CB261D82E4","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":45653}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"880068FF-995C-40D2-B824-5031D1D4508A","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":45653}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"274D3445-58A5-4DF3-BF71-9E099FD8A8AA","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":45653}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"794EA124-18CB-43A9-8155-500D22537B35","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":45653}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"E936ECDD-EBD8-4ED6-8BAE-DD2EEB63ED0D","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"B9CF9B5B-E1D3-49E9-B178-C68BC665EE81","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"40E454A3-566E-45BC-B55E-EA2564D1382B","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"63C82497-F413-4E8D-9891-B4962B2DB28D","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"5BBAFBC9-B395-40E4-9819-42C1F25F48DC","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"C9DC1AC7-CA28-477B-A776-3EA8AD9BDB05","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"4A940181-1EF8-45E9-8469-B6EA51BB7C9C","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"A3974F17-C7C4-4686-A806-83A5C55BDBC0","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":13298687}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"2B3579D9-F4AE-452E-AB5C-4A820CB5D02A","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"27FF73ED-EDF4-4A18-8DD1-2C72DA5B1987","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16753057}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"C9F8FFDE-CB9E-4198-A4BB-9994B4C341D6","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"27FF73ED-EDF4-4A18-8DD1-2C72DA5B1987","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16753057}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"9B4896E8-A2E6-455D-B0BB-C96D7FC3E8F0","type":"MeshLambertMaterial","color":8026746,"emissive":0,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":5,"uuid":"0F008BE9-B5FF-4DE2-AC29-5ADD92C7FBF6","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16747917}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"AEAD44AE-84C8-4105-B9D2-EB96E5F619E0","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"27FF73ED-EDF4-4A18-8DD1-2C72DA5B1987","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16761024}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"9420B7ED-60B7-4809-BB67-DB79D4444E1A","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":1579032}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":0}}}}}}},{"uuid":"D4687AAD-792F-49CE-BD64-5C5DCE6640F4","type":"MeshPhongMaterial","color":8026746,"emissive":0,"specular":1118481,"shininess":30,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"BasicMaterial","category":"Basic","layers":{"id":3,"uuid":"5774C8CE-526A-49EE-9601-F6ABD45AEC2F","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16777215}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"7DB7E844-EECE-4A7C-A7EA-BE0B443DF2D5","type":"MeshPhongMaterial","color":8026746,"emissive":0,"specular":1118481,"shininess":30,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"BasicMaterial","category":"Basic","layers":{"id":3,"uuid":"036BE32B-6E6E-42EB-A1D2-A9F15B164337","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16730441}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"FAE7146D-6ED1-4D07-90B4-E602888C0C41","type":"MeshLambertMaterial","color":8026746,"emissive":0,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"4D7D0746-3042-4038-B12B-E3A790D6ADD7","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16744576}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"038D1026-1BD5-4B32-BF7C-A64B88216BBD","type":"MeshLambertMaterial","color":8026746,"emissive":0,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"4D7D0746-3042-4038-B12B-E3A790D6ADD7","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16744576}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"1D8CD08B-2F5E-4EDB-88DB-CE94029723CE","type":"MeshLambertMaterial","color":8026746,"emissive":0,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"20B9E82D-19E0-4268-8265-84A421815E5C","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16760767}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"F5F7FC74-EFCF-4363-8B04-3C12DF08E31E","type":"MeshLambertMaterial","color":8026746,"emissive":0,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"20B9E82D-19E0-4268-8265-84A421815E5C","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16760767}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"E5415489-5F88-4407-B89B-7232BA55B7E8","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"27FF73ED-EDF4-4A18-8DD1-2C72DA5B1987","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16761024}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"EFD59CDC-91D8-4B7C-A623-A7732B6A1E19","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"27FF73ED-EDF4-4A18-8DD1-2C72DA5B1987","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16761024}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"1510DD96-21C0-4CB6-92A6-D949B09B6B27","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"27FF73ED-EDF4-4A18-8DD1-2C72DA5B1987","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16761024}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"FE41D302-064F-456D-ACAC-FF198F460575","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"27FF73ED-EDF4-4A18-8DD1-2C72DA5B1987","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16761024}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"8BD8AF10-67E7-4B00-BD7C-890E9A393AC3","type":"MeshPhongMaterial","color":14779954,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"BasicMaterial","category":"Basic","layers":{"id":2,"uuid":"A60C6AF0-DF14-4D60-8F6B-7F583368A721","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":14779954}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"38FBBC8A-0550-4682-8D6F-0ACF2ED0115A","type":"MeshLambertMaterial","color":8026746,"emissive":0,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"54597768-EA95-4FA1-A9AF-611D12F85CB5","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16754017}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}},{"uuid":"27FAA123-FF16-42F7-BA51-4C4982CCFFFF","type":"MeshLambertMaterial","color":8026746,"emissive":0,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":3,"uuid":"4129B6F7-59F5-4574-B6F3-FFC63DD02576","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":14648898}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.5},"f1_mode":{"value":"3"}}}}}}}],"options":{"bgColor":16773080,"bgAlpha":1,"generatorFormat":1,"useOrbitControls":true,"useHostedRuntime":false,"orbitDamped":true,"orbitTarget":[25.15740046167855,-187.648227309744,-21.511990250528015],"cameraRotate":true,"cameraPan":true,"cameraZoom":false,"quality":"default","watermark":true}} -------------------------------------------------------------------------------- /example/src/scene.json: -------------------------------------------------------------------------------- 1 | {"object":{"uuid":"9E570A10-900E-498C-B296-3BE52631D9FA","objectType":"Scene","name":"icon_cloud","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"layers":1,"children":[{"uuid":"DE5DE121-0A16-42C0-90AB-BA097FEF2E76","type":"HemisphereLight","name":"SceneLightAmbientDefault","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,-0.5,0.75,-1,1],"color":13882323,"intensity":0.75,"groundColor":8553090},{"uuid":"099D2927-B51F-4357-8ECB-30D72D336116","objectType":"CombinedCamera","name":"Default Camera","matrix":[0.6125847721874158,-2.081668171172168e-17,-0.7904048942688118,0,0.11097677429012077,0.9900941595715276,0.08600994564880238,0,0.7825752695123016,-0.14040496851020035,0.6065166051852153,0,787.9085900627421,-167.07163413116547,606.5027443960984,1],"layers":3,"userData":{"skip":true,"target":[5.333320550443358,-26.666665620963954,-0.013860789122571498]},"children":[{"uuid":"229E126E-D9AB-4DF5-8B22-899E99D7E7A6","type":"DirectionalLight","name":"SceneLightDirectionalDefault","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,850000,1300000,1000000,1],"color":16777215,"intensity":0.75,"shadow":{"camera":{"uuid":"F72A4CFA-E0AB-4E21-A5DD-C9297AB51FB5","type":"OrthographicCamera","layers":1,"zoom":1,"left":-5,"right":5,"top":5,"bottom":-5,"near":0.5,"far":500}}}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"061FAA42-9810-492A-B500-2F209AAD369A"},"enableHelper":false,"cameraType":"OrthographicCamera","targetOffset":1000,"left":-768,"right":768,"top":401,"bottom":-401,"zoomOrtho":1.0000000000000002,"nearOrtho":-50000,"far":100000,"aspect":1.915211970074813,"fov":45,"focus":10,"filmGauge":35,"filmOffset":0,"zoomPersp":1,"nearPersp":50},{"uuid":"CD700498-BCB2-4FC2-B78E-6841A27D3E52","objectType":"Mesh2D","name":"Rectangle","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,-23.535175167541354,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"C947FDB9-0EBA-4B40-B9F8-0385275D1651"},"geometry":"F31A0B89-FB35-43BC-BC28-814B10F2C7FF","material":"9434D7BB-531B-4136-9E29-00225ED1C5BB"},{"uuid":"83A783F8-ADEB-4E5C-90D2-08ECC652BDD3","objectType":"Mesh2D","name":"Rectangle","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,42.79322685544386,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"C3D013EE-6934-427B-A3F4-DC87170FD077"},"geometry":"F7137BE3-AAE9-4359-B0C3-3E22946FA2B1","material":"F4AE4AFF-0A42-456B-B729-530FEAA3BA91"},{"uuid":"C9D0CD32-A660-44A1-8478-77D1E0FA7200","objectType":"Mesh2D","name":"Rectangle","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,67.42125286966672,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"2C787A4B-01A2-4164-BD0E-00718BB8D053"},"geometry":"F952B68C-CD22-41AE-BC3F-97BCBB401F4F","material":"79364775-5D22-49A8-A155-440D7C360C9B"},{"uuid":"C7B6893A-4C31-4F5F-887D-12C13D9D3700","objectType":"Mesh3D","name":"Sphere","matrix":[1,0,0,0,0,1,0,0,0,0,0.9999999999999997,0,-62.7955228997706,-18.912084832773964,98.32310921079366,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[0.8458498023715415,0,0,0,0,0.8478260869565217,0,0,0,0,0.845679012345679,0,-1.1407114624505974,-0.9174109026462132,14.043913582408905,1],"interaction":{"uuid":"43FCAE2D-AF29-446B-9D2F-B7A99FFF170D"},"geometry":"88BD65D0-B5F3-412E-AE65-8F299B084D49","material":"B2F36070-A019-47AE-90B3-137668F78D6C"},{"uuid":"477911DB-659F-4618-B48C-5899DC2EB7EF","objectType":"Mesh3D","name":"Sphere","matrix":[1,0,0,0,0,1,0,0,0,0,0.9999999999999997,0,14.70447710022942,12.587915167226052,91.00456001400973,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[0.8458498023715415,0,0,0,0,0.8478260869565217,0,0,0,0,0.845679012345679,0,-1.1407114624505974,-0.9174109026462132,14.043913582408905,1],"interaction":{"uuid":"64047473-283C-46BD-B597-AD141ED071A6"},"geometry":"24F9270F-CD1C-471A-A242-6B6414BA0374","material":"B2F36070-A019-47AE-90B3-137668F78D6C"},{"uuid":"C5630E9A-E6CC-42B5-9B85-BEA2DEFCAB78","objectType":"Mesh3D","name":"Sphere","matrix":[1,0,0,0,0,0.9999999999999998,0,0,0,0,0.9999999999999992,0,61.904477100229386,-10.41208483277396,86.08018851865394,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[0.8458498023715415,0,0,0,0,0.8478260869565217,0,0,0,0,0.845679012345679,0,-1.1407114624505974,-0.9174109026462132,14.043913582408905,1],"interaction":{"uuid":"B358D8A6-909A-4BC2-B97A-2178928465F3"},"geometry":"3303D4EC-50D3-4EAB-ACA2-6B5179C657C7","material":"B2F36070-A019-47AE-90B3-137668F78D6C"},{"uuid":"D31252EB-0DAC-4264-BA7D-9B129504883C","objectType":"Mesh2D","name":"Ellipse","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,91.00012725359184,1],"castShadow":true,"receiveShadow":true,"layers":1,"userData":{"positionToCenter":{"x":0,"y":0,"z":0}},"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"7974C059-9523-4A95-8007-854C7DA5A666"},"geometry":"C84AEC95-D19D-4231-AA1E-9BD1C478FD82","material":"89D4561A-8121-4DD2-9B11-624532B5FE0E"}],"activeCamera":"099D2927-B51F-4357-8ECB-30D72D336116","camera":"099D2927-B51F-4357-8ECB-30D72D336116","directionalLight":"229E126E-D9AB-4DF5-8B22-899E99D7E7A6","ambientLight":"DE5DE121-0A16-42C0-90AB-BA097FEF2E76","color":[0.07079302309158962,0.05017301038062285,0.17647058823529416],"alpha":1,"directionalLightState":true,"ambientLightState":true,"canvas":{"mode":1,"size":{"width":512,"height":512},"fullScreen":true}},"metadata":{"version":1.4,"type":"Object","generator":"Object3D.toJSON"},"geometries":[{"uuid":"F31A0B89-FB35-43BC-BC28-814B10F2C7FF","userData":{"parameters":{"width":320,"depth":0,"cornerRadius":[72,72,72,72],"cornerType":1,"extrudeDepth":38,"extrudeBevelSize":30,"extrudeBevelSegments":32,"height":320},"ui":{"enabledIndieCorners":false},"type":"RectangleGeometry"}},{"uuid":"F7137BE3-AAE9-4359-B0C3-3E22946FA2B1","userData":{"parameters":{"width":262,"depth":0,"cornerRadius":[41,41,41,41],"cornerType":1,"extrudeDepth":3,"extrudeBevelSize":24,"extrudeBevelSegments":20,"height":262},"ui":{"enabledIndieCorners":false},"type":"RectangleGeometry"}},{"uuid":"F952B68C-CD22-41AE-BC3F-97BCBB401F4F","userData":{"parameters":{"width":215,"depth":0,"cornerRadius":[21,21,21,21],"cornerType":1,"extrudeDepth":3,"extrudeBevelSize":20,"extrudeBevelSegments":20,"height":215},"ui":{"enabledIndieCorners":false},"type":"RectangleGeometry"}},{"uuid":"88BD65D0-B5F3-412E-AE65-8F299B084D49","userData":{"parameters":{"width":121,"widthSegments":64,"heightSegments":64,"phiStart":0,"phiLength":6.283185307179586,"thetaStart":0,"thetaLength":3.141592653589793,"height":121,"depth":121,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"SphereGeometry"}},{"uuid":"24F9270F-CD1C-471A-A242-6B6414BA0374","userData":{"parameters":{"width":180,"widthSegments":64,"heightSegments":64,"phiStart":0,"phiLength":6.283185307179586,"thetaStart":0,"thetaLength":3.141592653589793,"height":180,"depth":180,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"SphereGeometry"}},{"uuid":"3303D4EC-50D3-4EAB-ACA2-6B5179C657C7","userData":{"parameters":{"width":134,"widthSegments":64,"heightSegments":64,"phiStart":0,"phiLength":6.283185307179586,"thetaStart":0,"thetaLength":3.141592653589793,"height":134,"depth":134,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"SphereGeometry"}},{"uuid":"C84AEC95-D19D-4231-AA1E-9BD1C478FD82","userData":{"parameters":{"width":242,"depth":0,"spikes":128,"angle":360,"innerRadius":0,"height":242,"extrudeDepth":0,"extrudeBevelSize":0,"extrudeBevelSegments":1},"type":"EllipseGeometry"}}],"materials":[{"uuid":"9434D7BB-531B-4136-9E29-00225ED1C5BB","type":"MeshPhongMaterial","color":8026746,"emissive":0,"specular":1842204,"shininess":30,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":5,"uuid":"334DF5FE-B662-49D3-A074-751DA935511A","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":3583}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.91},"f1_mode":{"value":0}},"next":{"id":3,"type":"fresnel","defines":{"USE_LAYER_FRESNEL":""},"uniforms":{"f3_alpha":{"value":0.37},"f3_mode":{"value":0},"f3_bias":{"value":0.1},"f3_scale":{"value":1},"f3_intensity":{"value":2},"f3_factor":{"value":1},"f3_color":{"value":16615935}}}}}}}},{"uuid":"F4AE4AFF-0A42-456B-B729-530FEAA3BA91","type":"MeshPhongMaterial","color":8026746,"emissive":0,"specular":1118481,"shininess":30,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":6,"uuid":"90D69F09-F588-43C7-A15B-BB5EB9D477C4","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16749015}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.81},"f1_mode":{"value":"3"}}}}}}},{"uuid":"79364775-5D22-49A8-A155-440D7C360C9B","type":"MeshPhongMaterial","color":8026746,"emissive":0,"specular":1118481,"shininess":30,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":6,"uuid":"F8155166-9739-4463-ACD9-7E931453437A","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16736217}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":"3"}}}}}}},{"uuid":"B2F36070-A019-47AE-90B3-137668F78D6C","type":"MeshLambertMaterial","color":8026746,"emissive":0,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"LambertMaterial","category":"Lambert","layers":{"id":8,"uuid":"2ED6BF9C-109A-4FD1-BF52-C372AD556E74","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":14137855}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":0.88},"f1_mode":{"value":"3"}},"next":{"id":3,"type":"fresnel","defines":{"USE_LAYER_FRESNEL":""},"uniforms":{"f3_alpha":{"value":1},"f3_mode":{"value":"3"},"f3_bias":{"value":0.1},"f3_scale":{"value":1},"f3_intensity":{"value":2},"f3_factor":{"value":1},"f3_color":{"value":16777215}}}}}}}},{"uuid":"89D4561A-8121-4DD2-9B11-624532B5FE0E","type":"MeshPhongMaterial","color":8026746,"emissive":0,"specular":1118481,"shininess":30,"side":2,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"BasicMaterial","category":"Basic","layers":{"id":2,"uuid":"BA0638FB-5812-4E87-AB8B-0AAA3CFBE6B3","head":{"id":0,"type":"gradient","defines":{"USE_UV":"","GRAD_MAX":"10"},"uniforms":{"f0_alpha":{"value":0.29},"f0_mode":{"value":0},"f0_gl_type":{"value":1},"f0_num":{"value":2},"f0_smooth":{"value":1},"f0_colors":{"value":[{"x":0.47058823529411764,"y":0,"z":0.21608643457382973,"w":1},{"x":0.4901960784313726,"y":0,"z":0.1500600240096037,"w":0},{"x":0,"y":0,"z":0,"w":1},{"x":0,"y":0,"z":0,"w":1},{"x":0,"y":0,"z":0,"w":1},{"x":0,"y":0,"z":0,"w":1},{"x":0,"y":0,"z":0,"w":1},{"x":0,"y":0,"z":0,"w":1},{"x":0,"y":0,"z":0,"w":1},{"x":0,"y":0,"z":0,"w":1}]},"f0_steps":{"value":[0.34590000000000004,1,1,1,1,1,1,1,1,1]},"f0_offset":{"value":{"x":0,"y":0}},"f0_morph":{"value":{"x":0,"y":0}},"f0_angle":{"value":0}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}}],"options":{"bgColor":1182765,"bgAlpha":1,"generatorFormat":1,"useOrbitControls":true,"useHostedRuntime":false,"orbitDamped":true,"orbitTarget":[5.333320550440021,-26.666665620965034,-0.013860789117188688],"cameraRotate":true,"cameraPan":true,"cameraZoom":false,"quality":"default","watermark":true}} -------------------------------------------------------------------------------- /example/src/setupTests.ts: -------------------------------------------------------------------------------- 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/extend-expect'; 6 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "module": "ESNext", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "jsx": "react", 8 | "sourceMap": true, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "allowSyntheticDefaultImports": true, 19 | "target": "ESNext", 20 | "allowJs": true, 21 | "skipLibCheck": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "resolveJsonModule": true, 25 | "isolatedModules": true, 26 | "noEmit": true 27 | }, 28 | "include": ["src"], 29 | "exclude": ["node_modules", "build"] 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-spline", 3 | "version": "1.2.1", 4 | "description": "A wrapper for loading Spline models and animations.", 5 | "author": "utkarshdubey", 6 | "license": "MIT", 7 | "keywords": [ 8 | "spline", 9 | "react-spline", 10 | "spline animations" 11 | ], 12 | "main": "dist/react-spline.js", 13 | "exports": "./dist/index.js", 14 | "module": "dist/index.js", 15 | "modern": "dist/index.js", 16 | "repository": "utkarshdubey/react-spline", 17 | "source": "src/index.tsx", 18 | "engines": { 19 | "node": ">=10" 20 | }, 21 | "scripts": { 22 | "build": "microbundle-crl src/index.tsx -o ./dist --format modern,cjs --tsconfig tsconfig.json", 23 | "start": "microbundle-crl watch src/index.tsx -o ./dist --format modern --tsconfig tsconfig.json", 24 | "prepare": "run-s build", 25 | "postbuild": "node scripts/mv.js", 26 | "predeploy": "cd example && yarn install && yarn run build", 27 | "deploy": "gh-pages -d example/build" 28 | }, 29 | "peerDependencies": { 30 | "react": "^16.0.0" 31 | }, 32 | "devDependencies": { 33 | "@types/node": "^12.12.38", 34 | "@types/react": "^16.9.27", 35 | "@types/react-dom": "^16.9.7", 36 | "@typescript-eslint/eslint-plugin": "^2.26.0", 37 | "@typescript-eslint/parser": "^2.26.0", 38 | "babel-eslint": "^10.0.3", 39 | "cross-env": "^7.0.2", 40 | "eslint": "^6.8.0", 41 | "eslint-config-prettier": "^6.7.0", 42 | "eslint-config-standard": "^14.1.0", 43 | "eslint-config-standard-react": "^9.2.0", 44 | "eslint-plugin-import": "^2.18.2", 45 | "eslint-plugin-node": "^11.0.0", 46 | "eslint-plugin-prettier": "^3.1.1", 47 | "eslint-plugin-promise": "^4.2.1", 48 | "eslint-plugin-react": "^7.17.0", 49 | "eslint-plugin-standard": "^4.0.1", 50 | "gh-pages": "^2.2.0", 51 | "microbundle-crl": "^0.13.11", 52 | "npm-run-all": "^4.1.5", 53 | "prettier": "^2.0.4", 54 | "react": "^16.13.1", 55 | "react-dom": "^16.13.1", 56 | "react-scripts": "^3.4.1", 57 | "typescript": "^3.7.5" 58 | }, 59 | "files": [ 60 | "dist" 61 | ], 62 | "dependencies": { 63 | "three": "0.123.0" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /scripts/mv.js: -------------------------------------------------------------------------------- 1 | const { rename, copyFile } = require('fs/promises') 2 | const path = require('path') 3 | const dist = path.join(__dirname, '..', 'dist') 4 | ;(async function () { 5 | const file = path.join(dist, 'react-spline.modern.js') 6 | await rename(file, file.replace('react-spline.modern', 'index')) 7 | console.log('moved file') 8 | })() 9 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | import {speRuntimeFactory} from './splineRuntime'; 4 | 5 | interface Props { 6 | scene: object 7 | id?: string 8 | className?: string 9 | style?: React.CSSProperties 10 | canvasStyle?: React.CSSProperties 11 | containerStyle?: React.CSSProperties 12 | } 13 | const SpeRuntime = speRuntimeFactory({}) 14 | 15 | export const Spline = ({ 16 | scene, 17 | id, 18 | className, 19 | style, 20 | canvasStyle = { height: '100%', width: '100%', outline: 'none' }, 21 | containerStyle = { 22 | width: '100%', 23 | height: '100%', 24 | overflow: 'hidden', 25 | position: 'relative' 26 | } 27 | }: Props) => { 28 | const canvasRef: any = React.useRef() 29 | React.useEffect(() => { 30 | const { current } = canvasRef 31 | if (current != null) { 32 | current.width = current.width 33 | } 34 | new SpeRuntime.Application().start(scene, current) 35 | }, [scene]) 36 | return ( 37 |
38 |
39 | 40 |
41 |
42 | ) 43 | } 44 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Default CSS definition for typescript, 3 | * will be overridden with file-specific definitions by rollup 4 | */ 5 | declare module '*.css' { 6 | const content: { [className: string]: string }; 7 | export default content; 8 | } 9 | 10 | interface SvgrComponent extends React.StatelessComponent> {} 11 | 12 | declare module '*.svg' { 13 | const svgUrl: string; 14 | const svgComponent: SvgrComponent; 15 | export default svgUrl; 16 | export { svgComponent as ReactComponent } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "module": "ESNext", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "jsx": "react", 8 | "sourceMap": true, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "allowSyntheticDefaultImports": true, 19 | "allowJs": true, 20 | "target": "ESNext", 21 | "skipLibCheck": true, 22 | "strict": true, 23 | "forceConsistentCasingInFileNames": true, 24 | "resolveJsonModule": true, 25 | "isolatedModules": true, 26 | "noEmit": true 27 | 28 | }, 29 | "include": ["src"], 30 | "exclude": ["node_modules", "dist", "example"] 31 | } 32 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } --------------------------------------------------------------------------------