├── .DS_Store ├── .babelrc ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .prettierrc.yaml ├── .stylelintrc.json ├── .travis.yml ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── __mocks__ ├── fileMock.js └── styleMock.js ├── __tests__ └── application.js ├── build └── stats.json ├── jest.config.js ├── package-lock.json ├── package.json ├── renovate.json ├── screenshot.gif ├── setupJestDomTests.js ├── src ├── .DS_Store ├── css │ ├── font-face-rules.css │ ├── index.css │ └── variables.css ├── fonts │ └── Inknut_Antiqua │ │ ├── InknutAntiqua-Black.ttf │ │ ├── InknutAntiqua-Bold.ttf │ │ ├── InknutAntiqua-ExtraBold.ttf │ │ ├── InknutAntiqua-Light.ttf │ │ ├── InknutAntiqua-Medium.ttf │ │ ├── InknutAntiqua-Regular.ttf │ │ ├── InknutAntiqua-SemiBold.ttf │ │ └── OFL.txt ├── glsl │ ├── frag.glsl │ └── vert.glsl ├── gltf │ ├── vans.bin │ └── vans.gltf ├── js │ ├── .DS_Store │ ├── application.js │ ├── index.js │ ├── utils.js │ └── vendor │ │ ├── Detector.js │ │ └── dat.gui.min.js ├── templates │ └── index.html └── textures │ ├── camo.jpg │ ├── canvas_normal.jpg │ ├── checkerboard.jpg │ ├── fabric_normal.jpg │ ├── ghost.jpg │ ├── hover.jpg │ ├── hype.png │ └── leather_normal.png ├── webpack.config.js └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | not dead -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*.{css,html,js}] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 10.15.0 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | node_modules/ 4 | dist/ 5 | -------------------------------------------------------------------------------- /.prettierrc.yaml: -------------------------------------------------------------------------------- 1 | printWidth: 80 2 | semi: true 3 | singleQuote: false 4 | trailingComma: "es5" 5 | tabWidth: 2 6 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "rules": { 4 | "unit-whitelist": ["em", "rem", "vh", "vw", "%"] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "lts/*" 5 | - "stable" 6 | cache: yarn 7 | install: 8 | - yarn install 9 | - yarn global add codecov 10 | script: 11 | - yarn run ci 12 | after_success: 13 | - codecov 14 | notifications: 15 | email: 16 | on_success: change 17 | on_failure: always 18 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "christian-kohler.npm-intellisense", 4 | "davidanson.vscode-markdownlint", 5 | "EditorConfig.EditorConfig", 6 | "eg2.vscode-npm-script", 7 | "esbenp.prettier-vscode", 8 | "joelday.docthis", 9 | "mgmcdermott.vscode-language-babel", 10 | "slevesque.shader", 11 | "shinnn.stylelint" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.rulers": [ 4 | 80, 5 | 120 6 | ], 7 | "files.exclude": { 8 | "node_modules/": true 9 | } 10 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 jackaljack 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # POC Threejs GLTF Model Texture Customizer 2 | [demo](https://codepen.io/staccked/pen/bGbzGWr) 3 | ![](screenshot.gif) 4 | -------------------------------------------------------------------------------- /__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = "test-file-stub"; 2 | -------------------------------------------------------------------------------- /__mocks__/styleMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /__tests__/application.js: -------------------------------------------------------------------------------- 1 | import { Application } from "../src/js/application"; 2 | 3 | describe("Three.js application", () => { 4 | let windowAlert; 5 | 6 | beforeAll(() => { 7 | // alert is not available in Jest DOM, so we provide a mock implementation. 8 | windowAlert = jest.spyOn(window, "alert"); 9 | windowAlert.mockImplementation(() => {}); 10 | }); 11 | 12 | beforeEach(() => { 13 | const div = document.createElement("div"); 14 | div.setAttribute("class", "app"); 15 | document.body.appendChild(div); 16 | }); 17 | 18 | afterEach(() => { 19 | windowAlert.mockReset(); 20 | // Remove all body's children to make sure the tests are independent 21 | const body = document.querySelector("body"); 22 | while (body.firstChild) { 23 | body.removeChild(body.firstChild); 24 | } 25 | }); 26 | 27 | it("starts with an empty
", () => { 28 | expect(document.querySelector("body > .app")).toBeEmpty(); 29 | expect(document.querySelector(".canvas-container")).not.toBeInTheDocument(); 30 | }); 31 | 32 | it("appends
when creating the app", () => { 33 | new Application(); 34 | const app = document.querySelector("body > .app"); 35 | expect(app.firstElementChild).toHaveClass("canvas-container"); 36 | expect(app.lastElementChild).toHaveClass("tooltip"); 37 | expect(document.querySelector(".canvas-container")).toBeInTheDocument(); 38 | }); 39 | 40 | it("uses the provided
container without creating a new one", () => { 41 | const div = document.createElement("div"); 42 | const customClass = "pre-existing-container"; 43 | div.setAttribute("class", customClass); 44 | const app = document.querySelector(".app"); 45 | app.appendChild(div); 46 | new Application({ container: div }); 47 | expect(app.firstElementChild).toHaveClass(customClass); 48 | expect(document.querySelector(`.${customClass}`)).toBeInTheDocument(); 49 | expect(document.querySelector(".canvas-container")).not.toBeInTheDocument(); 50 | expect(document.querySelector(".tooltip")).toBeInTheDocument(); 51 | expect(app.childElementCount).toBe(2); 52 | }); 53 | 54 | it("creates a visible
", () => { 55 | new Application(); 56 | const app = document.querySelector(".app"); 57 | expect(app.firstElementChild).toBeVisible(); 58 | }); 59 | 60 | it("shows an error message when WebGL is not supported", () => { 61 | new Application(); 62 | const container = document.querySelector(".app > .canvas-container"); 63 | const el = container.firstChild; 64 | expect(el.id).toBe("webgl-error-message"); 65 | const message = 66 | "Your browser does not seem to support WebGL. Find out how to get it here."; 67 | expect(el).toHaveTextContent(message); 68 | }); 69 | }); 70 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | collectCoverage: true, 3 | collectCoverageFrom: ["src/js/*.{js,ts}"], 4 | coverageDirectory: "./coverage/", 5 | /* 6 | * Configure Jest to gracefully handle asset files such as stylesheets and 7 | * images. Usually, these files aren't particularly useful in tests so we can 8 | * safely mock them out. 9 | * TODO: check what to do with glsl files (can I mock them?) 10 | */ 11 | moduleNameMapper: { 12 | "\\.(jpg|jpeg|png|gif|glsl)$": "/__mocks__/fileMock.js", 13 | "\\.(css)$": "/__mocks__/styleMock.js", 14 | }, 15 | modulePathIgnorePatterns: ["/node_modules/"], 16 | setupFilesAfterEnv: ["/setupJestDomTests.js"], 17 | testEnvironment: "jsdom", 18 | testURL: "http://localhost", 19 | testRegex: "__tests__/.*\\.(js|ts)$", 20 | transform: { 21 | ".+\\.js": "babel-jest", 22 | }, 23 | transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|ts)$"], 24 | }; 25 | 26 | module.exports = config; 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "threejs-gltf-model-texture-customizer", 3 | "description": "Load glf model and customize it's textures", 4 | "author": "Peter Skoldebring", 5 | "homepage": "https://github.com/superpills", 6 | "repository": "", 7 | "version": "5.0.0", 8 | "main": "./src/js/index.js", 9 | "license": "MIT", 10 | "private": true, 11 | "scripts": { 12 | "build": "yarn prebuild && webpack --config webpack.config.js --progress --mode production", 13 | "ci": "yarn test && yarn coverage && yarn build", 14 | "coverage": "codecov", 15 | "deploy": "gh-pages -d build", 16 | "dev": "webpack-dev-server --config webpack.config.js --mode development --open", 17 | "format": "prettier --write '{,!(node_modules)/}**/*.{js,jsx}'", 18 | "lint:css": "stylelint --config .stylelintrc.json --formatter verbose './src/**/*.{css,js,jsx,ts,tsx}'", 19 | "ncu": "ncu", 20 | "ncuu": "ncu --upgrade", 21 | "nuke": "rimraf node_modules && rm yarn.lock", 22 | "prebuild": "yarn lint:css", 23 | "predeploy": "yarn test && yarn build", 24 | "static": "chromium-browser build/index.html", 25 | "stats": "webpack-bundle-analyzer build/stats.json --port 8888", 26 | "test": "jest --verbose --no-cache" 27 | }, 28 | "dependencies": { 29 | "dat.gui": "^0.7.6", 30 | "gltf-loader-2": "0.0.3", 31 | "on-change": "^1.6.2", 32 | "orbit-controls-es6": "2.0.0", 33 | "three": "^0.108.0", 34 | "three.interaction": "0.2.2", 35 | "three.texttexture": "^20.0.0" 36 | }, 37 | "devDependencies": { 38 | "@babel/core": "7.3.4", 39 | "@babel/preset-env": "7.3.4", 40 | "@packtracker/webpack-plugin": "2.0.0", 41 | "babel-core": "7.0.0-bridge.0", 42 | "babel-jest": "24.1.0", 43 | "babel-loader": "8.0.5", 44 | "clean-webpack-plugin": "2.0.0", 45 | "compression-webpack-plugin": "2.0.0", 46 | "css-loader": "2.1.0", 47 | "duplicate-package-checker-webpack-plugin": "3.0.0", 48 | "favicons-webpack-plugin": "0.0.9", 49 | "file-loader": "3.0.1", 50 | "gh-pages": "2.0.1", 51 | "html-webpack-plugin": "3.2.0", 52 | "image-webpack-loader": "4.6.0", 53 | "jest": "24.1.0", 54 | "jest-dom": "3.1.2", 55 | "mini-css-extract-plugin": "0.5.0", 56 | "npm-check-updates": "2.15.0", 57 | "prettier": "1.16.4", 58 | "rimraf": "2.6.3", 59 | "style-loader": "0.23.1", 60 | "stylelint": "9.10.1", 61 | "stylelint-config-standard": "18.2.0", 62 | "webpack": "4.29.6", 63 | "webpack-bundle-analyzer": "3.1.0", 64 | "webpack-cli": "3.2.3", 65 | "webpack-dev-server": "3.2.1", 66 | "webpack-glsl-loader": "1.0.1" 67 | }, 68 | "keywords": [ 69 | "babel", 70 | "boilerplate", 71 | "es6", 72 | "threejs", 73 | "three.js", 74 | "webpack", 75 | "webgl" 76 | ], 77 | "bugs": { 78 | "url": "" 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base", "schedule:monthly"] 3 | } 4 | -------------------------------------------------------------------------------- /screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/screenshot.gif -------------------------------------------------------------------------------- /setupJestDomTests.js: -------------------------------------------------------------------------------- 1 | import "jest-dom/extend-expect"; 2 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/.DS_Store -------------------------------------------------------------------------------- /src/css/font-face-rules.css: -------------------------------------------------------------------------------- 1 | /* Define font-face rules 2 | * If you have multiple font formats, put most modern formats first. 3 | * A single font-family can have multiple fonts (e.g. for bold, italic). 4 | */ 5 | 6 | @font-face { 7 | font-family: InknutAntiqua; 8 | font-style: normal; 9 | font-weight: normal; 10 | /* stylelint-disable-next-line declaration-colon-newline-after */ 11 | src: url("../fonts/Inknut_Antiqua/InknutAntiqua-Regular.ttf") 12 | format("truetype"); 13 | } 14 | 15 | @font-face { 16 | font-family: InknutAntiqua; 17 | font-style: normal; 18 | font-weight: bold; 19 | /* stylelint-disable-next-line declaration-colon-newline-after */ 20 | src: url("../fonts/Inknut_Antiqua/InknutAntiqua-ExtraBold.ttf") 21 | format("truetype"); 22 | } 23 | 24 | /* other cool fonts Syncopate, Quicksand, Aclonica */ 25 | -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | @import "variables.css"; 2 | @import "font-face-rules.css"; 3 | 4 | body { 5 | font-family: var(--typography-font-family-primary); 6 | height: 100vh; 7 | margin: 0; 8 | overflow: hidden; 9 | width: 100vw; 10 | } 11 | 12 | li { 13 | font-family: var(--typography-font-family-secondary); 14 | } 15 | 16 | .app { 17 | font-family: var(--typography-font-family-primary); 18 | flex-direction: column; 19 | display: flex; 20 | height: 100%; 21 | width: 100%; 22 | } 23 | 24 | .header { 25 | background-color: var(--colors-background-primary); 26 | display: flex; 27 | } 28 | 29 | .table-of-contents { 30 | background-color: var(--colors-background-secondary); 31 | display: flex; 32 | } 33 | 34 | .main-canvas-container { 35 | background: var(--colors-background-main); 36 | background: var(--colors-background-gradient); 37 | display: flex; 38 | height: 100%; 39 | width: 100%; 40 | } 41 | 42 | .preview { 43 | position: fixed; 44 | bottom: 0; 45 | left: 1vw; 46 | } 47 | 48 | /* .front-canvas-container > canvas { 49 | height: 100%; 50 | width: 100%; 51 | } */ 52 | 53 | .front-canvas-container, 54 | .side-canvas-container { 55 | background-color: var(--colors-background-primary); 56 | height: 15vw; 57 | width: 20vw; 58 | margin-bottom: 1vw; 59 | display: block; 60 | } 61 | 62 | .tooltip { 63 | background: var(--colors-background-secondary); 64 | border: 0; 65 | border-radius: 1em; 66 | font-family: var(--typography-font-family-secondary); 67 | font-size: 1rem; 68 | font-weight: bold; 69 | height: auto; 70 | padding: 0.5rem; 71 | position: absolute; 72 | text-align: center; 73 | visibility: hidden; 74 | width: auto; 75 | } 76 | 77 | .tooltip:hover { 78 | opacity: 0.8; 79 | } 80 | -------------------------------------------------------------------------------- /src/css/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* COLORS */ 3 | --colors-background-primary: #474747; 4 | --colors-background-secondary: #d6d6de; 5 | --colors-header: #5f6e78; 6 | --colors-background-main: rgb(214, 214, 222); 7 | --colors-background-gradient: radial-gradient( 8 | circle, 9 | rgba(214, 214, 222, 1) 10%, 10 | rgba(71, 71, 71, 1) 100%, 11 | rgba(2, 0, 36, 1) 100% 12 | ); 13 | 14 | /* TYPOGRAPHY */ 15 | --typography-font-family-primary: "InknutAntiqua", sans-serif; 16 | --typography-font-family-secondary: "Raleway"; 17 | } 18 | -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/InknutAntiqua-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/fonts/Inknut_Antiqua/InknutAntiqua-Black.ttf -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/InknutAntiqua-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/fonts/Inknut_Antiqua/InknutAntiqua-Bold.ttf -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/InknutAntiqua-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/fonts/Inknut_Antiqua/InknutAntiqua-ExtraBold.ttf -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/InknutAntiqua-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/fonts/Inknut_Antiqua/InknutAntiqua-Light.ttf -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/InknutAntiqua-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/fonts/Inknut_Antiqua/InknutAntiqua-Medium.ttf -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/InknutAntiqua-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/fonts/Inknut_Antiqua/InknutAntiqua-Regular.ttf -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/InknutAntiqua-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/fonts/Inknut_Antiqua/InknutAntiqua-SemiBold.ttf -------------------------------------------------------------------------------- /src/fonts/Inknut_Antiqua/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Claus Eggers Sørensen (es@forthehearts.net) 2 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 3 | This license is copied below, and is also available with a FAQ at: 4 | http://scripts.sil.org/OFL 5 | 6 | 7 | ----------------------------------------------------------- 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 9 | ----------------------------------------------------------- 10 | 11 | PREAMBLE 12 | The goals of the Open Font License (OFL) are to stimulate worldwide 13 | development of collaborative font projects, to support the font creation 14 | efforts of academic and linguistic communities, and to provide a free and 15 | open framework in which fonts may be shared and improved in partnership 16 | with others. 17 | 18 | The OFL allows the licensed fonts to be used, studied, modified and 19 | redistributed freely as long as they are not sold by themselves. The 20 | fonts, including any derivative works, can be bundled, embedded, 21 | redistributed and/or sold with any software provided that any reserved 22 | names are not used by derivative works. The fonts and derivatives, 23 | however, cannot be released under any other type of license. The 24 | requirement for fonts to remain under this license does not apply 25 | to any document created using the fonts or their derivatives. 26 | 27 | DEFINITIONS 28 | "Font Software" refers to the set of files released by the Copyright 29 | Holder(s) under this license and clearly marked as such. This may 30 | include source files, build scripts and documentation. 31 | 32 | "Reserved Font Name" refers to any names specified as such after the 33 | copyright statement(s). 34 | 35 | "Original Version" refers to the collection of Font Software components as 36 | distributed by the Copyright Holder(s). 37 | 38 | "Modified Version" refers to any derivative made by adding to, deleting, 39 | or substituting -- in part or in whole -- any of the components of the 40 | Original Version, by changing formats or by porting the Font Software to a 41 | new environment. 42 | 43 | "Author" refers to any designer, engineer, programmer, technical 44 | writer or other person who contributed to the Font Software. 45 | 46 | PERMISSION & CONDITIONS 47 | Permission is hereby granted, free of charge, to any person obtaining 48 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 49 | redistribute, and sell modified and unmodified copies of the Font 50 | Software, subject to the following conditions: 51 | 52 | 1) Neither the Font Software nor any of its individual components, 53 | in Original or Modified Versions, may be sold by itself. 54 | 55 | 2) Original or Modified Versions of the Font Software may be bundled, 56 | redistributed and/or sold with any software, provided that each copy 57 | contains the above copyright notice and this license. These can be 58 | included either as stand-alone text files, human-readable headers or 59 | in the appropriate machine-readable metadata fields within text or 60 | binary files as long as those fields can be easily viewed by the user. 61 | 62 | 3) No Modified Version of the Font Software may use the Reserved Font 63 | Name(s) unless explicit written permission is granted by the corresponding 64 | Copyright Holder. This restriction only applies to the primary font name as 65 | presented to the users. 66 | 67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 68 | Software shall not be used to promote, endorse or advertise any 69 | Modified Version, except to acknowledge the contribution(s) of the 70 | Copyright Holder(s) and the Author(s) or with their explicit written 71 | permission. 72 | 73 | 5) The Font Software, modified or unmodified, in part or in whole, 74 | must be distributed entirely under this license, and must not be 75 | distributed under any other license. The requirement for fonts to 76 | remain under this license does not apply to any document created 77 | using the Font Software. 78 | 79 | TERMINATION 80 | This license becomes null and void if any of the above conditions are 81 | not met. 82 | 83 | DISCLAIMER 84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 92 | OTHER DEALINGS IN THE FONT SOFTWARE. 93 | -------------------------------------------------------------------------------- /src/glsl/frag.glsl: -------------------------------------------------------------------------------- 1 | uniform vec3 color1; 2 | uniform vec3 color2; 3 | varying vec2 vUv; 4 | 5 | void main() { 6 | gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0); 7 | } -------------------------------------------------------------------------------- /src/glsl/vert.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | void main() { 3 | vUv = uv; 4 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 5 | } -------------------------------------------------------------------------------- /src/gltf/vans.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/gltf/vans.bin -------------------------------------------------------------------------------- /src/js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/js/.DS_Store -------------------------------------------------------------------------------- /src/js/application.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import OrbitControls from "orbit-controls-es6"; 3 | import { Interaction } from "three.interaction"; 4 | import * as onChange from "on-change"; 5 | import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; 6 | import * as Detector from "../js/vendor/Detector"; 7 | import * as DAT from "dat.gui"; 8 | import * as Utils from "../js/utils"; 9 | import * as checkerboard from "../textures/checkerboard.jpg"; 10 | import * as hover from "../textures/hover.jpg"; 11 | import * as camo from "../textures/camo.jpg"; 12 | import * as ghost from "../textures/ghost.jpg"; 13 | import * as fabricNormal from "../textures/fabric_normal.jpg"; 14 | import * as canvasNormal from "../textures/canvas_normal.jpg"; 15 | import * as leatherNormal from "../textures/leather_normal.png"; 16 | import * as vertShader from "../glsl/vert.glsl"; 17 | import * as fragShader from "../glsl/frag.glsl"; 18 | import gltfFile from "../gltf/vans.gltf"; 19 | 20 | export class Application { 21 | constructor(opts = {}) { 22 | if (opts.container) { 23 | this.container = opts.container; 24 | } else { 25 | this.createContainer(); 26 | } 27 | 28 | if (Detector.webgl) { 29 | this.bindEventHandlers(); 30 | this.init(); 31 | this.render(); 32 | } else { 33 | // console.warn("WebGL NOT supported in your browser!"); 34 | const warning = Detector.getWebGLErrorMessage(); 35 | this.container.appendChild(warning); 36 | } 37 | } 38 | 39 | /** 40 | * Bind event handlers to the Application instance. 41 | */ 42 | bindEventHandlers() { 43 | this.createPreviews = this.createPreviews.bind(this); 44 | this.initViews = this.initViews.bind(this); 45 | this.setupGUI = this.setupGUI.bind(this); 46 | this.setupCamera = this.setupCamera.bind(this); 47 | this.handleResize = this.handleResize.bind(this); 48 | this.onMouseOver = this.onMouseOver.bind(this); 49 | this.onMouseOut = this.onMouseOut.bind(this); 50 | this.onMouseDown = this.onMouseDown.bind(this); 51 | this.removeGUIControls = this.removeGUIControls.bind(this); 52 | this.addGUIFolder = this.addGUIFolder.bind(this); 53 | this.addControls = this.addControls.bind(this); 54 | this.declareObjects = this.declareObjects.bind(this); 55 | this.loadModel = this.loadModel.bind(this); 56 | this.loopThrough = this.loopThrough.bind(this); 57 | this.getMeshes = this.getMeshes.bind(this); 58 | this.setListeners = this.setListeners.bind(this); 59 | this.setMaterial = this.setMaterial.bind(this); 60 | this.setShaderMaterial = this.setShaderMaterial.bind(this); 61 | this.renderPreviews = this.renderPreviews.bind(this); 62 | this.updateCustomMesh = this.updateCustomMesh.bind(this); 63 | this.getMeshRef = this.getMeshRef.bind(this); 64 | } 65 | 66 | init() { 67 | window.addEventListener("resize", this.handleResize); 68 | this.createPreviews(); 69 | this.setupScene(); 70 | this.initViews(); 71 | this.setupRenderers(); 72 | this.setupCamera(); 73 | const interaction = new Interaction( 74 | this.mainRenderer, 75 | this.scene, 76 | this.views[0].camera 77 | ); 78 | this.setupLights(); 79 | this.declareObjects(); 80 | this.setupControls(); 81 | const particleSpecs = { spread: { x: 50, y: 100, z: 50 } }; 82 | this.loadModel(); 83 | } 84 | 85 | declareObjects() { 86 | this.textures = { 87 | Leather: { normal: leatherNormal }, 88 | Canvas: { normal: canvasNormal }, 89 | Laces: { normal: fabricNormal }, 90 | Rubber: { color: 0xffffff }, 91 | Camouflage: { pattern: camo }, 92 | Checkerboard: { pattern: checkerboard }, 93 | Ghost: { pattern: ghost }, 94 | Hover: { pattern: hover }, 95 | }; 96 | 97 | this.shoeFabric = { 98 | type: "Leather", 99 | }; 100 | 101 | this.shoeParts = { 102 | Tag: { 103 | normal: "Canvas", 104 | editable: false, 105 | }, 106 | Plate: { 107 | editable: false, 108 | }, 109 | Bottom: { color: 0xffffff, editable: false }, 110 | Stripe: { color: 0x4d4747, editable: true }, 111 | Binding: { 112 | normal: "Leather", 113 | color: 0xffffff, 114 | pattern: "None", 115 | editable: true, 116 | isFabric: true, 117 | }, 118 | Eyelets: { color: 0xa7a7a7, editable: true }, 119 | Inner_Binding: { color: 0xff0000, editable: false }, 120 | Laces: { 121 | normal: "Laces", 122 | color: 0xffffff, 123 | editable: true, 124 | }, 125 | Quarters: { 126 | normal: "Leather", 127 | color: 0xa70909, 128 | pattern: "None", 129 | editable: true, 130 | isFabric: true, 131 | }, 132 | Stitch: { color: 0xff0000, editable: false }, 133 | Tongue: { 134 | normal: "Leather", 135 | color: 0x385225, 136 | pattern: "None", 137 | editable: true, 138 | isFabric: true, 139 | }, 140 | Vamp: { 141 | normal: "Leather", 142 | color: 0xffffff, 143 | pattern: "Camouflage", 144 | editable: true, 145 | isFabric: true, 146 | }, 147 | }; 148 | 149 | this.meshes = onChange(this.shoeParts, this.renderPreviews); 150 | } 151 | 152 | loadModel() { 153 | this.loader = new GLTFLoader(); 154 | this.loader.parse( 155 | gltfFile, 156 | "", 157 | gltf => { 158 | this.model = gltf.scene; 159 | this.scene.add(this.model); 160 | this.loopThrough(); 161 | this.setupGUI(); 162 | this.renderPreviews(); 163 | }, 164 | xhr => { 165 | // called while loading is progressing 166 | console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`); 167 | }, 168 | error => { 169 | // called when loading has errors 170 | console.error("An error happened", error); 171 | } 172 | ); 173 | } 174 | 175 | loopThrough() { 176 | this.model.traverse(child => { 177 | if (Object.keys(this.meshes).indexOf(child.name) != -1) { 178 | this.getMeshes(child); 179 | } 180 | }); 181 | } 182 | getMeshes(child) { 183 | if (child.isMesh) { 184 | this.setListeners(child); 185 | this.setMaterial(child); 186 | } else { 187 | child.children.forEach(element => { 188 | this.getMeshes(element); 189 | }); 190 | } 191 | } 192 | 193 | setListeners(child) { 194 | child.on("mouseover", this.onMouseOver); 195 | child.on("mouseout", this.onMouseOut); 196 | child.on("mousedown", this.onMouseDown); 197 | } 198 | 199 | setMaterial(child) { 200 | if (typeof child === "string" || child instanceof String) { 201 | child = this.model.getObjectByName(child); 202 | } 203 | const meshRef = this.getMeshRef(child); 204 | 205 | child.material.dispose(); 206 | const currentMesh = this.meshes[meshRef]; 207 | const mat = 208 | child.material.type == "MeshPhongMaterial" 209 | ? child.material 210 | : new THREE.MeshPhongMaterial(); 211 | 212 | if (currentMesh.color) { 213 | mat.dispose(); 214 | mat.color.setHex(currentMesh.color); 215 | } 216 | if (currentMesh.pattern && currentMesh.pattern !== "None") { 217 | const diffuse = Utils.getTexture( 218 | this.textures[currentMesh.pattern].pattern 219 | ); 220 | mat.map = diffuse; 221 | } 222 | 223 | if (currentMesh.normal) { 224 | const bumpMap = Utils.getTexture( 225 | this.textures[currentMesh.normal].normal 226 | ); 227 | mat.normalMap = bumpMap; 228 | } 229 | 230 | mat.needsUpdate = true; 231 | child.material = mat; 232 | } 233 | 234 | setShaderMaterial(childName) { 235 | const child = this.model.getObjectByName(childName); 236 | child.material.dispose(); 237 | 238 | this.delta = 0; 239 | const customUniforms = { 240 | color1: { 241 | type: "c", 242 | value: new THREE.Color(0xacb6e5), 243 | }, 244 | color2: { 245 | type: "c", 246 | value: new THREE.Color(0x74ebd5), 247 | }, 248 | delta: { value: 0 }, 249 | }; 250 | 251 | const mat = new THREE.ShaderMaterial({ 252 | fragmentShader: fragShader, 253 | vertexShader: vertShader, 254 | uniforms: customUniforms, 255 | }); 256 | 257 | mat.needsUpdate = true; 258 | child.material = mat; 259 | } 260 | 261 | getMeshRef(child) { 262 | const meshRef = 263 | Object.keys(this.meshes).indexOf(child.name) != -1 264 | ? child.name 265 | : Object.keys(this.meshes).indexOf(child.parent.name) != -1 266 | ? child.parent.name 267 | : child.parent.parent.name; 268 | 269 | return meshRef; 270 | } 271 | 272 | renderPreviews() { 273 | setTimeout(() => { 274 | for (var i = 1; i < this.views.length; i++) { 275 | const view = this.views[i]; 276 | const context = view.canvas.getContext("2d"); 277 | view.camera.updateMatrixWorld(true); 278 | this.previewRenderer.render(this.scene, view.camera); 279 | context.drawImage(this.previewRenderer.domElement, 0, 0); 280 | } 281 | }, 500); 282 | } 283 | 284 | updateCustomMesh() { 285 | //console.log("updateCustomMesh"); 286 | //this.delta += 0.1; 287 | if (this.model) { 288 | const customMesh = this.model.getObjectByName("Vamp"); 289 | //console.log(JSON.stringify(customMesh)); 290 | // customMesh.material.uniforms.delta.value = 291 | // 0.5 + Math.sin(this.delta) * 0.5; 292 | } 293 | } 294 | 295 | render() { 296 | this.controls.update(); 297 | this.updateCustomMesh(); 298 | this.mainRenderer.render(this.scene, this.views[0].camera); 299 | requestAnimationFrame(() => this.render()); 300 | } 301 | 302 | /** 303 | * Create a div element which will contain the Three.js canvas. 304 | */ 305 | createContainer() { 306 | const elements = document.getElementsByClassName("app"); 307 | if (elements.length !== 1) { 308 | alert("You need to have exactly ONE
in your HTML"); 309 | } 310 | const app = elements[0]; 311 | const div = document.createElement("div"); 312 | div.setAttribute("class", "main-canvas-container"); 313 | app.appendChild(div); 314 | this.container = div; 315 | } 316 | 317 | createPreviews() { 318 | const elements = document.getElementsByClassName("app"); 319 | const app = elements[0]; 320 | const div = document.createElement("div"); 321 | div.setAttribute("class", "preview"); 322 | app.appendChild(div); 323 | 324 | const front = document.createElement("canvas"); 325 | front.setAttribute("class", "front-canvas-container"); 326 | div.appendChild(front); 327 | this.frontCanvas = front; 328 | 329 | const side = document.createElement("canvas"); 330 | side.setAttribute("class", "side-canvas-container"); 331 | div.appendChild(side); 332 | this.sideCanvas = side; 333 | } 334 | 335 | initViews() { 336 | this.views = [ 337 | { 338 | name: "Main View", 339 | background: new THREE.Color(0.7, 0.5, 0.5), 340 | canvas: this.container, 341 | cameraSetup: { 342 | fov: 75, 343 | near: 0.1, 344 | far: 10000, 345 | name: "Main Camera", 346 | position: new THREE.Vector3(100, 200, 100), 347 | lookAt: this.scene.position, 348 | }, 349 | }, 350 | { 351 | name: "Side View", 352 | background: new THREE.Color(0.2, 0.5, 0.5), 353 | canvas: this.sideCanvas, 354 | cameraSetup: { 355 | fov: 50, 356 | near: 0.1, 357 | far: 10000, 358 | name: "Side Camera", 359 | position: new THREE.Vector3(-30, 60, 243), 360 | lookAt: new THREE.Vector3( 361 | this.scene.position.x - 30, 362 | this.scene.position.y + 30, 363 | this.scene.position.z 364 | ), 365 | rotation: new THREE.Vector3(100, 150, 150), 366 | }, 367 | }, 368 | { 369 | name: "Top View", 370 | background: new THREE.Color(0.2, 0.5, 0.5), 371 | canvas: this.frontCanvas, 372 | cameraSetup: { 373 | fov: 60, 374 | near: 0.1, 375 | far: 10000, 376 | name: "Top Camera", 377 | lookAt: new THREE.Vector3( 378 | this.scene.position.x - 30, 379 | this.scene.position.y, 380 | this.scene.position.z - 30 381 | ), 382 | position: new THREE.Vector3(-30, 244, 0), 383 | }, 384 | }, 385 | ]; 386 | } 387 | 388 | handleResize(event) { 389 | const { clientWidth, clientHeight } = this.container; 390 | this.views[0].camera.aspect = clientWidth / clientHeight; 391 | this.views[0].camera.updateProjectionMatrix(); 392 | this.mainRenderer.setSize(clientWidth, clientHeight); 393 | this.renderPreviews(); 394 | } 395 | 396 | onMouseOver(interactionEvent) { 397 | const child = interactionEvent.target; 398 | const { name, uuid, type } = interactionEvent.target; 399 | const meshRef = this.getMeshRef(child); 400 | if (this.meshes[meshRef].editable) { 401 | Utils.forEachMeshes(meshRef, this.model, this.setShaderMaterial); 402 | } 403 | } 404 | 405 | onMouseOut(interactionEvent) { 406 | const child = interactionEvent.currentTarget; 407 | const meshRef = this.getMeshRef(child); 408 | if (this.meshes[meshRef].editable) { 409 | Utils.forEachMeshes(meshRef, this.model, this.setMaterial); 410 | } 411 | } 412 | 413 | onMouseDown(interactionEvent) { 414 | const child = interactionEvent.target; 415 | const meshRef = this.getMeshRef(child); 416 | if (this.meshes[meshRef].editable) { 417 | this.addGUIFolder(meshRef); 418 | } 419 | } 420 | 421 | addSelectedObject(object) { 422 | const selectedObjects = []; 423 | return selectedObjects.push(object); 424 | } 425 | 426 | addGUIFolder(meshRef) { 427 | if (this.textureFolder) { 428 | this.removeGUIControls(); 429 | this.gui.removeFolder(this.textureFolder); 430 | this.textureFolder = null; 431 | } 432 | 433 | this.textureFolder = this.gui.addFolder(meshRef); 434 | this.addControls(meshRef); 435 | this.textureFolder.open(); 436 | } 437 | 438 | removeGUIControls() { 439 | if (this.texturePattern) { 440 | this.textureFolder.remove(this.texturePattern); 441 | this.texturePattern = null; 442 | } 443 | if (this.textureColor) { 444 | this.textureFolder.remove(this.textureColor); 445 | this.textureColor = null; 446 | } 447 | } 448 | 449 | addControls(meshRef) { 450 | this.removeGUIControls(); 451 | this.textureColor = this.textureFolder 452 | .addColor(this.meshes[meshRef], "color") 453 | .onChange(val => { 454 | Utils.setMeshesColor(meshRef, this.model, this.meshes[meshRef].color); 455 | }); 456 | Utils.setMeshesColor(meshRef, this.model, this.meshes[meshRef].color); 457 | 458 | if (this.meshes[meshRef].pattern) { 459 | this.texturePattern = this.textureFolder 460 | .add(this.meshes[meshRef], "pattern", [ 461 | "None", 462 | ...Object.keys(this.textures).slice(4, 8), 463 | ]) 464 | .onChange(val => { 465 | this.meshes[meshRef].pattern = val; 466 | const texture = 467 | this.meshes[meshRef].pattern === "None" 468 | ? null 469 | : this.textures[this.meshes[meshRef].pattern].pattern; 470 | Utils.setMeshesMap(meshRef, this.model, texture); 471 | }); 472 | } 473 | } 474 | 475 | setupScene() { 476 | this.scene = new THREE.Scene(); 477 | this.scene.autoUpdate = true; 478 | const style = window.getComputedStyle(this.container); 479 | this.scene.fog = null; 480 | } 481 | 482 | setupRenderers() { 483 | this.mainRenderer = new THREE.WebGLRenderer({ 484 | antialias: true, 485 | alpha: true, 486 | }); 487 | this.mainRenderer.setClearColor(0x000000, 0); 488 | this.mainRenderer.setPixelRatio(window.devicePixelRatio || 1); 489 | const { clientWidth, clientHeight } = this.container; 490 | this.mainRenderer.setSize(clientWidth, clientHeight); 491 | this.mainRenderer.shadowMap.enabled = false; 492 | this.container.appendChild(this.mainRenderer.domElement); 493 | 494 | this.previewRenderer = new THREE.WebGLRenderer({ 495 | antialias: true, 496 | alpha: true, 497 | }); 498 | this.previewRenderer.trans; 499 | this.previewRenderer.setClearColor(0x000000, 0); // it's a dark gray 500 | this.previewRenderer.setPixelRatio(window.devicePixelRatio || 1); 501 | 502 | this.previewRenderer.setSize( 503 | this.frontCanvas.clientWidth, 504 | this.frontCanvas.clientHeight 505 | ); 506 | this.previewRenderer.shadowMap.enabled = false; 507 | } 508 | 509 | setupCamera() { 510 | this.views.forEach(view => { 511 | const { clientWidth, clientHeight } = view.canvas; 512 | const aspect = clientWidth / clientHeight; 513 | view.canvas.width = clientWidth * window.devicePixelRatio; 514 | view.canvas.height = clientHeight * window.devicePixelRatio; 515 | const camera = new THREE.PerspectiveCamera( 516 | view.cameraSetup.fov, 517 | aspect, 518 | view.cameraSetup.near, 519 | view.cameraSetup.far 520 | ); 521 | camera.name = view.cameraSetup.name; 522 | camera.position.set( 523 | view.cameraSetup.position.x, 524 | view.cameraSetup.position.y, 525 | view.cameraSetup.position.z 526 | ); 527 | 528 | camera.lookAt(view.cameraSetup.lookAt); 529 | view.camera = camera; 530 | }); 531 | } 532 | 533 | setupLights() { 534 | this.lightGroup = new THREE.Group(); 535 | this.scene.add(this.lightGroup); 536 | this.lightGroup.add(new THREE.AmbientLight(0x464646)); 537 | const light1 = new THREE.DirectionalLight(0xffddcc, 1); 538 | light1.position.set(1, 0.75, 0.5); 539 | this.lightGroup.add(light1); 540 | const light2 = new THREE.DirectionalLight(0xccccff, 1); 541 | light2.position.set(-1, 0.75, -0.5); 542 | this.lightGroup.add(light2); 543 | } 544 | 545 | setupControls() { 546 | this.controls = new OrbitControls( 547 | this.views[0].camera, 548 | this.mainRenderer.domElement 549 | ); 550 | this.controls.enabled = true; 551 | this.controls.maxDistance = 1500; 552 | this.controls.minDistance = 0; 553 | this.controls.autoRotate = false; 554 | this.controls.maxPolarAngle = Math.PI / 2; 555 | } 556 | 557 | setupGUI() { 558 | this.gui = new DAT.GUI(); 559 | const materialFolder = this.gui.addFolder("Shoe Material"); 560 | 561 | materialFolder 562 | .add(this.shoeFabric, "type", Object.keys(this.textures).slice(0, 2)) 563 | .onChange(val => { 564 | const fabricMeshes = Object.keys(this.meshes).filter( 565 | key => this.meshes[key].isFabric 566 | ); 567 | fabricMeshes.forEach(key => { 568 | this.meshes[key].normal = val; 569 | }); 570 | 571 | const childrenNames = Utils.getAllChildrenNames( 572 | fabricMeshes, 573 | this.model 574 | ); 575 | childrenNames.forEach(childName => { 576 | const child = this.model.getObjectByName(childName); 577 | this.setMaterial(child); 578 | }); 579 | }); 580 | 581 | materialFolder.open(); 582 | } 583 | } 584 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { Application } from "./application"; 2 | 3 | import "../css/index.css"; 4 | 5 | // wrap everything inside a function scope and invoke it (IIFE, a.k.a. SEAF) 6 | (() => { 7 | const containers = document.getElementsByClassName("main-canvas-container"); 8 | let app = null; 9 | if (containers.length === 0) { 10 | app = new Application({ showHelpers: true }); 11 | } else if (containers.length === 1) { 12 | app = new Application({ 13 | container: containers[0], 14 | }); 15 | } else { 16 | alert("Too many
elements in your HTML"); 17 | } 18 | console.log("Application instance", app); 19 | })(); 20 | 21 | // Note: neither app nor containers are defined here because they were available 22 | // only in function scope, so we don't pollute the global namespace. 23 | -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | 3 | export function getAllChildrenNames(meshRef, model) { 4 | const children = []; 5 | if (typeof meshRef === "string") { 6 | const main = model.getObjectByName(meshRef); 7 | if (main.isMesh) { 8 | children.push(main.name); 9 | } else { 10 | main.children.forEach(child => { 11 | children.push(child.name); 12 | }); 13 | } 14 | return children; 15 | } else if (Array.isArray(meshRef)) { 16 | meshRef.forEach(ref => { 17 | children.push(...this.getAllChildrenNames(ref, model)); 18 | }); 19 | return children; 20 | } 21 | } 22 | export function setMeshesColor(meshRef, model, color) { 23 | const childrenNames = this.getAllChildrenNames(meshRef, model); 24 | childrenNames.forEach(childName => { 25 | const child = model.getObjectByName(childName); 26 | if (child.isMesh) { 27 | child.material.dispose(); 28 | child.material.color = new THREE.Color(color); 29 | } 30 | }); 31 | } 32 | 33 | export function forEachMeshes(meshRef, model, func) { 34 | const childrenNames = this.getAllChildrenNames(meshRef, model); 35 | childrenNames.forEach(func); 36 | } 37 | 38 | export function setMeshesMap(meshRef, model, texture) { 39 | const childrenNames = this.getAllChildrenNames(meshRef, model); 40 | childrenNames.forEach(childName => { 41 | const child = model.getObjectByName(childName); 42 | if (!texture) { 43 | child.material.map = null; 44 | } else { 45 | const diffuse = this.getTexture(texture); 46 | child.material.map = diffuse; 47 | } 48 | child.material.needsUpdate = true; 49 | }); 50 | } 51 | 52 | export function getTexture(name) { 53 | const texture = new THREE.TextureLoader().load(name); 54 | texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 55 | return texture; 56 | } 57 | 58 | export function invertHex(hex) { 59 | return (Number(`0x1${hex}`) ^ 0xffffff) 60 | .toString(16) 61 | .substr(1) 62 | .toUpperCase(); 63 | } 64 | -------------------------------------------------------------------------------- /src/js/vendor/Detector.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * @author mr.doob / http://mrdoob.com/ 4 | */ 5 | 6 | var Detector = { 7 | canvas: !!window.CanvasRenderingContext2D, 8 | webgl: (function() { 9 | try { 10 | var canvas = document.createElement("canvas"); 11 | return !!( 12 | window.WebGLRenderingContext && 13 | (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) 14 | ); 15 | } catch (e) { 16 | return false; 17 | } 18 | })(), 19 | workers: !!window.Worker, 20 | fileapi: window.File && window.FileReader && window.FileList && window.Blob, 21 | 22 | getWebGLErrorMessage: function() { 23 | var element = document.createElement("div"); 24 | element.id = "webgl-error-message"; 25 | element.style.fontFamily = "monospace"; 26 | element.style.fontSize = "13px"; 27 | element.style.fontWeight = "normal"; 28 | element.style.textAlign = "center"; 29 | element.style.background = "#fff"; 30 | element.style.color = "#000"; 31 | element.style.padding = "1.5em"; 32 | element.style.width = "400px"; 33 | element.style.margin = "5em auto 0"; 34 | 35 | if (!this.webgl) { 36 | element.innerHTML = window.WebGLRenderingContext 37 | ? [ 38 | 'Your graphics card does not seem to support WebGL.
', 39 | 'Find out how to get it here.', 40 | ].join("\n") 41 | : [ 42 | 'Your browser does not seem to support WebGL.
', 43 | 'Find out how to get it here.', 44 | ].join("\n"); 45 | } 46 | 47 | return element; 48 | }, 49 | 50 | addGetWebGLMessage: function(parameters) { 51 | var parent, id, element; 52 | 53 | parameters = parameters || {}; 54 | 55 | parent = 56 | parameters.parent !== undefined ? parameters.parent : document.body; 57 | id = parameters.id !== undefined ? parameters.id : "oldie"; 58 | 59 | element = Detector.getWebGLErrorMessage(); 60 | element.id = id; 61 | 62 | parent.appendChild(element); 63 | }, 64 | }; 65 | 66 | // browserify support 67 | if (typeof module === "object") { 68 | module.exports = Detector; 69 | } 70 | -------------------------------------------------------------------------------- /src/js/vendor/dat.gui.min.js: -------------------------------------------------------------------------------- 1 | !(function(e, t) { 2 | "object" == typeof exports && "object" == typeof module 3 | ? (module.exports = t()) 4 | : "function" == typeof define && define.amd 5 | ? define([], t) 6 | : "object" == typeof exports 7 | ? (exports.dat = t()) 8 | : (e.dat = t()); 9 | })(this, function() { 10 | return (function(e) { 11 | function t(o) { 12 | if (n[o]) return n[o].exports; 13 | var i = (n[o] = { exports: {}, id: o, loaded: !1 }); 14 | return e[o].call(i.exports, i, i.exports, t), (i.loaded = !0), i.exports; 15 | } 16 | var n = {}; 17 | return (t.m = e), (t.c = n), (t.p = ""), t(0); 18 | })([ 19 | function(e, t, n) { 20 | "use strict"; 21 | function o(e) { 22 | return e && e.__esModule ? e : { default: e }; 23 | } 24 | t.__esModule = !0; 25 | var i = n(1), 26 | r = o(i); 27 | (t.default = r.default), (e.exports = t.default); 28 | }, 29 | function(e, t, n) { 30 | "use strict"; 31 | function o(e) { 32 | return e && e.__esModule ? e : { default: e }; 33 | } 34 | t.__esModule = !0; 35 | var i = n(2), 36 | r = o(i), 37 | a = n(6), 38 | l = o(a), 39 | s = n(3), 40 | u = o(s), 41 | d = n(7), 42 | c = o(d), 43 | f = n(8), 44 | _ = o(f), 45 | p = n(10), 46 | h = o(p), 47 | m = n(11), 48 | b = o(m), 49 | g = n(12), 50 | v = o(g), 51 | y = n(13), 52 | w = o(y), 53 | x = n(14), 54 | E = o(x), 55 | C = n(15), 56 | A = o(C), 57 | S = n(16), 58 | k = o(S), 59 | O = n(9), 60 | T = o(O), 61 | R = n(17), 62 | L = o(R); 63 | (t.default = { 64 | color: { Color: r.default, math: l.default, interpret: u.default }, 65 | controllers: { 66 | Controller: c.default, 67 | BooleanController: _.default, 68 | OptionController: h.default, 69 | StringController: b.default, 70 | NumberController: v.default, 71 | NumberControllerBox: w.default, 72 | NumberControllerSlider: E.default, 73 | FunctionController: A.default, 74 | ColorController: k.default, 75 | }, 76 | dom: { dom: T.default }, 77 | gui: { GUI: L.default }, 78 | GUI: L.default, 79 | }), 80 | (e.exports = t.default); 81 | }, 82 | function(e, t, n) { 83 | "use strict"; 84 | function o(e) { 85 | return e && e.__esModule ? e : { default: e }; 86 | } 87 | function i(e, t) { 88 | if (!(e instanceof t)) 89 | throw new TypeError("Cannot call a class as a function"); 90 | } 91 | function r(e, t, n) { 92 | Object.defineProperty(e, t, { 93 | get: function() { 94 | return "RGB" === this.__state.space 95 | ? this.__state[t] 96 | : (h.recalculateRGB(this, t, n), this.__state[t]); 97 | }, 98 | set: function(e) { 99 | "RGB" !== this.__state.space && 100 | (h.recalculateRGB(this, t, n), (this.__state.space = "RGB")), 101 | (this.__state[t] = e); 102 | }, 103 | }); 104 | } 105 | function a(e, t) { 106 | Object.defineProperty(e, t, { 107 | get: function() { 108 | return "HSV" === this.__state.space 109 | ? this.__state[t] 110 | : (h.recalculateHSV(this), this.__state[t]); 111 | }, 112 | set: function(e) { 113 | "HSV" !== this.__state.space && 114 | (h.recalculateHSV(this), (this.__state.space = "HSV")), 115 | (this.__state[t] = e); 116 | }, 117 | }); 118 | } 119 | t.__esModule = !0; 120 | var l = n(3), 121 | s = o(l), 122 | u = n(6), 123 | d = o(u), 124 | c = n(4), 125 | f = o(c), 126 | _ = n(5), 127 | p = o(_), 128 | h = (function() { 129 | function e() { 130 | if ( 131 | (i(this, e), 132 | (this.__state = s.default.apply(this, arguments)), 133 | this.__state === !1) 134 | ) 135 | throw new Error("Failed to interpret color arguments"); 136 | this.__state.a = this.__state.a || 1; 137 | } 138 | return ( 139 | (e.prototype.toString = function() { 140 | return (0, f.default)(this); 141 | }), 142 | (e.prototype.toHexString = function() { 143 | return (0, f.default)(this, !0); 144 | }), 145 | (e.prototype.toOriginal = function() { 146 | return this.__state.conversion.write(this); 147 | }), 148 | e 149 | ); 150 | })(); 151 | (h.recalculateRGB = function(e, t, n) { 152 | if ("HEX" === e.__state.space) 153 | e.__state[t] = d.default.component_from_hex(e.__state.hex, n); 154 | else { 155 | if ("HSV" !== e.__state.space) 156 | throw new Error("Corrupted color state"); 157 | p.default.extend( 158 | e.__state, 159 | d.default.hsv_to_rgb(e.__state.h, e.__state.s, e.__state.v) 160 | ); 161 | } 162 | }), 163 | (h.recalculateHSV = function(e) { 164 | var t = d.default.rgb_to_hsv(e.r, e.g, e.b); 165 | p.default.extend(e.__state, { s: t.s, v: t.v }), 166 | p.default.isNaN(t.h) 167 | ? p.default.isUndefined(e.__state.h) && (e.__state.h = 0) 168 | : (e.__state.h = t.h); 169 | }), 170 | (h.COMPONENTS = ["r", "g", "b", "h", "s", "v", "hex", "a"]), 171 | r(h.prototype, "r", 2), 172 | r(h.prototype, "g", 1), 173 | r(h.prototype, "b", 0), 174 | a(h.prototype, "h"), 175 | a(h.prototype, "s"), 176 | a(h.prototype, "v"), 177 | Object.defineProperty(h.prototype, "a", { 178 | get: function() { 179 | return this.__state.a; 180 | }, 181 | set: function(e) { 182 | this.__state.a = e; 183 | }, 184 | }), 185 | Object.defineProperty(h.prototype, "hex", { 186 | get: function() { 187 | return ( 188 | "HEX" !== !this.__state.space && 189 | (this.__state.hex = d.default.rgb_to_hex( 190 | this.r, 191 | this.g, 192 | this.b 193 | )), 194 | this.__state.hex 195 | ); 196 | }, 197 | set: function(e) { 198 | (this.__state.space = "HEX"), (this.__state.hex = e); 199 | }, 200 | }), 201 | (t.default = h), 202 | (e.exports = t.default); 203 | }, 204 | function(e, t, n) { 205 | "use strict"; 206 | function o(e) { 207 | return e && e.__esModule ? e : { default: e }; 208 | } 209 | t.__esModule = !0; 210 | var i = n(4), 211 | r = o(i), 212 | a = n(5), 213 | l = o(a), 214 | s = [ 215 | { 216 | litmus: l.default.isString, 217 | conversions: { 218 | THREE_CHAR_HEX: { 219 | read: function(e) { 220 | var t = e.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i); 221 | return ( 222 | null !== t && { 223 | space: "HEX", 224 | hex: parseInt( 225 | "0x" + 226 | t[1].toString() + 227 | t[1].toString() + 228 | t[2].toString() + 229 | t[2].toString() + 230 | t[3].toString() + 231 | t[3].toString(), 232 | 0 233 | ), 234 | } 235 | ); 236 | }, 237 | write: r.default, 238 | }, 239 | SIX_CHAR_HEX: { 240 | read: function(e) { 241 | var t = e.match(/^#([A-F0-9]{6})$/i); 242 | return ( 243 | null !== t && { 244 | space: "HEX", 245 | hex: parseInt("0x" + t[1].toString(), 0), 246 | } 247 | ); 248 | }, 249 | write: r.default, 250 | }, 251 | CSS_RGB: { 252 | read: function(e) { 253 | var t = e.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); 254 | return ( 255 | null !== t && { 256 | space: "RGB", 257 | r: parseFloat(t[1]), 258 | g: parseFloat(t[2]), 259 | b: parseFloat(t[3]), 260 | } 261 | ); 262 | }, 263 | write: r.default, 264 | }, 265 | CSS_RGBA: { 266 | read: function(e) { 267 | var t = e.match( 268 | /^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/ 269 | ); 270 | return ( 271 | null !== t && { 272 | space: "RGB", 273 | r: parseFloat(t[1]), 274 | g: parseFloat(t[2]), 275 | b: parseFloat(t[3]), 276 | a: parseFloat(t[4]), 277 | } 278 | ); 279 | }, 280 | write: r.default, 281 | }, 282 | }, 283 | }, 284 | { 285 | litmus: l.default.isNumber, 286 | conversions: { 287 | HEX: { 288 | read: function(e) { 289 | return { space: "HEX", hex: e, conversionName: "HEX" }; 290 | }, 291 | write: function(e) { 292 | return e.hex; 293 | }, 294 | }, 295 | }, 296 | }, 297 | { 298 | litmus: l.default.isArray, 299 | conversions: { 300 | RGB_ARRAY: { 301 | read: function(e) { 302 | return ( 303 | 3 === e.length && { 304 | space: "RGB", 305 | r: e[0], 306 | g: e[1], 307 | b: e[2], 308 | } 309 | ); 310 | }, 311 | write: function(e) { 312 | return [e.r, e.g, e.b]; 313 | }, 314 | }, 315 | RGBA_ARRAY: { 316 | read: function(e) { 317 | return ( 318 | 4 === e.length && { 319 | space: "RGB", 320 | r: e[0], 321 | g: e[1], 322 | b: e[2], 323 | a: e[3], 324 | } 325 | ); 326 | }, 327 | write: function(e) { 328 | return [e.r, e.g, e.b, e.a]; 329 | }, 330 | }, 331 | }, 332 | }, 333 | { 334 | litmus: l.default.isObject, 335 | conversions: { 336 | RGBA_OBJ: { 337 | read: function(e) { 338 | return ( 339 | !!( 340 | l.default.isNumber(e.r) && 341 | l.default.isNumber(e.g) && 342 | l.default.isNumber(e.b) && 343 | l.default.isNumber(e.a) 344 | ) && { space: "RGB", r: e.r, g: e.g, b: e.b, a: e.a } 345 | ); 346 | }, 347 | write: function(e) { 348 | return { r: e.r, g: e.g, b: e.b, a: e.a }; 349 | }, 350 | }, 351 | RGB_OBJ: { 352 | read: function(e) { 353 | return ( 354 | !!( 355 | l.default.isNumber(e.r) && 356 | l.default.isNumber(e.g) && 357 | l.default.isNumber(e.b) 358 | ) && { space: "RGB", r: e.r, g: e.g, b: e.b } 359 | ); 360 | }, 361 | write: function(e) { 362 | return { r: e.r, g: e.g, b: e.b }; 363 | }, 364 | }, 365 | HSVA_OBJ: { 366 | read: function(e) { 367 | return ( 368 | !!( 369 | l.default.isNumber(e.h) && 370 | l.default.isNumber(e.s) && 371 | l.default.isNumber(e.v) && 372 | l.default.isNumber(e.a) 373 | ) && { space: "HSV", h: e.h, s: e.s, v: e.v, a: e.a } 374 | ); 375 | }, 376 | write: function(e) { 377 | return { h: e.h, s: e.s, v: e.v, a: e.a }; 378 | }, 379 | }, 380 | HSV_OBJ: { 381 | read: function(e) { 382 | return ( 383 | !!( 384 | l.default.isNumber(e.h) && 385 | l.default.isNumber(e.s) && 386 | l.default.isNumber(e.v) 387 | ) && { space: "HSV", h: e.h, s: e.s, v: e.v } 388 | ); 389 | }, 390 | write: function(e) { 391 | return { h: e.h, s: e.s, v: e.v }; 392 | }, 393 | }, 394 | }, 395 | }, 396 | ], 397 | u = void 0, 398 | d = void 0, 399 | c = function() { 400 | d = !1; 401 | var e = 402 | arguments.length > 1 ? l.default.toArray(arguments) : arguments[0]; 403 | return ( 404 | l.default.each(s, function(t) { 405 | if (t.litmus(e)) 406 | return ( 407 | l.default.each(t.conversions, function(t, n) { 408 | if (((u = t.read(e)), d === !1 && u !== !1)) 409 | return ( 410 | (d = u), 411 | (u.conversionName = n), 412 | (u.conversion = t), 413 | l.default.BREAK 414 | ); 415 | }), 416 | l.default.BREAK 417 | ); 418 | }), 419 | d 420 | ); 421 | }; 422 | (t.default = c), (e.exports = t.default); 423 | }, 424 | function(e, t) { 425 | "use strict"; 426 | (t.__esModule = !0), 427 | (t.default = function(e, t) { 428 | var n = e.__state.conversionName.toString(), 429 | o = Math.round(e.r), 430 | i = Math.round(e.g), 431 | r = Math.round(e.b), 432 | a = e.a, 433 | l = Math.round(e.h), 434 | s = e.s.toFixed(1), 435 | u = e.v.toFixed(1); 436 | if (t || "THREE_CHAR_HEX" === n || "SIX_CHAR_HEX" === n) { 437 | for (var d = e.hex.toString(16); d.length < 6; ) d = "0" + d; 438 | return "#" + d; 439 | } 440 | return "CSS_RGB" === n 441 | ? "rgb(" + o + "," + i + "," + r + ")" 442 | : "CSS_RGBA" === n 443 | ? "rgba(" + o + "," + i + "," + r + "," + a + ")" 444 | : "HEX" === n 445 | ? "0x" + e.hex.toString(16) 446 | : "RGB_ARRAY" === n 447 | ? "[" + o + "," + i + "," + r + "]" 448 | : "RGBA_ARRAY" === n 449 | ? "[" + o + "," + i + "," + r + "," + a + "]" 450 | : "RGB_OBJ" === n 451 | ? "{r:" + o + ",g:" + i + ",b:" + r + "}" 452 | : "RGBA_OBJ" === n 453 | ? "{r:" + o + ",g:" + i + ",b:" + r + ",a:" + a + "}" 454 | : "HSV_OBJ" === n 455 | ? "{h:" + l + ",s:" + s + ",v:" + u + "}" 456 | : "HSVA_OBJ" === n 457 | ? "{h:" + l + ",s:" + s + ",v:" + u + ",a:" + a + "}" 458 | : "unknown format"; 459 | }), 460 | (e.exports = t.default); 461 | }, 462 | function(e, t) { 463 | "use strict"; 464 | t.__esModule = !0; 465 | var n = Array.prototype.forEach, 466 | o = Array.prototype.slice, 467 | i = { 468 | BREAK: {}, 469 | extend: function(e) { 470 | return ( 471 | this.each( 472 | o.call(arguments, 1), 473 | function(t) { 474 | var n = this.isObject(t) ? Object.keys(t) : []; 475 | n.forEach( 476 | function(n) { 477 | this.isUndefined(t[n]) || (e[n] = t[n]); 478 | }.bind(this) 479 | ); 480 | }, 481 | this 482 | ), 483 | e 484 | ); 485 | }, 486 | defaults: function(e) { 487 | return ( 488 | this.each( 489 | o.call(arguments, 1), 490 | function(t) { 491 | var n = this.isObject(t) ? Object.keys(t) : []; 492 | n.forEach( 493 | function(n) { 494 | this.isUndefined(e[n]) && (e[n] = t[n]); 495 | }.bind(this) 496 | ); 497 | }, 498 | this 499 | ), 500 | e 501 | ); 502 | }, 503 | compose: function() { 504 | var e = o.call(arguments); 505 | return function() { 506 | for (var t = o.call(arguments), n = e.length - 1; n >= 0; n--) 507 | t = [e[n].apply(this, t)]; 508 | return t[0]; 509 | }; 510 | }, 511 | each: function(e, t, o) { 512 | if (e) 513 | if (n && e.forEach && e.forEach === n) e.forEach(t, o); 514 | else if (e.length === e.length + 0) { 515 | var i = void 0, 516 | r = void 0; 517 | for (i = 0, r = e.length; i < r; i++) 518 | if (i in e && t.call(o, e[i], i) === this.BREAK) return; 519 | } else 520 | for (var a in e) if (t.call(o, e[a], a) === this.BREAK) return; 521 | }, 522 | defer: function(e) { 523 | setTimeout(e, 0); 524 | }, 525 | debounce: function(e, t, n) { 526 | var o = void 0; 527 | return function() { 528 | function i() { 529 | (o = null), n || e.apply(r, a); 530 | } 531 | var r = this, 532 | a = arguments, 533 | l = n || !o; 534 | clearTimeout(o), (o = setTimeout(i, t)), l && e.apply(r, a); 535 | }; 536 | }, 537 | toArray: function(e) { 538 | return e.toArray ? e.toArray() : o.call(e); 539 | }, 540 | isUndefined: function(e) { 541 | return void 0 === e; 542 | }, 543 | isNull: function(e) { 544 | return null === e; 545 | }, 546 | isNaN: (function(e) { 547 | function t(t) { 548 | return e.apply(this, arguments); 549 | } 550 | return ( 551 | (t.toString = function() { 552 | return e.toString(); 553 | }), 554 | t 555 | ); 556 | })(function(e) { 557 | return isNaN(e); 558 | }), 559 | isArray: 560 | Array.isArray || 561 | function(e) { 562 | return e.constructor === Array; 563 | }, 564 | isObject: function(e) { 565 | return e === Object(e); 566 | }, 567 | isNumber: function(e) { 568 | return e === e + 0; 569 | }, 570 | isString: function(e) { 571 | return e === e + ""; 572 | }, 573 | isBoolean: function(e) { 574 | return e === !1 || e === !0; 575 | }, 576 | isFunction: function(e) { 577 | return "[object Function]" === Object.prototype.toString.call(e); 578 | }, 579 | }; 580 | (t.default = i), (e.exports = t.default); 581 | }, 582 | function(e, t) { 583 | "use strict"; 584 | t.__esModule = !0; 585 | var n = void 0, 586 | o = { 587 | hsv_to_rgb: function(e, t, n) { 588 | var o = Math.floor(e / 60) % 6, 589 | i = e / 60 - Math.floor(e / 60), 590 | r = n * (1 - t), 591 | a = n * (1 - i * t), 592 | l = n * (1 - (1 - i) * t), 593 | s = [ 594 | [n, l, r], 595 | [a, n, r], 596 | [r, n, l], 597 | [r, a, n], 598 | [l, r, n], 599 | [n, r, a], 600 | ][o]; 601 | return { r: 255 * s[0], g: 255 * s[1], b: 255 * s[2] }; 602 | }, 603 | rgb_to_hsv: function(e, t, n) { 604 | var o = Math.min(e, t, n), 605 | i = Math.max(e, t, n), 606 | r = i - o, 607 | a = void 0, 608 | l = void 0; 609 | return 0 === i 610 | ? { h: NaN, s: 0, v: 0 } 611 | : ((l = r / i), 612 | (a = 613 | e === i 614 | ? (t - n) / r 615 | : t === i 616 | ? 2 + (n - e) / r 617 | : 4 + (e - t) / r), 618 | (a /= 6), 619 | a < 0 && (a += 1), 620 | { h: 360 * a, s: l, v: i / 255 }); 621 | }, 622 | rgb_to_hex: function(e, t, n) { 623 | var o = this.hex_with_component(0, 2, e); 624 | return ( 625 | (o = this.hex_with_component(o, 1, t)), 626 | (o = this.hex_with_component(o, 0, n)) 627 | ); 628 | }, 629 | component_from_hex: function(e, t) { 630 | return (e >> (8 * t)) & 255; 631 | }, 632 | hex_with_component: function(e, t, o) { 633 | return (o << (n = 8 * t)) | (e & ~(255 << n)); 634 | }, 635 | }; 636 | (t.default = o), (e.exports = t.default); 637 | }, 638 | function(e, t) { 639 | "use strict"; 640 | function n(e, t) { 641 | if (!(e instanceof t)) 642 | throw new TypeError("Cannot call a class as a function"); 643 | } 644 | t.__esModule = !0; 645 | var o = (function() { 646 | function e(t, o) { 647 | n(this, e), 648 | (this.initialValue = t[o]), 649 | (this.domElement = document.createElement("div")), 650 | (this.object = t), 651 | (this.property = o), 652 | (this.__onChange = void 0), 653 | (this.__onFinishChange = void 0); 654 | } 655 | return ( 656 | (e.prototype.onChange = function(e) { 657 | return (this.__onChange = e), this; 658 | }), 659 | (e.prototype.onFinishChange = function(e) { 660 | return (this.__onFinishChange = e), this; 661 | }), 662 | (e.prototype.setValue = function(e) { 663 | return ( 664 | (this.object[this.property] = e), 665 | this.__onChange && this.__onChange.call(this, e), 666 | this.updateDisplay(), 667 | this 668 | ); 669 | }), 670 | (e.prototype.getValue = function() { 671 | return this.object[this.property]; 672 | }), 673 | (e.prototype.updateDisplay = function() { 674 | return this; 675 | }), 676 | (e.prototype.isModified = function() { 677 | return this.initialValue !== this.getValue(); 678 | }), 679 | e 680 | ); 681 | })(); 682 | (t.default = o), (e.exports = t.default); 683 | }, 684 | function(e, t, n) { 685 | "use strict"; 686 | function o(e) { 687 | return e && e.__esModule ? e : { default: e }; 688 | } 689 | function i(e, t) { 690 | if (!(e instanceof t)) 691 | throw new TypeError("Cannot call a class as a function"); 692 | } 693 | function r(e, t) { 694 | if (!e) 695 | throw new ReferenceError( 696 | "this hasn't been initialised - super() hasn't been called" 697 | ); 698 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 699 | } 700 | function a(e, t) { 701 | if ("function" != typeof t && null !== t) 702 | throw new TypeError( 703 | "Super expression must either be null or a function, not " + 704 | typeof t 705 | ); 706 | (e.prototype = Object.create(t && t.prototype, { 707 | constructor: { 708 | value: e, 709 | enumerable: !1, 710 | writable: !0, 711 | configurable: !0, 712 | }, 713 | })), 714 | t && 715 | (Object.setPrototypeOf 716 | ? Object.setPrototypeOf(e, t) 717 | : (e.__proto__ = t)); 718 | } 719 | t.__esModule = !0; 720 | var l = n(7), 721 | s = o(l), 722 | u = n(9), 723 | d = o(u), 724 | c = (function(e) { 725 | function t(n, o) { 726 | function a() { 727 | s.setValue(!s.__prev); 728 | } 729 | i(this, t); 730 | var l = r(this, e.call(this, n, o)), 731 | s = l; 732 | return ( 733 | (l.__prev = l.getValue()), 734 | (l.__checkbox = document.createElement("input")), 735 | l.__checkbox.setAttribute("type", "checkbox"), 736 | d.default.bind(l.__checkbox, "change", a, !1), 737 | l.domElement.appendChild(l.__checkbox), 738 | l.updateDisplay(), 739 | l 740 | ); 741 | } 742 | return ( 743 | a(t, e), 744 | (t.prototype.setValue = function(t) { 745 | var n = e.prototype.setValue.call(this, t); 746 | return ( 747 | this.__onFinishChange && 748 | this.__onFinishChange.call(this, this.getValue()), 749 | (this.__prev = this.getValue()), 750 | n 751 | ); 752 | }), 753 | (t.prototype.updateDisplay = function() { 754 | return ( 755 | this.getValue() === !0 756 | ? (this.__checkbox.setAttribute("checked", "checked"), 757 | (this.__checkbox.checked = !0), 758 | (this.__prev = !0)) 759 | : ((this.__checkbox.checked = !1), (this.__prev = !1)), 760 | e.prototype.updateDisplay.call(this) 761 | ); 762 | }), 763 | t 764 | ); 765 | })(s.default); 766 | (t.default = c), (e.exports = t.default); 767 | }, 768 | function(e, t, n) { 769 | "use strict"; 770 | function o(e) { 771 | return e && e.__esModule ? e : { default: e }; 772 | } 773 | function i(e) { 774 | if ("0" === e || a.default.isUndefined(e)) return 0; 775 | var t = e.match(u); 776 | return a.default.isNull(t) ? 0 : parseFloat(t[1]); 777 | } 778 | t.__esModule = !0; 779 | var r = n(5), 780 | a = o(r), 781 | l = { 782 | HTMLEvents: ["change"], 783 | MouseEvents: [ 784 | "click", 785 | "mousemove", 786 | "mousedown", 787 | "mouseup", 788 | "mouseover", 789 | ], 790 | KeyboardEvents: ["keydown"], 791 | }, 792 | s = {}; 793 | a.default.each(l, function(e, t) { 794 | a.default.each(e, function(e) { 795 | s[e] = t; 796 | }); 797 | }); 798 | var u = /(\d+(\.\d+)?)px/, 799 | d = { 800 | makeSelectable: function(e, t) { 801 | void 0 !== e && 802 | void 0 !== e.style && 803 | ((e.onselectstart = t 804 | ? function() { 805 | return !1; 806 | } 807 | : function() {}), 808 | (e.style.MozUserSelect = t ? "auto" : "none"), 809 | (e.style.KhtmlUserSelect = t ? "auto" : "none"), 810 | (e.unselectable = t ? "on" : "off")); 811 | }, 812 | makeFullscreen: function(e, t, n) { 813 | var o = n, 814 | i = t; 815 | a.default.isUndefined(i) && (i = !0), 816 | a.default.isUndefined(o) && (o = !0), 817 | (e.style.position = "absolute"), 818 | i && ((e.style.left = 0), (e.style.right = 0)), 819 | o && ((e.style.top = 0), (e.style.bottom = 0)); 820 | }, 821 | fakeEvent: function(e, t, n, o) { 822 | var i = n || {}, 823 | r = s[t]; 824 | if (!r) throw new Error("Event type " + t + " not supported."); 825 | var l = document.createEvent(r); 826 | switch (r) { 827 | case "MouseEvents": 828 | var u = i.x || i.clientX || 0, 829 | d = i.y || i.clientY || 0; 830 | l.initMouseEvent( 831 | t, 832 | i.bubbles || !1, 833 | i.cancelable || !0, 834 | window, 835 | i.clickCount || 1, 836 | 0, 837 | 0, 838 | u, 839 | d, 840 | !1, 841 | !1, 842 | !1, 843 | !1, 844 | 0, 845 | null 846 | ); 847 | break; 848 | case "KeyboardEvents": 849 | var c = l.initKeyboardEvent || l.initKeyEvent; 850 | a.default.defaults(i, { 851 | cancelable: !0, 852 | ctrlKey: !1, 853 | altKey: !1, 854 | shiftKey: !1, 855 | metaKey: !1, 856 | keyCode: void 0, 857 | charCode: void 0, 858 | }), 859 | c( 860 | t, 861 | i.bubbles || !1, 862 | i.cancelable, 863 | window, 864 | i.ctrlKey, 865 | i.altKey, 866 | i.shiftKey, 867 | i.metaKey, 868 | i.keyCode, 869 | i.charCode 870 | ); 871 | break; 872 | default: 873 | l.initEvent(t, i.bubbles || !1, i.cancelable || !0); 874 | } 875 | a.default.defaults(l, o), e.dispatchEvent(l); 876 | }, 877 | bind: function(e, t, n, o) { 878 | var i = o || !1; 879 | return ( 880 | e.addEventListener 881 | ? e.addEventListener(t, n, i) 882 | : e.attachEvent && e.attachEvent("on" + t, n), 883 | d 884 | ); 885 | }, 886 | unbind: function(e, t, n, o) { 887 | var i = o || !1; 888 | return ( 889 | e.removeEventListener 890 | ? e.removeEventListener(t, n, i) 891 | : e.detachEvent && e.detachEvent("on" + t, n), 892 | d 893 | ); 894 | }, 895 | addClass: function(e, t) { 896 | if (void 0 === e.className) e.className = t; 897 | else if (e.className !== t) { 898 | var n = e.className.split(/ +/); 899 | n.indexOf(t) === -1 && 900 | (n.push(t), 901 | (e.className = n 902 | .join(" ") 903 | .replace(/^\s+/, "") 904 | .replace(/\s+$/, ""))); 905 | } 906 | return d; 907 | }, 908 | removeClass: function(e, t) { 909 | if (t) 910 | if (e.className === t) e.removeAttribute("class"); 911 | else { 912 | var n = e.className.split(/ +/), 913 | o = n.indexOf(t); 914 | o !== -1 && (n.splice(o, 1), (e.className = n.join(" "))); 915 | } 916 | else e.className = void 0; 917 | return d; 918 | }, 919 | hasClass: function(e, t) { 920 | return ( 921 | new RegExp("(?:^|\\s+)" + t + "(?:\\s+|$)").test(e.className) || 922 | !1 923 | ); 924 | }, 925 | getWidth: function(e) { 926 | var t = getComputedStyle(e); 927 | return ( 928 | i(t["border-left-width"]) + 929 | i(t["border-right-width"]) + 930 | i(t["padding-left"]) + 931 | i(t["padding-right"]) + 932 | i(t.width) 933 | ); 934 | }, 935 | getHeight: function(e) { 936 | var t = getComputedStyle(e); 937 | return ( 938 | i(t["border-top-width"]) + 939 | i(t["border-bottom-width"]) + 940 | i(t["padding-top"]) + 941 | i(t["padding-bottom"]) + 942 | i(t.height) 943 | ); 944 | }, 945 | getOffset: function(e) { 946 | var t = e, 947 | n = { left: 0, top: 0 }; 948 | if (t.offsetParent) 949 | do 950 | (n.left += t.offsetLeft), 951 | (n.top += t.offsetTop), 952 | (t = t.offsetParent); 953 | while (t); 954 | return n; 955 | }, 956 | isActive: function(e) { 957 | return e === document.activeElement && (e.type || e.href); 958 | }, 959 | }; 960 | (t.default = d), (e.exports = t.default); 961 | }, 962 | function(e, t, n) { 963 | "use strict"; 964 | function o(e) { 965 | return e && e.__esModule ? e : { default: e }; 966 | } 967 | function i(e, t) { 968 | if (!(e instanceof t)) 969 | throw new TypeError("Cannot call a class as a function"); 970 | } 971 | function r(e, t) { 972 | if (!e) 973 | throw new ReferenceError( 974 | "this hasn't been initialised - super() hasn't been called" 975 | ); 976 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 977 | } 978 | function a(e, t) { 979 | if ("function" != typeof t && null !== t) 980 | throw new TypeError( 981 | "Super expression must either be null or a function, not " + 982 | typeof t 983 | ); 984 | (e.prototype = Object.create(t && t.prototype, { 985 | constructor: { 986 | value: e, 987 | enumerable: !1, 988 | writable: !0, 989 | configurable: !0, 990 | }, 991 | })), 992 | t && 993 | (Object.setPrototypeOf 994 | ? Object.setPrototypeOf(e, t) 995 | : (e.__proto__ = t)); 996 | } 997 | t.__esModule = !0; 998 | var l = n(7), 999 | s = o(l), 1000 | u = n(9), 1001 | d = o(u), 1002 | c = n(5), 1003 | f = o(c), 1004 | _ = (function(e) { 1005 | function t(n, o, a) { 1006 | i(this, t); 1007 | var l = r(this, e.call(this, n, o)), 1008 | s = a, 1009 | u = l; 1010 | if ( 1011 | ((l.__select = document.createElement("select")), 1012 | f.default.isArray(s)) 1013 | ) { 1014 | var c = {}; 1015 | f.default.each(s, function(e) { 1016 | c[e] = e; 1017 | }), 1018 | (s = c); 1019 | } 1020 | return ( 1021 | f.default.each(s, function(e, t) { 1022 | var n = document.createElement("option"); 1023 | (n.innerHTML = t), 1024 | n.setAttribute("value", e), 1025 | u.__select.appendChild(n); 1026 | }), 1027 | l.updateDisplay(), 1028 | d.default.bind(l.__select, "change", function() { 1029 | var e = this.options[this.selectedIndex].value; 1030 | u.setValue(e); 1031 | }), 1032 | l.domElement.appendChild(l.__select), 1033 | l 1034 | ); 1035 | } 1036 | return ( 1037 | a(t, e), 1038 | (t.prototype.setValue = function(t) { 1039 | var n = e.prototype.setValue.call(this, t); 1040 | return ( 1041 | this.__onFinishChange && 1042 | this.__onFinishChange.call(this, this.getValue()), 1043 | n 1044 | ); 1045 | }), 1046 | (t.prototype.updateDisplay = function() { 1047 | return d.default.isActive(this.__select) 1048 | ? this 1049 | : ((this.__select.value = this.getValue()), 1050 | e.prototype.updateDisplay.call(this)); 1051 | }), 1052 | t 1053 | ); 1054 | })(s.default); 1055 | (t.default = _), (e.exports = t.default); 1056 | }, 1057 | function(e, t, n) { 1058 | "use strict"; 1059 | function o(e) { 1060 | return e && e.__esModule ? e : { default: e }; 1061 | } 1062 | function i(e, t) { 1063 | if (!(e instanceof t)) 1064 | throw new TypeError("Cannot call a class as a function"); 1065 | } 1066 | function r(e, t) { 1067 | if (!e) 1068 | throw new ReferenceError( 1069 | "this hasn't been initialised - super() hasn't been called" 1070 | ); 1071 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 1072 | } 1073 | function a(e, t) { 1074 | if ("function" != typeof t && null !== t) 1075 | throw new TypeError( 1076 | "Super expression must either be null or a function, not " + 1077 | typeof t 1078 | ); 1079 | (e.prototype = Object.create(t && t.prototype, { 1080 | constructor: { 1081 | value: e, 1082 | enumerable: !1, 1083 | writable: !0, 1084 | configurable: !0, 1085 | }, 1086 | })), 1087 | t && 1088 | (Object.setPrototypeOf 1089 | ? Object.setPrototypeOf(e, t) 1090 | : (e.__proto__ = t)); 1091 | } 1092 | t.__esModule = !0; 1093 | var l = n(7), 1094 | s = o(l), 1095 | u = n(9), 1096 | d = o(u), 1097 | c = (function(e) { 1098 | function t(n, o) { 1099 | function a() { 1100 | u.setValue(u.__input.value); 1101 | } 1102 | function l() { 1103 | u.__onFinishChange && u.__onFinishChange.call(u, u.getValue()); 1104 | } 1105 | i(this, t); 1106 | var s = r(this, e.call(this, n, o)), 1107 | u = s; 1108 | return ( 1109 | (s.__input = document.createElement("input")), 1110 | s.__input.setAttribute("type", "text"), 1111 | d.default.bind(s.__input, "keyup", a), 1112 | d.default.bind(s.__input, "change", a), 1113 | d.default.bind(s.__input, "blur", l), 1114 | d.default.bind(s.__input, "keydown", function(e) { 1115 | 13 === e.keyCode && this.blur(); 1116 | }), 1117 | s.updateDisplay(), 1118 | s.domElement.appendChild(s.__input), 1119 | s 1120 | ); 1121 | } 1122 | return ( 1123 | a(t, e), 1124 | (t.prototype.updateDisplay = function() { 1125 | return ( 1126 | d.default.isActive(this.__input) || 1127 | (this.__input.value = this.getValue()), 1128 | e.prototype.updateDisplay.call(this) 1129 | ); 1130 | }), 1131 | t 1132 | ); 1133 | })(s.default); 1134 | (t.default = c), (e.exports = t.default); 1135 | }, 1136 | function(e, t, n) { 1137 | "use strict"; 1138 | function o(e) { 1139 | return e && e.__esModule ? e : { default: e }; 1140 | } 1141 | function i(e, t) { 1142 | if (!(e instanceof t)) 1143 | throw new TypeError("Cannot call a class as a function"); 1144 | } 1145 | function r(e, t) { 1146 | if (!e) 1147 | throw new ReferenceError( 1148 | "this hasn't been initialised - super() hasn't been called" 1149 | ); 1150 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 1151 | } 1152 | function a(e, t) { 1153 | if ("function" != typeof t && null !== t) 1154 | throw new TypeError( 1155 | "Super expression must either be null or a function, not " + 1156 | typeof t 1157 | ); 1158 | (e.prototype = Object.create(t && t.prototype, { 1159 | constructor: { 1160 | value: e, 1161 | enumerable: !1, 1162 | writable: !0, 1163 | configurable: !0, 1164 | }, 1165 | })), 1166 | t && 1167 | (Object.setPrototypeOf 1168 | ? Object.setPrototypeOf(e, t) 1169 | : (e.__proto__ = t)); 1170 | } 1171 | function l(e) { 1172 | var t = e.toString(); 1173 | return t.indexOf(".") > -1 ? t.length - t.indexOf(".") - 1 : 0; 1174 | } 1175 | t.__esModule = !0; 1176 | var s = n(7), 1177 | u = o(s), 1178 | d = n(5), 1179 | c = o(d), 1180 | f = (function(e) { 1181 | function t(n, o, a) { 1182 | i(this, t); 1183 | var s = r(this, e.call(this, n, o)), 1184 | u = a || {}; 1185 | return ( 1186 | (s.__min = u.min), 1187 | (s.__max = u.max), 1188 | (s.__step = u.step), 1189 | c.default.isUndefined(s.__step) 1190 | ? 0 === s.initialValue 1191 | ? (s.__impliedStep = 1) 1192 | : (s.__impliedStep = 1193 | Math.pow( 1194 | 10, 1195 | Math.floor( 1196 | Math.log(Math.abs(s.initialValue)) / Math.LN10 1197 | ) 1198 | ) / 10) 1199 | : (s.__impliedStep = s.__step), 1200 | (s.__precision = l(s.__impliedStep)), 1201 | s 1202 | ); 1203 | } 1204 | return ( 1205 | a(t, e), 1206 | (t.prototype.setValue = function(t) { 1207 | var n = t; 1208 | return ( 1209 | void 0 !== this.__min && n < this.__min 1210 | ? (n = this.__min) 1211 | : void 0 !== this.__max && n > this.__max && (n = this.__max), 1212 | void 0 !== this.__step && 1213 | n % this.__step !== 0 && 1214 | (n = Math.round(n / this.__step) * this.__step), 1215 | e.prototype.setValue.call(this, n) 1216 | ); 1217 | }), 1218 | (t.prototype.min = function(e) { 1219 | return (this.__min = e), this; 1220 | }), 1221 | (t.prototype.max = function(e) { 1222 | return (this.__max = e), this; 1223 | }), 1224 | (t.prototype.step = function(e) { 1225 | return ( 1226 | (this.__step = e), 1227 | (this.__impliedStep = e), 1228 | (this.__precision = l(e)), 1229 | this 1230 | ); 1231 | }), 1232 | t 1233 | ); 1234 | })(u.default); 1235 | (t.default = f), (e.exports = t.default); 1236 | }, 1237 | function(e, t, n) { 1238 | "use strict"; 1239 | function o(e) { 1240 | return e && e.__esModule ? e : { default: e }; 1241 | } 1242 | function i(e, t) { 1243 | if (!(e instanceof t)) 1244 | throw new TypeError("Cannot call a class as a function"); 1245 | } 1246 | function r(e, t) { 1247 | if (!e) 1248 | throw new ReferenceError( 1249 | "this hasn't been initialised - super() hasn't been called" 1250 | ); 1251 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 1252 | } 1253 | function a(e, t) { 1254 | if ("function" != typeof t && null !== t) 1255 | throw new TypeError( 1256 | "Super expression must either be null or a function, not " + 1257 | typeof t 1258 | ); 1259 | (e.prototype = Object.create(t && t.prototype, { 1260 | constructor: { 1261 | value: e, 1262 | enumerable: !1, 1263 | writable: !0, 1264 | configurable: !0, 1265 | }, 1266 | })), 1267 | t && 1268 | (Object.setPrototypeOf 1269 | ? Object.setPrototypeOf(e, t) 1270 | : (e.__proto__ = t)); 1271 | } 1272 | function l(e, t) { 1273 | var n = Math.pow(10, t); 1274 | return Math.round(e * n) / n; 1275 | } 1276 | t.__esModule = !0; 1277 | var s = n(12), 1278 | u = o(s), 1279 | d = n(9), 1280 | c = o(d), 1281 | f = n(5), 1282 | _ = o(f), 1283 | p = (function(e) { 1284 | function t(n, o, a) { 1285 | function l() { 1286 | var e = parseFloat(m.__input.value); 1287 | _.default.isNaN(e) || m.setValue(e); 1288 | } 1289 | function s() { 1290 | m.__onFinishChange && m.__onFinishChange.call(m, m.getValue()); 1291 | } 1292 | function u() { 1293 | s(); 1294 | } 1295 | function d(e) { 1296 | var t = b - e.clientY; 1297 | m.setValue(m.getValue() + t * m.__impliedStep), (b = e.clientY); 1298 | } 1299 | function f() { 1300 | c.default.unbind(window, "mousemove", d), 1301 | c.default.unbind(window, "mouseup", f), 1302 | s(); 1303 | } 1304 | function p(e) { 1305 | c.default.bind(window, "mousemove", d), 1306 | c.default.bind(window, "mouseup", f), 1307 | (b = e.clientY); 1308 | } 1309 | i(this, t); 1310 | var h = r(this, e.call(this, n, o, a)); 1311 | h.__truncationSuspended = !1; 1312 | var m = h, 1313 | b = void 0; 1314 | return ( 1315 | (h.__input = document.createElement("input")), 1316 | h.__input.setAttribute("type", "text"), 1317 | c.default.bind(h.__input, "change", l), 1318 | c.default.bind(h.__input, "blur", u), 1319 | c.default.bind(h.__input, "mousedown", p), 1320 | c.default.bind(h.__input, "keydown", function(e) { 1321 | 13 === e.keyCode && 1322 | ((m.__truncationSuspended = !0), 1323 | this.blur(), 1324 | (m.__truncationSuspended = !1), 1325 | s()); 1326 | }), 1327 | h.updateDisplay(), 1328 | h.domElement.appendChild(h.__input), 1329 | h 1330 | ); 1331 | } 1332 | return ( 1333 | a(t, e), 1334 | (t.prototype.updateDisplay = function() { 1335 | return ( 1336 | (this.__input.value = this.__truncationSuspended 1337 | ? this.getValue() 1338 | : l(this.getValue(), this.__precision)), 1339 | e.prototype.updateDisplay.call(this) 1340 | ); 1341 | }), 1342 | t 1343 | ); 1344 | })(u.default); 1345 | (t.default = p), (e.exports = t.default); 1346 | }, 1347 | function(e, t, n) { 1348 | "use strict"; 1349 | function o(e) { 1350 | return e && e.__esModule ? e : { default: e }; 1351 | } 1352 | function i(e, t) { 1353 | if (!(e instanceof t)) 1354 | throw new TypeError("Cannot call a class as a function"); 1355 | } 1356 | function r(e, t) { 1357 | if (!e) 1358 | throw new ReferenceError( 1359 | "this hasn't been initialised - super() hasn't been called" 1360 | ); 1361 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 1362 | } 1363 | function a(e, t) { 1364 | if ("function" != typeof t && null !== t) 1365 | throw new TypeError( 1366 | "Super expression must either be null or a function, not " + 1367 | typeof t 1368 | ); 1369 | (e.prototype = Object.create(t && t.prototype, { 1370 | constructor: { 1371 | value: e, 1372 | enumerable: !1, 1373 | writable: !0, 1374 | configurable: !0, 1375 | }, 1376 | })), 1377 | t && 1378 | (Object.setPrototypeOf 1379 | ? Object.setPrototypeOf(e, t) 1380 | : (e.__proto__ = t)); 1381 | } 1382 | function l(e, t, n, o, i) { 1383 | return o + (i - o) * ((e - t) / (n - t)); 1384 | } 1385 | t.__esModule = !0; 1386 | var s = n(12), 1387 | u = o(s), 1388 | d = n(9), 1389 | c = o(d), 1390 | f = (function(e) { 1391 | function t(n, o, a, s, u) { 1392 | function d(e) { 1393 | document.activeElement.blur(), 1394 | c.default.bind(window, "mousemove", f), 1395 | c.default.bind(window, "mouseup", _), 1396 | f(e); 1397 | } 1398 | function f(e) { 1399 | e.preventDefault(); 1400 | var t = h.__background.getBoundingClientRect(); 1401 | return ( 1402 | h.setValue(l(e.clientX, t.left, t.right, h.__min, h.__max)), !1 1403 | ); 1404 | } 1405 | function _() { 1406 | c.default.unbind(window, "mousemove", f), 1407 | c.default.unbind(window, "mouseup", _), 1408 | h.__onFinishChange && h.__onFinishChange.call(h, h.getValue()); 1409 | } 1410 | i(this, t); 1411 | var p = r(this, e.call(this, n, o, { min: a, max: s, step: u })), 1412 | h = p; 1413 | return ( 1414 | (p.__background = document.createElement("div")), 1415 | (p.__foreground = document.createElement("div")), 1416 | c.default.bind(p.__background, "mousedown", d), 1417 | c.default.addClass(p.__background, "slider"), 1418 | c.default.addClass(p.__foreground, "slider-fg"), 1419 | p.updateDisplay(), 1420 | p.__background.appendChild(p.__foreground), 1421 | p.domElement.appendChild(p.__background), 1422 | p 1423 | ); 1424 | } 1425 | return ( 1426 | a(t, e), 1427 | (t.prototype.updateDisplay = function() { 1428 | var t = 1429 | (this.getValue() - this.__min) / (this.__max - this.__min); 1430 | return ( 1431 | (this.__foreground.style.width = 100 * t + "%"), 1432 | e.prototype.updateDisplay.call(this) 1433 | ); 1434 | }), 1435 | t 1436 | ); 1437 | })(u.default); 1438 | (t.default = f), (e.exports = t.default); 1439 | }, 1440 | function(e, t, n) { 1441 | "use strict"; 1442 | function o(e) { 1443 | return e && e.__esModule ? e : { default: e }; 1444 | } 1445 | function i(e, t) { 1446 | if (!(e instanceof t)) 1447 | throw new TypeError("Cannot call a class as a function"); 1448 | } 1449 | function r(e, t) { 1450 | if (!e) 1451 | throw new ReferenceError( 1452 | "this hasn't been initialised - super() hasn't been called" 1453 | ); 1454 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 1455 | } 1456 | function a(e, t) { 1457 | if ("function" != typeof t && null !== t) 1458 | throw new TypeError( 1459 | "Super expression must either be null or a function, not " + 1460 | typeof t 1461 | ); 1462 | (e.prototype = Object.create(t && t.prototype, { 1463 | constructor: { 1464 | value: e, 1465 | enumerable: !1, 1466 | writable: !0, 1467 | configurable: !0, 1468 | }, 1469 | })), 1470 | t && 1471 | (Object.setPrototypeOf 1472 | ? Object.setPrototypeOf(e, t) 1473 | : (e.__proto__ = t)); 1474 | } 1475 | t.__esModule = !0; 1476 | var l = n(7), 1477 | s = o(l), 1478 | u = n(9), 1479 | d = o(u), 1480 | c = (function(e) { 1481 | function t(n, o, a) { 1482 | i(this, t); 1483 | var l = r(this, e.call(this, n, o)), 1484 | s = l; 1485 | return ( 1486 | (l.__button = document.createElement("div")), 1487 | (l.__button.innerHTML = void 0 === a ? "Fire" : a), 1488 | d.default.bind(l.__button, "click", function(e) { 1489 | return e.preventDefault(), s.fire(), !1; 1490 | }), 1491 | d.default.addClass(l.__button, "button"), 1492 | l.domElement.appendChild(l.__button), 1493 | l 1494 | ); 1495 | } 1496 | return ( 1497 | a(t, e), 1498 | (t.prototype.fire = function() { 1499 | this.__onChange && this.__onChange.call(this), 1500 | this.getValue().call(this.object), 1501 | this.__onFinishChange && 1502 | this.__onFinishChange.call(this, this.getValue()); 1503 | }), 1504 | t 1505 | ); 1506 | })(s.default); 1507 | (t.default = c), (e.exports = t.default); 1508 | }, 1509 | function(e, t, n) { 1510 | "use strict"; 1511 | function o(e) { 1512 | return e && e.__esModule ? e : { default: e }; 1513 | } 1514 | function i(e, t) { 1515 | if (!(e instanceof t)) 1516 | throw new TypeError("Cannot call a class as a function"); 1517 | } 1518 | function r(e, t) { 1519 | if (!e) 1520 | throw new ReferenceError( 1521 | "this hasn't been initialised - super() hasn't been called" 1522 | ); 1523 | return !t || ("object" != typeof t && "function" != typeof t) ? e : t; 1524 | } 1525 | function a(e, t) { 1526 | if ("function" != typeof t && null !== t) 1527 | throw new TypeError( 1528 | "Super expression must either be null or a function, not " + 1529 | typeof t 1530 | ); 1531 | (e.prototype = Object.create(t && t.prototype, { 1532 | constructor: { 1533 | value: e, 1534 | enumerable: !1, 1535 | writable: !0, 1536 | configurable: !0, 1537 | }, 1538 | })), 1539 | t && 1540 | (Object.setPrototypeOf 1541 | ? Object.setPrototypeOf(e, t) 1542 | : (e.__proto__ = t)); 1543 | } 1544 | function l(e, t, n, o) { 1545 | (e.style.background = ""), 1546 | g.default.each(y, function(i) { 1547 | e.style.cssText += 1548 | "background: " + 1549 | i + 1550 | "linear-gradient(" + 1551 | t + 1552 | ", " + 1553 | n + 1554 | " 0%, " + 1555 | o + 1556 | " 100%); "; 1557 | }); 1558 | } 1559 | function s(e) { 1560 | (e.style.background = ""), 1561 | (e.style.cssText += 1562 | "background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);"), 1563 | (e.style.cssText += 1564 | "background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"), 1565 | (e.style.cssText += 1566 | "background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"), 1567 | (e.style.cssText += 1568 | "background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"), 1569 | (e.style.cssText += 1570 | "background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"); 1571 | } 1572 | t.__esModule = !0; 1573 | var u = n(7), 1574 | d = o(u), 1575 | c = n(9), 1576 | f = o(c), 1577 | _ = n(2), 1578 | p = o(_), 1579 | h = n(3), 1580 | m = o(h), 1581 | b = n(5), 1582 | g = o(b), 1583 | v = (function(e) { 1584 | function t(n, o) { 1585 | function a(e) { 1586 | h(e), 1587 | f.default.bind(window, "mousemove", h), 1588 | f.default.bind(window, "mouseup", u); 1589 | } 1590 | function u() { 1591 | f.default.unbind(window, "mousemove", h), 1592 | f.default.unbind(window, "mouseup", u), 1593 | _(); 1594 | } 1595 | function d() { 1596 | var e = (0, m.default)(this.value); 1597 | e !== !1 1598 | ? ((y.__color.__state = e), y.setValue(y.__color.toOriginal())) 1599 | : (this.value = y.__color.toString()); 1600 | } 1601 | function c() { 1602 | f.default.unbind(window, "mousemove", b), 1603 | f.default.unbind(window, "mouseup", c), 1604 | _(); 1605 | } 1606 | function _() { 1607 | y.__onFinishChange && 1608 | y.__onFinishChange.call(y, y.__color.toOriginal()); 1609 | } 1610 | function h(e) { 1611 | e.preventDefault(); 1612 | var t = y.__saturation_field.getBoundingClientRect(), 1613 | n = (e.clientX - t.left) / (t.right - t.left), 1614 | o = 1 - (e.clientY - t.top) / (t.bottom - t.top); 1615 | return ( 1616 | o > 1 ? (o = 1) : o < 0 && (o = 0), 1617 | n > 1 ? (n = 1) : n < 0 && (n = 0), 1618 | (y.__color.v = o), 1619 | (y.__color.s = n), 1620 | y.setValue(y.__color.toOriginal()), 1621 | !1 1622 | ); 1623 | } 1624 | function b(e) { 1625 | e.preventDefault(); 1626 | var t = y.__hue_field.getBoundingClientRect(), 1627 | n = 1 - (e.clientY - t.top) / (t.bottom - t.top); 1628 | return ( 1629 | n > 1 ? (n = 1) : n < 0 && (n = 0), 1630 | (y.__color.h = 360 * n), 1631 | y.setValue(y.__color.toOriginal()), 1632 | !1 1633 | ); 1634 | } 1635 | i(this, t); 1636 | var v = r(this, e.call(this, n, o)); 1637 | (v.__color = new p.default(v.getValue())), 1638 | (v.__temp = new p.default(0)); 1639 | var y = v; 1640 | (v.domElement = document.createElement("div")), 1641 | f.default.makeSelectable(v.domElement, !1), 1642 | (v.__selector = document.createElement("div")), 1643 | (v.__selector.className = "selector"), 1644 | (v.__saturation_field = document.createElement("div")), 1645 | (v.__saturation_field.className = "saturation-field"), 1646 | (v.__field_knob = document.createElement("div")), 1647 | (v.__field_knob.className = "field-knob"), 1648 | (v.__field_knob_border = "2px solid "), 1649 | (v.__hue_knob = document.createElement("div")), 1650 | (v.__hue_knob.className = "hue-knob"), 1651 | (v.__hue_field = document.createElement("div")), 1652 | (v.__hue_field.className = "hue-field"), 1653 | (v.__input = document.createElement("input")), 1654 | (v.__input.type = "text"), 1655 | (v.__input_textShadow = "0 1px 1px "), 1656 | f.default.bind(v.__input, "keydown", function(e) { 1657 | 13 === e.keyCode && d.call(this); 1658 | }), 1659 | f.default.bind(v.__input, "blur", d), 1660 | f.default.bind(v.__selector, "mousedown", function() { 1661 | f.default 1662 | .addClass(this, "drag") 1663 | .bind(window, "mouseup", function() { 1664 | f.default.removeClass(y.__selector, "drag"); 1665 | }); 1666 | }); 1667 | var w = document.createElement("div"); 1668 | return ( 1669 | g.default.extend(v.__selector.style, { 1670 | width: "122px", 1671 | height: "102px", 1672 | padding: "3px", 1673 | backgroundColor: "#222", 1674 | boxShadow: "0px 1px 3px rgba(0,0,0,0.3)", 1675 | }), 1676 | g.default.extend(v.__field_knob.style, { 1677 | position: "absolute", 1678 | width: "12px", 1679 | height: "12px", 1680 | border: 1681 | v.__field_knob_border + (v.__color.v < 0.5 ? "#fff" : "#000"), 1682 | boxShadow: "0px 1px 3px rgba(0,0,0,0.5)", 1683 | borderRadius: "12px", 1684 | zIndex: 1, 1685 | }), 1686 | g.default.extend(v.__hue_knob.style, { 1687 | position: "absolute", 1688 | width: "15px", 1689 | height: "2px", 1690 | borderRight: "4px solid #fff", 1691 | zIndex: 1, 1692 | }), 1693 | g.default.extend(v.__saturation_field.style, { 1694 | width: "100px", 1695 | height: "100px", 1696 | border: "1px solid #555", 1697 | marginRight: "3px", 1698 | display: "inline-block", 1699 | cursor: "pointer", 1700 | }), 1701 | g.default.extend(w.style, { 1702 | width: "100%", 1703 | height: "100%", 1704 | background: "none", 1705 | }), 1706 | l(w, "top", "rgba(0,0,0,0)", "#000"), 1707 | g.default.extend(v.__hue_field.style, { 1708 | width: "15px", 1709 | height: "100px", 1710 | border: "1px solid #555", 1711 | cursor: "ns-resize", 1712 | position: "absolute", 1713 | top: "3px", 1714 | right: "3px", 1715 | }), 1716 | s(v.__hue_field), 1717 | g.default.extend(v.__input.style, { 1718 | outline: "none", 1719 | textAlign: "center", 1720 | color: "#fff", 1721 | border: 0, 1722 | fontWeight: "bold", 1723 | textShadow: v.__input_textShadow + "rgba(0,0,0,0.7)", 1724 | }), 1725 | f.default.bind(v.__saturation_field, "mousedown", a), 1726 | f.default.bind(v.__field_knob, "mousedown", a), 1727 | f.default.bind(v.__hue_field, "mousedown", function(e) { 1728 | b(e), 1729 | f.default.bind(window, "mousemove", b), 1730 | f.default.bind(window, "mouseup", c); 1731 | }), 1732 | v.__saturation_field.appendChild(w), 1733 | v.__selector.appendChild(v.__field_knob), 1734 | v.__selector.appendChild(v.__saturation_field), 1735 | v.__selector.appendChild(v.__hue_field), 1736 | v.__hue_field.appendChild(v.__hue_knob), 1737 | v.domElement.appendChild(v.__input), 1738 | v.domElement.appendChild(v.__selector), 1739 | v.updateDisplay(), 1740 | v 1741 | ); 1742 | } 1743 | return ( 1744 | a(t, e), 1745 | (t.prototype.updateDisplay = function() { 1746 | var e = (0, m.default)(this.getValue()); 1747 | if (e !== !1) { 1748 | var t = !1; 1749 | g.default.each( 1750 | p.default.COMPONENTS, 1751 | function(n) { 1752 | if ( 1753 | !g.default.isUndefined(e[n]) && 1754 | !g.default.isUndefined(this.__color.__state[n]) && 1755 | e[n] !== this.__color.__state[n] 1756 | ) 1757 | return (t = !0), {}; 1758 | }, 1759 | this 1760 | ), 1761 | t && g.default.extend(this.__color.__state, e); 1762 | } 1763 | g.default.extend(this.__temp.__state, this.__color.__state), 1764 | (this.__temp.a = 1); 1765 | var n = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0, 1766 | o = 255 - n; 1767 | g.default.extend(this.__field_knob.style, { 1768 | marginLeft: 100 * this.__color.s - 7 + "px", 1769 | marginTop: 100 * (1 - this.__color.v) - 7 + "px", 1770 | backgroundColor: this.__temp.toHexString(), 1771 | border: 1772 | this.__field_knob_border + 1773 | "rgb(" + 1774 | n + 1775 | "," + 1776 | n + 1777 | "," + 1778 | n + 1779 | ")", 1780 | }), 1781 | (this.__hue_knob.style.marginTop = 1782 | 100 * (1 - this.__color.h / 360) + "px"), 1783 | (this.__temp.s = 1), 1784 | (this.__temp.v = 1), 1785 | l( 1786 | this.__saturation_field, 1787 | "left", 1788 | "#fff", 1789 | this.__temp.toHexString() 1790 | ), 1791 | (this.__input.value = this.__color.toString()), 1792 | g.default.extend(this.__input.style, { 1793 | backgroundColor: this.__color.toHexString(), 1794 | color: "rgb(" + n + "," + n + "," + n + ")", 1795 | textShadow: 1796 | this.__input_textShadow + 1797 | "rgba(" + 1798 | o + 1799 | "," + 1800 | o + 1801 | "," + 1802 | o + 1803 | ",.7)", 1804 | }); 1805 | }), 1806 | t 1807 | ); 1808 | })(d.default), 1809 | y = ["-moz-", "-o-", "-webkit-", "-ms-", ""]; 1810 | (t.default = v), (e.exports = t.default); 1811 | }, 1812 | function(e, t, n) { 1813 | "use strict"; 1814 | function o(e) { 1815 | return e && e.__esModule ? e : { default: e }; 1816 | } 1817 | function i(e, t, n) { 1818 | var o = document.createElement("li"); 1819 | return ( 1820 | t && o.appendChild(t), 1821 | n ? e.__ul.insertBefore(o, n) : e.__ul.appendChild(o), 1822 | e.onResize(), 1823 | o 1824 | ); 1825 | } 1826 | function r(e, t) { 1827 | var n = e.__preset_select[e.__preset_select.selectedIndex]; 1828 | t ? (n.innerHTML = n.value + "*") : (n.innerHTML = n.value); 1829 | } 1830 | function a(e, t, n) { 1831 | if ( 1832 | ((n.__li = t), 1833 | (n.__gui = e), 1834 | U.default.extend(n, { 1835 | options: function(t) { 1836 | if (arguments.length > 1) { 1837 | var o = n.__li.nextElementSibling; 1838 | return ( 1839 | n.remove(), 1840 | s(e, n.object, n.property, { 1841 | before: o, 1842 | factoryArgs: [U.default.toArray(arguments)], 1843 | }) 1844 | ); 1845 | } 1846 | if (U.default.isArray(t) || U.default.isObject(t)) { 1847 | var i = n.__li.nextElementSibling; 1848 | return ( 1849 | n.remove(), 1850 | s(e, n.object, n.property, { before: i, factoryArgs: [t] }) 1851 | ); 1852 | } 1853 | }, 1854 | name: function(e) { 1855 | return ( 1856 | (n.__li.firstElementChild.firstElementChild.innerHTML = e), n 1857 | ); 1858 | }, 1859 | listen: function() { 1860 | return n.__gui.listen(n), n; 1861 | }, 1862 | remove: function() { 1863 | return n.__gui.remove(n), n; 1864 | }, 1865 | }), 1866 | n instanceof N.default) 1867 | ) { 1868 | var o = new B.default(n.object, n.property, { 1869 | min: n.__min, 1870 | max: n.__max, 1871 | step: n.__step, 1872 | }); 1873 | U.default.each( 1874 | ["updateDisplay", "onChange", "onFinishChange", "step"], 1875 | function(e) { 1876 | var t = n[e], 1877 | i = o[e]; 1878 | n[e] = o[e] = function() { 1879 | var e = Array.prototype.slice.call(arguments); 1880 | return i.apply(o, e), t.apply(n, e); 1881 | }; 1882 | } 1883 | ), 1884 | z.default.addClass(t, "has-slider"), 1885 | n.domElement.insertBefore( 1886 | o.domElement, 1887 | n.domElement.firstElementChild 1888 | ); 1889 | } else if (n instanceof B.default) { 1890 | var i = function(t) { 1891 | if (U.default.isNumber(n.__min) && U.default.isNumber(n.__max)) { 1892 | var o = n.__li.firstElementChild.firstElementChild.innerHTML, 1893 | i = n.__gui.__listening.indexOf(n) > -1; 1894 | n.remove(); 1895 | var r = s(e, n.object, n.property, { 1896 | before: n.__li.nextElementSibling, 1897 | factoryArgs: [n.__min, n.__max, n.__step], 1898 | }); 1899 | return r.name(o), i && r.listen(), r; 1900 | } 1901 | return t; 1902 | }; 1903 | (n.min = U.default.compose( 1904 | i, 1905 | n.min 1906 | )), 1907 | (n.max = U.default.compose( 1908 | i, 1909 | n.max 1910 | )); 1911 | } else 1912 | n instanceof O.default 1913 | ? (z.default.bind(t, "click", function() { 1914 | z.default.fakeEvent(n.__checkbox, "click"); 1915 | }), 1916 | z.default.bind(n.__checkbox, "click", function(e) { 1917 | e.stopPropagation(); 1918 | })) 1919 | : n instanceof R.default 1920 | ? (z.default.bind(t, "click", function() { 1921 | z.default.fakeEvent(n.__button, "click"); 1922 | }), 1923 | z.default.bind(t, "mouseover", function() { 1924 | z.default.addClass(n.__button, "hover"); 1925 | }), 1926 | z.default.bind(t, "mouseout", function() { 1927 | z.default.removeClass(n.__button, "hover"); 1928 | })) 1929 | : n instanceof j.default && 1930 | (z.default.addClass(t, "color"), 1931 | (n.updateDisplay = U.default.compose( 1932 | function(e) { 1933 | return (t.style.borderLeftColor = n.__color.toString()), e; 1934 | }, 1935 | n.updateDisplay 1936 | )), 1937 | n.updateDisplay()); 1938 | n.setValue = U.default.compose( 1939 | function(t) { 1940 | return ( 1941 | e.getRoot().__preset_select && 1942 | n.isModified() && 1943 | r(e.getRoot(), !0), 1944 | t 1945 | ); 1946 | }, 1947 | n.setValue 1948 | ); 1949 | } 1950 | function l(e, t) { 1951 | var n = e.getRoot(), 1952 | o = n.__rememberedObjects.indexOf(t.object); 1953 | if (o !== -1) { 1954 | var i = n.__rememberedObjectIndecesToControllers[o]; 1955 | if ( 1956 | (void 0 === i && 1957 | ((i = {}), (n.__rememberedObjectIndecesToControllers[o] = i)), 1958 | (i[t.property] = t), 1959 | n.load && n.load.remembered) 1960 | ) { 1961 | var r = n.load.remembered, 1962 | a = void 0; 1963 | if (r[e.preset]) a = r[e.preset]; 1964 | else { 1965 | if (!r[Q]) return; 1966 | a = r[Q]; 1967 | } 1968 | if (a[o] && void 0 !== a[o][t.property]) { 1969 | var l = a[o][t.property]; 1970 | (t.initialValue = l), t.setValue(l); 1971 | } 1972 | } 1973 | } 1974 | } 1975 | function s(e, t, n, o) { 1976 | if (void 0 === t[n]) 1977 | throw new Error('Object "' + t + '" has no property "' + n + '"'); 1978 | var r = void 0; 1979 | if (o.color) r = new j.default(t, n); 1980 | else { 1981 | var s = [t, n].concat(o.factoryArgs); 1982 | r = C.default.apply(e, s); 1983 | } 1984 | o.before instanceof S.default && (o.before = o.before.__li), 1985 | l(e, r), 1986 | z.default.addClass(r.domElement, "c"); 1987 | var u = document.createElement("span"); 1988 | z.default.addClass(u, "property-name"), (u.innerHTML = r.property); 1989 | var d = document.createElement("div"); 1990 | d.appendChild(u), d.appendChild(r.domElement); 1991 | var c = i(e, d, o.before); 1992 | return ( 1993 | z.default.addClass(c, oe.CLASS_CONTROLLER_ROW), 1994 | r instanceof j.default 1995 | ? z.default.addClass(c, "color") 1996 | : z.default.addClass(c, g(r.getValue())), 1997 | a(e, c, r), 1998 | e.__controllers.push(r), 1999 | r 2000 | ); 2001 | } 2002 | function u(e, t) { 2003 | return document.location.href + "." + t; 2004 | } 2005 | function d(e, t, n) { 2006 | var o = document.createElement("option"); 2007 | (o.innerHTML = t), 2008 | (o.value = t), 2009 | e.__preset_select.appendChild(o), 2010 | n && (e.__preset_select.selectedIndex = e.__preset_select.length - 1); 2011 | } 2012 | function c(e, t) { 2013 | t.style.display = e.useLocalStorage ? "block" : "none"; 2014 | } 2015 | function f(e) { 2016 | var t = (e.__save_row = document.createElement("li")); 2017 | z.default.addClass(e.domElement, "has-save"), 2018 | e.__ul.insertBefore(t, e.__ul.firstChild), 2019 | z.default.addClass(t, "save-row"); 2020 | var n = document.createElement("span"); 2021 | (n.innerHTML = " "), z.default.addClass(n, "button gears"); 2022 | var o = document.createElement("span"); 2023 | (o.innerHTML = "Save"), 2024 | z.default.addClass(o, "button"), 2025 | z.default.addClass(o, "save"); 2026 | var i = document.createElement("span"); 2027 | (i.innerHTML = "New"), 2028 | z.default.addClass(i, "button"), 2029 | z.default.addClass(i, "save-as"); 2030 | var r = document.createElement("span"); 2031 | (r.innerHTML = "Revert"), 2032 | z.default.addClass(r, "button"), 2033 | z.default.addClass(r, "revert"); 2034 | var a = (e.__preset_select = document.createElement("select")); 2035 | if ( 2036 | (e.load && e.load.remembered 2037 | ? U.default.each(e.load.remembered, function(t, n) { 2038 | d(e, n, n === e.preset); 2039 | }) 2040 | : d(e, Q, !1), 2041 | z.default.bind(a, "change", function() { 2042 | for (var t = 0; t < e.__preset_select.length; t++) 2043 | e.__preset_select[t].innerHTML = e.__preset_select[t].value; 2044 | e.preset = this.value; 2045 | }), 2046 | t.appendChild(a), 2047 | t.appendChild(n), 2048 | t.appendChild(o), 2049 | t.appendChild(i), 2050 | t.appendChild(r), 2051 | q) 2052 | ) { 2053 | var l = document.getElementById("dg-local-explain"), 2054 | s = document.getElementById("dg-local-storage"), 2055 | f = document.getElementById("dg-save-locally"); 2056 | (f.style.display = "block"), 2057 | "true" === localStorage.getItem(u(e, "isLocal")) && 2058 | s.setAttribute("checked", "checked"), 2059 | c(e, l), 2060 | z.default.bind(s, "change", function() { 2061 | (e.useLocalStorage = !e.useLocalStorage), c(e, l); 2062 | }); 2063 | } 2064 | var _ = document.getElementById("dg-new-constructor"); 2065 | z.default.bind(_, "keydown", function(e) { 2066 | !e.metaKey || (67 !== e.which && 67 !== e.keyCode) || Z.hide(); 2067 | }), 2068 | z.default.bind(n, "click", function() { 2069 | (_.innerHTML = JSON.stringify(e.getSaveObject(), void 0, 2)), 2070 | Z.show(), 2071 | _.focus(), 2072 | _.select(); 2073 | }), 2074 | z.default.bind(o, "click", function() { 2075 | e.save(); 2076 | }), 2077 | z.default.bind(i, "click", function() { 2078 | var t = prompt("Enter a new preset name."); 2079 | t && e.saveAs(t); 2080 | }), 2081 | z.default.bind(r, "click", function() { 2082 | e.revert(); 2083 | }); 2084 | } 2085 | function _(e) { 2086 | function t(t) { 2087 | return ( 2088 | t.preventDefault(), 2089 | (e.width += i - t.clientX), 2090 | e.onResize(), 2091 | (i = t.clientX), 2092 | !1 2093 | ); 2094 | } 2095 | function n() { 2096 | z.default.removeClass(e.__closeButton, oe.CLASS_DRAG), 2097 | z.default.unbind(window, "mousemove", t), 2098 | z.default.unbind(window, "mouseup", n); 2099 | } 2100 | function o(o) { 2101 | return ( 2102 | o.preventDefault(), 2103 | (i = o.clientX), 2104 | z.default.addClass(e.__closeButton, oe.CLASS_DRAG), 2105 | z.default.bind(window, "mousemove", t), 2106 | z.default.bind(window, "mouseup", n), 2107 | !1 2108 | ); 2109 | } 2110 | var i = void 0; 2111 | (e.__resize_handle = document.createElement("div")), 2112 | U.default.extend(e.__resize_handle.style, { 2113 | width: "6px", 2114 | marginLeft: "-3px", 2115 | height: "200px", 2116 | cursor: "ew-resize", 2117 | position: "absolute", 2118 | }), 2119 | z.default.bind(e.__resize_handle, "mousedown", o), 2120 | z.default.bind(e.__closeButton, "mousedown", o), 2121 | e.domElement.insertBefore( 2122 | e.__resize_handle, 2123 | e.domElement.firstElementChild 2124 | ); 2125 | } 2126 | function p(e, t) { 2127 | (e.domElement.style.width = t + "px"), 2128 | e.__save_row && e.autoPlace && (e.__save_row.style.width = t + "px"), 2129 | e.__closeButton && (e.__closeButton.style.width = t + "px"); 2130 | } 2131 | function h(e, t) { 2132 | var n = {}; 2133 | return ( 2134 | U.default.each(e.__rememberedObjects, function(o, i) { 2135 | var r = {}, 2136 | a = e.__rememberedObjectIndecesToControllers[i]; 2137 | U.default.each(a, function(e, n) { 2138 | r[n] = t ? e.initialValue : e.getValue(); 2139 | }), 2140 | (n[i] = r); 2141 | }), 2142 | n 2143 | ); 2144 | } 2145 | function m(e) { 2146 | for (var t = 0; t < e.__preset_select.length; t++) 2147 | e.__preset_select[t].value === e.preset && 2148 | (e.__preset_select.selectedIndex = t); 2149 | } 2150 | function b(e) { 2151 | 0 !== e.length && 2152 | D.default.call(window, function() { 2153 | b(e); 2154 | }), 2155 | U.default.each(e, function(e) { 2156 | e.updateDisplay(); 2157 | }); 2158 | } 2159 | t.__esModule = !0; 2160 | var g = 2161 | "function" == typeof Symbol && "symbol" == typeof Symbol.iterator 2162 | ? function(e) { 2163 | return typeof e; 2164 | } 2165 | : function(e) { 2166 | return e && 2167 | "function" == typeof Symbol && 2168 | e.constructor === Symbol && 2169 | e !== Symbol.prototype 2170 | ? "symbol" 2171 | : typeof e; 2172 | }, 2173 | v = n(18), 2174 | y = o(v), 2175 | w = n(19), 2176 | x = o(w), 2177 | E = n(20), 2178 | C = o(E), 2179 | A = n(7), 2180 | S = o(A), 2181 | k = n(8), 2182 | O = o(k), 2183 | T = n(15), 2184 | R = o(T), 2185 | L = n(13), 2186 | B = o(L), 2187 | M = n(14), 2188 | N = o(M), 2189 | H = n(16), 2190 | j = o(H), 2191 | P = n(21), 2192 | D = o(P), 2193 | V = n(22), 2194 | F = o(V), 2195 | I = n(9), 2196 | z = o(I), 2197 | G = n(5), 2198 | U = o(G), 2199 | X = n(23), 2200 | K = o(X); 2201 | y.default.inject(K.default); 2202 | var Y = "dg", 2203 | J = 72, 2204 | W = 20, 2205 | Q = "Default", 2206 | q = (function() { 2207 | try { 2208 | return "localStorage" in window && null !== window.localStorage; 2209 | } catch (e) { 2210 | return !1; 2211 | } 2212 | })(), 2213 | Z = void 0, 2214 | $ = !0, 2215 | ee = void 0, 2216 | te = !1, 2217 | ne = [], 2218 | oe = function e(t) { 2219 | function n() { 2220 | var e = o.getRoot(); 2221 | (e.width += 1), 2222 | U.default.defer(function() { 2223 | e.width -= 1; 2224 | }); 2225 | } 2226 | var o = this, 2227 | r = t || {}; 2228 | (this.domElement = document.createElement("div")), 2229 | (this.__ul = document.createElement("ul")), 2230 | this.domElement.appendChild(this.__ul), 2231 | z.default.addClass(this.domElement, Y), 2232 | (this.__folders = {}), 2233 | (this.__controllers = []), 2234 | (this.__rememberedObjects = []), 2235 | (this.__rememberedObjectIndecesToControllers = []), 2236 | (this.__listening = []), 2237 | (r = U.default.defaults(r, { 2238 | closeOnTop: !1, 2239 | autoPlace: !0, 2240 | width: e.DEFAULT_WIDTH, 2241 | })), 2242 | (r = U.default.defaults(r, { 2243 | resizable: r.autoPlace, 2244 | hideable: r.autoPlace, 2245 | })), 2246 | U.default.isUndefined(r.load) 2247 | ? (r.load = { preset: Q }) 2248 | : r.preset && (r.load.preset = r.preset), 2249 | U.default.isUndefined(r.parent) && r.hideable && ne.push(this), 2250 | (r.resizable = U.default.isUndefined(r.parent) && r.resizable), 2251 | r.autoPlace && 2252 | U.default.isUndefined(r.scrollable) && 2253 | (r.scrollable = !0); 2254 | var a = q && "true" === localStorage.getItem(u(this, "isLocal")), 2255 | l = void 0; 2256 | if ( 2257 | (Object.defineProperties(this, { 2258 | parent: { 2259 | get: function() { 2260 | return r.parent; 2261 | }, 2262 | }, 2263 | scrollable: { 2264 | get: function() { 2265 | return r.scrollable; 2266 | }, 2267 | }, 2268 | autoPlace: { 2269 | get: function() { 2270 | return r.autoPlace; 2271 | }, 2272 | }, 2273 | closeOnTop: { 2274 | get: function() { 2275 | return r.closeOnTop; 2276 | }, 2277 | }, 2278 | preset: { 2279 | get: function() { 2280 | return o.parent ? o.getRoot().preset : r.load.preset; 2281 | }, 2282 | set: function(e) { 2283 | o.parent ? (o.getRoot().preset = e) : (r.load.preset = e), 2284 | m(this), 2285 | o.revert(); 2286 | }, 2287 | }, 2288 | width: { 2289 | get: function() { 2290 | return r.width; 2291 | }, 2292 | set: function(e) { 2293 | (r.width = e), p(o, e); 2294 | }, 2295 | }, 2296 | name: { 2297 | get: function() { 2298 | return r.name; 2299 | }, 2300 | set: function(e) { 2301 | (r.name = e), 2302 | titleRowName && (titleRowName.innerHTML = r.name); 2303 | }, 2304 | }, 2305 | closed: { 2306 | get: function() { 2307 | return r.closed; 2308 | }, 2309 | set: function(t) { 2310 | (r.closed = t), 2311 | r.closed 2312 | ? z.default.addClass(o.__ul, e.CLASS_CLOSED) 2313 | : z.default.removeClass(o.__ul, e.CLASS_CLOSED), 2314 | this.onResize(), 2315 | o.__closeButton && 2316 | (o.__closeButton.innerHTML = t 2317 | ? e.TEXT_OPEN 2318 | : e.TEXT_CLOSED); 2319 | }, 2320 | }, 2321 | load: { 2322 | get: function() { 2323 | return r.load; 2324 | }, 2325 | }, 2326 | useLocalStorage: { 2327 | get: function() { 2328 | return a; 2329 | }, 2330 | set: function(e) { 2331 | q && 2332 | ((a = e), 2333 | e 2334 | ? z.default.bind(window, "unload", l) 2335 | : z.default.unbind(window, "unload", l), 2336 | localStorage.setItem(u(o, "isLocal"), e)); 2337 | }, 2338 | }, 2339 | }), 2340 | U.default.isUndefined(r.parent)) 2341 | ) { 2342 | if ( 2343 | ((r.closed = !1), 2344 | z.default.addClass(this.domElement, e.CLASS_MAIN), 2345 | z.default.makeSelectable(this.domElement, !1), 2346 | q && a) 2347 | ) { 2348 | o.useLocalStorage = !0; 2349 | var s = localStorage.getItem(u(this, "gui")); 2350 | s && (r.load = JSON.parse(s)); 2351 | } 2352 | (this.__closeButton = document.createElement("div")), 2353 | (this.__closeButton.innerHTML = e.TEXT_CLOSED), 2354 | z.default.addClass(this.__closeButton, e.CLASS_CLOSE_BUTTON), 2355 | r.closeOnTop 2356 | ? (z.default.addClass(this.__closeButton, e.CLASS_CLOSE_TOP), 2357 | this.domElement.insertBefore( 2358 | this.__closeButton, 2359 | this.domElement.childNodes[0] 2360 | )) 2361 | : (z.default.addClass(this.__closeButton, e.CLASS_CLOSE_BOTTOM), 2362 | this.domElement.appendChild(this.__closeButton)), 2363 | z.default.bind(this.__closeButton, "click", function() { 2364 | o.closed = !o.closed; 2365 | }); 2366 | } else { 2367 | void 0 === r.closed && (r.closed = !0); 2368 | var d = document.createTextNode(r.name); 2369 | z.default.addClass(d, "controller-name"); 2370 | var c = i(o, d), 2371 | f = function(e) { 2372 | return e.preventDefault(), (o.closed = !o.closed), !1; 2373 | }; 2374 | z.default.addClass(this.__ul, e.CLASS_CLOSED), 2375 | z.default.addClass(c, "title"), 2376 | z.default.bind(c, "click", f), 2377 | r.closed || (this.closed = !1); 2378 | } 2379 | r.autoPlace && 2380 | (U.default.isUndefined(r.parent) && 2381 | ($ && 2382 | ((ee = document.createElement("div")), 2383 | z.default.addClass(ee, Y), 2384 | z.default.addClass(ee, e.CLASS_AUTO_PLACE_CONTAINER), 2385 | document.body.appendChild(ee), 2386 | ($ = !1)), 2387 | ee.appendChild(this.domElement), 2388 | z.default.addClass(this.domElement, e.CLASS_AUTO_PLACE)), 2389 | this.parent || p(o, r.width)), 2390 | (this.__resizeHandler = function() { 2391 | o.onResizeDebounced(); 2392 | }), 2393 | z.default.bind(window, "resize", this.__resizeHandler), 2394 | z.default.bind( 2395 | this.__ul, 2396 | "webkitTransitionEnd", 2397 | this.__resizeHandler 2398 | ), 2399 | z.default.bind(this.__ul, "transitionend", this.__resizeHandler), 2400 | z.default.bind(this.__ul, "oTransitionEnd", this.__resizeHandler), 2401 | this.onResize(), 2402 | r.resizable && _(this), 2403 | (l = function() { 2404 | q && 2405 | "true" === localStorage.getItem(u(o, "isLocal")) && 2406 | localStorage.setItem( 2407 | u(o, "gui"), 2408 | JSON.stringify(o.getSaveObject()) 2409 | ); 2410 | }), 2411 | (this.saveToLocalStorageIfPossible = l), 2412 | r.parent || n(); 2413 | }; 2414 | (oe.toggleHide = function() { 2415 | (te = !te), 2416 | U.default.each(ne, function(e) { 2417 | e.domElement.style.display = te ? "none" : ""; 2418 | }); 2419 | }), 2420 | (oe.CLASS_AUTO_PLACE = "a"), 2421 | (oe.CLASS_AUTO_PLACE_CONTAINER = "ac"), 2422 | (oe.CLASS_MAIN = "main"), 2423 | (oe.CLASS_CONTROLLER_ROW = "cr"), 2424 | (oe.CLASS_TOO_TALL = "taller-than-window"), 2425 | (oe.CLASS_CLOSED = "closed"), 2426 | (oe.CLASS_CLOSE_BUTTON = "close-button"), 2427 | (oe.CLASS_CLOSE_TOP = "close-top"), 2428 | (oe.CLASS_CLOSE_BOTTOM = "close-bottom"), 2429 | (oe.CLASS_DRAG = "drag"), 2430 | (oe.DEFAULT_WIDTH = 245), 2431 | (oe.TEXT_CLOSED = "Close Controls"), 2432 | (oe.TEXT_OPEN = "Open Controls"), 2433 | (oe._keydownHandler = function(e) { 2434 | "text" === document.activeElement.type || 2435 | (e.which !== J && e.keyCode !== J) || 2436 | oe.toggleHide(); 2437 | }), 2438 | z.default.bind(window, "keydown", oe._keydownHandler, !1), 2439 | U.default.extend(oe.prototype, { 2440 | add: function(e, t) { 2441 | return s(this, e, t, { 2442 | factoryArgs: Array.prototype.slice.call(arguments, 2), 2443 | }); 2444 | }, 2445 | addColor: function(e, t) { 2446 | return s(this, e, t, { color: !0 }); 2447 | }, 2448 | remove: function(e) { 2449 | this.__ul.removeChild(e.__li), 2450 | this.__controllers.splice(this.__controllers.indexOf(e), 1); 2451 | var t = this; 2452 | U.default.defer(function() { 2453 | t.onResize(); 2454 | }); 2455 | }, 2456 | destroy: function() { 2457 | this.autoPlace && ee.removeChild(this.domElement), 2458 | z.default.unbind(window, "keydown", oe._keydownHandler, !1), 2459 | z.default.unbind(window, "resize", this.__resizeHandler), 2460 | this.saveToLocalStorageIfPossible && 2461 | z.default.unbind( 2462 | window, 2463 | "unload", 2464 | this.saveToLocalStorageIfPossible 2465 | ); 2466 | }, 2467 | addFolder: function(e) { 2468 | if (void 0 !== this.__folders[e]) 2469 | throw new Error( 2470 | 'You already have a folder in this GUI by the name "' + e + '"' 2471 | ); 2472 | var t = { name: e, parent: this }; 2473 | (t.autoPlace = this.autoPlace), 2474 | this.load && 2475 | this.load.folders && 2476 | this.load.folders[e] && 2477 | ((t.closed = this.load.folders[e].closed), 2478 | (t.load = this.load.folders[e])); 2479 | var n = new oe(t); 2480 | this.__folders[e] = n; 2481 | var o = i(this, n.domElement); 2482 | return z.default.addClass(o, "folder"), n; 2483 | }, 2484 | open: function() { 2485 | this.closed = !1; 2486 | }, 2487 | close: function() { 2488 | this.closed = !0; 2489 | }, 2490 | onResize: function() { 2491 | var e = this.getRoot(); 2492 | if (e.scrollable) { 2493 | var t = z.default.getOffset(e.__ul).top, 2494 | n = 0; 2495 | U.default.each(e.__ul.childNodes, function(t) { 2496 | (e.autoPlace && t === e.__save_row) || 2497 | (n += z.default.getHeight(t)); 2498 | }), 2499 | window.innerHeight - t - W < n 2500 | ? (z.default.addClass(e.domElement, oe.CLASS_TOO_TALL), 2501 | (e.__ul.style.height = window.innerHeight - t - W + "px")) 2502 | : (z.default.removeClass(e.domElement, oe.CLASS_TOO_TALL), 2503 | (e.__ul.style.height = "auto")); 2504 | } 2505 | e.__resize_handle && 2506 | U.default.defer(function() { 2507 | e.__resize_handle.style.height = e.__ul.offsetHeight + "px"; 2508 | }), 2509 | e.__closeButton && (e.__closeButton.style.width = e.width + "px"); 2510 | }, 2511 | onResizeDebounced: U.default.debounce(function() { 2512 | this.onResize(); 2513 | }, 50), 2514 | remember: function() { 2515 | if ( 2516 | (U.default.isUndefined(Z) && 2517 | ((Z = new F.default()), (Z.domElement.innerHTML = x.default)), 2518 | this.parent) 2519 | ) 2520 | throw new Error("You can only call remember on a top level GUI."); 2521 | var e = this; 2522 | U.default.each(Array.prototype.slice.call(arguments), function(t) { 2523 | 0 === e.__rememberedObjects.length && f(e), 2524 | e.__rememberedObjects.indexOf(t) === -1 && 2525 | e.__rememberedObjects.push(t); 2526 | }), 2527 | this.autoPlace && p(this, this.width); 2528 | }, 2529 | getRoot: function() { 2530 | for (var e = this; e.parent; ) e = e.parent; 2531 | return e; 2532 | }, 2533 | getSaveObject: function() { 2534 | var e = this.load; 2535 | return ( 2536 | (e.closed = this.closed), 2537 | this.__rememberedObjects.length > 0 && 2538 | ((e.preset = this.preset), 2539 | e.remembered || (e.remembered = {}), 2540 | (e.remembered[this.preset] = h(this))), 2541 | (e.folders = {}), 2542 | U.default.each(this.__folders, function(t, n) { 2543 | e.folders[n] = t.getSaveObject(); 2544 | }), 2545 | e 2546 | ); 2547 | }, 2548 | save: function() { 2549 | this.load.remembered || (this.load.remembered = {}), 2550 | (this.load.remembered[this.preset] = h(this)), 2551 | r(this, !1), 2552 | this.saveToLocalStorageIfPossible(); 2553 | }, 2554 | saveAs: function(e) { 2555 | this.load.remembered || 2556 | ((this.load.remembered = {}), 2557 | (this.load.remembered[Q] = h(this, !0))), 2558 | (this.load.remembered[e] = h(this)), 2559 | (this.preset = e), 2560 | d(this, e, !0), 2561 | this.saveToLocalStorageIfPossible(); 2562 | }, 2563 | revert: function(e) { 2564 | U.default.each( 2565 | this.__controllers, 2566 | function(t) { 2567 | this.getRoot().load.remembered 2568 | ? l(e || this.getRoot(), t) 2569 | : t.setValue(t.initialValue), 2570 | t.__onFinishChange && 2571 | t.__onFinishChange.call(t, t.getValue()); 2572 | }, 2573 | this 2574 | ), 2575 | U.default.each(this.__folders, function(e) { 2576 | e.revert(e); 2577 | }), 2578 | e || r(this.getRoot(), !1); 2579 | }, 2580 | listen: function(e) { 2581 | var t = 0 === this.__listening.length; 2582 | this.__listening.push(e), t && b(this.__listening); 2583 | }, 2584 | updateDisplay: function() { 2585 | U.default.each(this.__controllers, function(e) { 2586 | e.updateDisplay(); 2587 | }), 2588 | U.default.each(this.__folders, function(e) { 2589 | e.updateDisplay(); 2590 | }); 2591 | }, 2592 | }), 2593 | (t.default = oe), 2594 | (e.exports = t.default); 2595 | }, 2596 | function(e, t) { 2597 | "use strict"; 2598 | e.exports = { 2599 | load: function(e, t) { 2600 | var n = t || document, 2601 | o = n.createElement("link"); 2602 | (o.type = "text/css"), 2603 | (o.rel = "stylesheet"), 2604 | (o.href = e), 2605 | n.getElementsByTagName("head")[0].appendChild(o); 2606 | }, 2607 | inject: function(e, t) { 2608 | var n = t || document, 2609 | o = document.createElement("style"); 2610 | (o.type = "text/css"), (o.innerHTML = e); 2611 | var i = n.getElementsByTagName("head")[0]; 2612 | try { 2613 | i.appendChild(o); 2614 | } catch (e) {} 2615 | }, 2616 | }; 2617 | }, 2618 | function(e, t) { 2619 | e.exports = 2620 | "
Here's the new load parameter for your GUI's constructor:
Automatically save values to localStorage on exit.
The values saved to localStorage will override those passed to dat.GUI's constructor. This makes it easier to work incrementally, but localStorage is fragile, and your friends may not see the same values you do.
"; 2621 | }, 2622 | function(e, t, n) { 2623 | "use strict"; 2624 | function o(e) { 2625 | return e && e.__esModule ? e : { default: e }; 2626 | } 2627 | t.__esModule = !0; 2628 | var i = n(10), 2629 | r = o(i), 2630 | a = n(13), 2631 | l = o(a), 2632 | s = n(14), 2633 | u = o(s), 2634 | d = n(11), 2635 | c = o(d), 2636 | f = n(15), 2637 | _ = o(f), 2638 | p = n(8), 2639 | h = o(p), 2640 | m = n(5), 2641 | b = o(m), 2642 | g = function(e, t) { 2643 | var n = e[t]; 2644 | return b.default.isArray(arguments[2]) || 2645 | b.default.isObject(arguments[2]) 2646 | ? new r.default(e, t, arguments[2]) 2647 | : b.default.isNumber(n) 2648 | ? b.default.isNumber(arguments[2]) && 2649 | b.default.isNumber(arguments[3]) 2650 | ? b.default.isNumber(arguments[4]) 2651 | ? new u.default(e, t, arguments[2], arguments[3], arguments[4]) 2652 | : new u.default(e, t, arguments[2], arguments[3]) 2653 | : b.default.isNumber(arguments[4]) 2654 | ? new l.default(e, t, { 2655 | min: arguments[2], 2656 | max: arguments[3], 2657 | step: arguments[4], 2658 | }) 2659 | : new l.default(e, t, { 2660 | min: arguments[2], 2661 | max: arguments[3], 2662 | }) 2663 | : b.default.isString(n) 2664 | ? new c.default(e, t) 2665 | : b.default.isFunction(n) 2666 | ? new _.default(e, t, "") 2667 | : b.default.isBoolean(n) 2668 | ? new h.default(e, t) 2669 | : null; 2670 | }; 2671 | (t.default = g), (e.exports = t.default); 2672 | }, 2673 | function(e, t) { 2674 | "use strict"; 2675 | function n(e) { 2676 | setTimeout(e, 1e3 / 60); 2677 | } 2678 | (t.__esModule = !0), 2679 | (t.default = 2680 | window.requestAnimationFrame || 2681 | window.webkitRequestAnimationFrame || 2682 | window.mozRequestAnimationFrame || 2683 | window.oRequestAnimationFrame || 2684 | window.msRequestAnimationFrame || 2685 | n), 2686 | (e.exports = t.default); 2687 | }, 2688 | function(e, t, n) { 2689 | "use strict"; 2690 | function o(e) { 2691 | return e && e.__esModule ? e : { default: e }; 2692 | } 2693 | function i(e, t) { 2694 | if (!(e instanceof t)) 2695 | throw new TypeError("Cannot call a class as a function"); 2696 | } 2697 | t.__esModule = !0; 2698 | var r = n(9), 2699 | a = o(r), 2700 | l = n(5), 2701 | s = o(l), 2702 | u = (function() { 2703 | function e() { 2704 | i(this, e), 2705 | (this.backgroundElement = document.createElement("div")), 2706 | s.default.extend(this.backgroundElement.style, { 2707 | backgroundColor: "rgba(0,0,0,0.8)", 2708 | top: 0, 2709 | left: 0, 2710 | display: "none", 2711 | zIndex: "1000", 2712 | opacity: 0, 2713 | WebkitTransition: "opacity 0.2s linear", 2714 | transition: "opacity 0.2s linear", 2715 | }), 2716 | a.default.makeFullscreen(this.backgroundElement), 2717 | (this.backgroundElement.style.position = "fixed"), 2718 | (this.domElement = document.createElement("div")), 2719 | s.default.extend(this.domElement.style, { 2720 | position: "fixed", 2721 | display: "none", 2722 | zIndex: "1001", 2723 | opacity: 0, 2724 | WebkitTransition: 2725 | "-webkit-transform 0.2s ease-out, opacity 0.2s linear", 2726 | transition: "transform 0.2s ease-out, opacity 0.2s linear", 2727 | }), 2728 | document.body.appendChild(this.backgroundElement), 2729 | document.body.appendChild(this.domElement); 2730 | var t = this; 2731 | a.default.bind(this.backgroundElement, "click", function() { 2732 | t.hide(); 2733 | }); 2734 | } 2735 | return ( 2736 | (e.prototype.show = function() { 2737 | var e = this; 2738 | (this.backgroundElement.style.display = "block"), 2739 | (this.domElement.style.display = "block"), 2740 | (this.domElement.style.opacity = 0), 2741 | (this.domElement.style.webkitTransform = "scale(1.1)"), 2742 | this.layout(), 2743 | s.default.defer(function() { 2744 | (e.backgroundElement.style.opacity = 1), 2745 | (e.domElement.style.opacity = 1), 2746 | (e.domElement.style.webkitTransform = "scale(1)"); 2747 | }); 2748 | }), 2749 | (e.prototype.hide = function e() { 2750 | var t = this, 2751 | e = function e() { 2752 | (t.domElement.style.display = "none"), 2753 | (t.backgroundElement.style.display = "none"), 2754 | a.default.unbind(t.domElement, "webkitTransitionEnd", e), 2755 | a.default.unbind(t.domElement, "transitionend", e), 2756 | a.default.unbind(t.domElement, "oTransitionEnd", e); 2757 | }; 2758 | a.default.bind(this.domElement, "webkitTransitionEnd", e), 2759 | a.default.bind(this.domElement, "transitionend", e), 2760 | a.default.bind(this.domElement, "oTransitionEnd", e), 2761 | (this.backgroundElement.style.opacity = 0), 2762 | (this.domElement.style.opacity = 0), 2763 | (this.domElement.style.webkitTransform = "scale(1.1)"); 2764 | }), 2765 | (e.prototype.layout = function() { 2766 | (this.domElement.style.left = 2767 | window.innerWidth / 2 - 2768 | a.default.getWidth(this.domElement) / 2 + 2769 | "px"), 2770 | (this.domElement.style.top = 2771 | window.innerHeight / 2 - 2772 | a.default.getHeight(this.domElement) / 2 + 2773 | "px"); 2774 | }), 2775 | e 2776 | ); 2777 | })(); 2778 | (t.default = u), (e.exports = t.default); 2779 | }, 2780 | function(e, t, n) { 2781 | (t = e.exports = n(24)()), 2782 | t.push([ 2783 | e.id, 2784 | ".dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1!important}.dg.main .close-button.drag,.dg.main:hover .close-button{opacity:1}.dg.main .close-button{-webkit-transition:opacity .1s linear;transition:opacity .1s linear;border:0;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main .close-button.close-top{position:relative}.dg.main .close-button.close-bottom{position:absolute}.dg.main .close-button:hover{background-color:#111}.dg.a{float:right;margin-right:15px;overflow-y:visible}.dg.a.has-save>ul.close-top{margin-top:0}.dg.a.has-save>ul.close-bottom{margin-top:27px}.dg.a.has-save>ul.closed{margin-top:0}.dg.a .save-row{top:0;z-index:1002}.dg.a .save-row.close-top{position:relative}.dg.a .save-row.close-bottom{position:fixed}.dg li{-webkit-transition:height .1s ease-out;transition:height .1s ease-out;-webkit-transition:overflow .1s linear;transition:overflow .1s linear}.dg li:not(.folder){cursor:auto;height:27px;line-height:27px;padding:0 4px 0 5px}.dg li.folder{padding:0;border-left:4px solid transparent}.dg li.title{margin-left:-4px}.dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>*{height:0;overflow:hidden;border:0}.dg .cr{clear:both;padding-left:3px;height:27px;overflow:hidden}.dg .property-name{cursor:default;float:left;clear:left;width:40%;overflow:hidden;text-overflow:ellipsis}.dg .c{float:left;width:60%;position:relative}.dg .c input[type=text]{border:0;margin-top:4px;padding:3px;width:100%;float:right}.dg .has-slider input[type=text]{width:30%;margin-left:0}.dg .slider{float:left;width:66%;margin-left:-5px;margin-right:0;height:19px;margin-top:4px}.dg .slider-fg{height:100%}.dg .c input[type=checkbox]{margin-top:7px}.dg .c select{margin-top:5px}.dg .cr.boolean,.dg .cr.boolean *,.dg .cr.function,.dg .cr.function *,.dg .cr.function .property-name{cursor:pointer}.dg .cr.color{overflow:visible}.dg .selector{display:none;position:absolute;margin-left:-9px;margin-top:23px;z-index:10}.dg .c:hover .selector,.dg .selector.drag{display:block}.dg li.save-row{padding:0}.dg li.save-row .button{display:inline-block;padding:0 6px}.dg.dialogue{background-color:#222;width:460px;padding:15px;font-size:13px;line-height:15px}#dg-new-constructor{padding:10px;color:#222;font-family:Monaco,monospace;font-size:10px;border:0;resize:none;box-shadow:inset 1px 1px 1px #888;word-wrap:break-word;margin:12px 0;display:block;width:440px;overflow-y:scroll;height:100px;position:relative}#dg-local-explain{display:none;font-size:11px;line-height:17px;border-radius:3px;background-color:#333;padding:8px;margin-top:10px}#dg-local-explain code{font-size:10px}#dat-gui-save-locally{display:none}.dg{color:#eee;font:11px Lucida Grande,sans-serif;text-shadow:0 -1px 0 #111}.dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.dg.main::-webkit-scrollbar-corner{height:0;display:none}.dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.dg li:not(.folder){background:#1a1a1a;border-bottom:1px solid #2c2c2c}.dg li.save-row{line-height:25px;background:#dad5cb;border:0}.dg li.save-row select{margin-left:5px;width:108px}.dg li.save-row .button{margin-left:5px;margin-top:1px;border-radius:2px;font-size:9px;line-height:7px;padding:4px 4px 5px;background:#c5bdad;color:#fff;text-shadow:0 1px 0 #b0a58f;box-shadow:0 -1px 0 #b0a58f;cursor:pointer}.dg li.save-row .button.gears{background:#c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;height:7px;width:8px}.dg li.save-row .button:hover{background-color:#bab19e;box-shadow:0 -1px 0 #b0a58f}.dg li.folder{border-bottom:0}.dg li.title{padding-left:16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;cursor:pointer;border-bottom:1px solid hsla(0,0%,100%,.2)}.dg .closed li.title{background-image:url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)}.dg .cr.boolean{border-left:3px solid #806787}.dg .cr.color{border-left:3px solid}.dg .cr.function{border-left:3px solid #e61d5f}.dg .cr.number{border-left:3px solid #2fa1d6}.dg .cr.number input[type=text]{color:#2fa1d6}.dg .cr.string{border-left:3px solid #1ed36f}.dg .cr.string input[type=text]{color:#1ed36f}.dg .cr.boolean:hover,.dg .cr.function:hover{background:#111}.dg .c input[type=text]{background:#303030;outline:none}.dg .c input[type=text]:hover{background:#3c3c3c}.dg .c input[type=text]:focus{background:#494949;color:#fff}.dg .c .slider{background:#303030;cursor:ew-resize}.dg .c .slider-fg{background:#2fa1d6;max-width:100%}.dg .c .slider:hover{background:#3c3c3c}.dg .c .slider:hover .slider-fg{background:#44abda}", 2785 | "", 2786 | ]); 2787 | }, 2788 | function(e, t) { 2789 | e.exports = function() { 2790 | var e = []; 2791 | return ( 2792 | (e.toString = function() { 2793 | for (var e = [], t = 0; t < this.length; t++) { 2794 | var n = this[t]; 2795 | n[2] ? e.push("@media " + n[2] + "{" + n[1] + "}") : e.push(n[1]); 2796 | } 2797 | return e.join(""); 2798 | }), 2799 | (e.i = function(t, n) { 2800 | "string" == typeof t && (t = [[null, t, ""]]); 2801 | for (var o = {}, i = 0; i < this.length; i++) { 2802 | var r = this[i][0]; 2803 | "number" == typeof r && (o[r] = !0); 2804 | } 2805 | for (i = 0; i < t.length; i++) { 2806 | var a = t[i]; 2807 | ("number" == typeof a[0] && o[a[0]]) || 2808 | (n && !a[2] 2809 | ? (a[2] = n) 2810 | : n && (a[2] = "(" + a[2] + ") and (" + n + ")"), 2811 | e.push(a)); 2812 | } 2813 | }), 2814 | e 2815 | ); 2816 | }; 2817 | }, 2818 | ]); 2819 | }); 2820 | -------------------------------------------------------------------------------- /src/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= APP_NAME %> 7 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/textures/camo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/camo.jpg -------------------------------------------------------------------------------- /src/textures/canvas_normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/canvas_normal.jpg -------------------------------------------------------------------------------- /src/textures/checkerboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/checkerboard.jpg -------------------------------------------------------------------------------- /src/textures/fabric_normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/fabric_normal.jpg -------------------------------------------------------------------------------- /src/textures/ghost.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/ghost.jpg -------------------------------------------------------------------------------- /src/textures/hover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/hover.jpg -------------------------------------------------------------------------------- /src/textures/hype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/hype.png -------------------------------------------------------------------------------- /src/textures/leather_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seldebrings/threejs-glft-model-texture-customizer/60bb4e43da509ca9166d628fa0da113ee9c54476/src/textures/leather_normal.png -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const webpack = require("webpack"); 3 | 4 | const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") 5 | .BundleAnalyzerPlugin; 6 | const CleanWebpackPlugin = require("clean-webpack-plugin"); 7 | const CompressionPlugin = require("compression-webpack-plugin"); 8 | const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin"); 9 | const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); 10 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 11 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 12 | const PacktrackerPlugin = require("@packtracker/webpack-plugin"); 13 | 14 | const APP_NAME = "Three.js ES6 Webpack 4 Project Starter"; 15 | 16 | const rules = [ 17 | { 18 | test: /\.(js|jsx)$/, 19 | include: [path.join(__dirname, "src", "js")], 20 | exclude: [ 21 | path.join(__dirname, "node_modules"), 22 | path.join(__dirname, "src", "gltf"), 23 | ], 24 | use: { 25 | loader: "babel-loader", 26 | }, 27 | }, 28 | { 29 | test: /\.(css)$/, 30 | include: [path.join(__dirname, "src", "css")], 31 | use: [ 32 | MiniCssExtractPlugin.loader, 33 | { 34 | loader: "css-loader", 35 | options: { 36 | modules: false, // avoid using CSS modules 37 | sourceMap: true, 38 | }, 39 | }, 40 | ], 41 | }, 42 | // GLTF configuration: add this to rules 43 | { 44 | // match all .gltf files 45 | test: /\.(gltf)$/, 46 | loader: "gltf-loader-2", 47 | }, 48 | { 49 | // here I match only IMAGE and BIN files under the gltf folder 50 | test: /gltf.*\.(bin|png|jpe?g|gif)$/, 51 | // or use url-loader if you would like to embed images in the source gltf 52 | loader: "file-loader", 53 | options: { 54 | // output folder for bin and image files, configure as needed 55 | name: "gltf/[name].[hash:7].[ext]", 56 | }, 57 | }, 58 | // rule for shaders 59 | { 60 | test: /\.glsl$/, 61 | use: [ 62 | { 63 | loader: "webpack-glsl-loader", 64 | }, 65 | ], 66 | }, 67 | // rule for .ttf font files 68 | { 69 | test: /\.(ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 70 | use: { 71 | loader: "file-loader", 72 | options: { 73 | name: "./fonts/[name].[ext]", 74 | }, 75 | }, 76 | }, 77 | // rule for textures (images) 78 | { 79 | test: /\.(jpe?g|png)$/i, 80 | include: path.join(__dirname, "src", "textures"), 81 | loaders: [ 82 | "file-loader", 83 | { 84 | loader: "image-webpack-loader", 85 | query: { 86 | gifsicle: { 87 | interlaced: false, 88 | }, 89 | mozjpeg: { 90 | progressive: true, 91 | quality: 65, 92 | }, 93 | pngquant: { 94 | quality: "65-90", 95 | speed: 4, 96 | }, 97 | }, 98 | }, 99 | ], 100 | }, 101 | ]; 102 | 103 | const optimization = { 104 | splitChunks: { 105 | cacheGroups: { 106 | js: { 107 | test: /\.js$/, 108 | name: "commons", 109 | chunks: "all", 110 | minChunks: 7, 111 | }, 112 | css: { 113 | test: /\.(css)$/, 114 | name: "commons", 115 | chunks: "all", 116 | minChunks: 2, 117 | }, 118 | }, 119 | }, 120 | }; 121 | 122 | const devServer = { 123 | compress: true, 124 | contentBase: path.join(__dirname, "build"), 125 | host: "localhost", 126 | inline: true, 127 | port: 8080, 128 | stats: { 129 | chunks: false, 130 | colors: true, 131 | modules: false, 132 | reasons: true, 133 | }, 134 | }; 135 | 136 | module.exports = (env, argv) => { 137 | console.log(`Prepare ${argv.mode.toUpperCase()} build`); 138 | const isProduction = argv.mode === "production"; 139 | const PUBLIC_URL = isProduction 140 | ? "https://jackdbd.github.io/threejs-es6-webpack-starter" 141 | : ""; 142 | 143 | const plugins = [ 144 | new BundleAnalyzerPlugin({ 145 | analyzerMode: "disabled", 146 | generateStatsFile: true, 147 | }), 148 | new CleanWebpackPlugin({ 149 | cleanStaleWebpackAssets: true, 150 | verbose: true, 151 | }), 152 | new webpack.DefinePlugin({ 153 | APP_NAME: JSON.stringify(APP_NAME), 154 | }), 155 | new DuplicatePackageCheckerPlugin({ 156 | emitError: false, 157 | showHelp: true, 158 | strict: false, 159 | verbose: true, 160 | }), 161 | new HtmlWebpackPlugin({ 162 | chunks: ["homePage"], 163 | filename: "index.html", 164 | hash: true, 165 | template: path.join(__dirname, "src", "templates", "index.html"), 166 | templateParameters: { 167 | APP_NAME, 168 | PUBLIC_URL, 169 | }, 170 | }), 171 | new MiniCssExtractPlugin({ 172 | filename: "[hash].css", 173 | chunkFilename: "[id].bundle.css", 174 | }), 175 | new PacktrackerPlugin({ 176 | branch: process.env.TRAVIS_BRANCH, // https://docs.packtracker.io/faq#why-cant-the-plugin-determine-my-branch-name 177 | fail_build: true, 178 | project_token: "2464bed1-d810-4af6-a615-877420f902b2", 179 | upload: process.env.CI === "true", // upload stats.json only in CI 180 | }), 181 | ]; 182 | 183 | if (isProduction) { 184 | plugins.push( 185 | new CompressionPlugin({ 186 | algorithm: "gzip", 187 | test: /\.(js|html)$/, 188 | threshold: 10240, 189 | minRatio: 0.8, 190 | }) 191 | ); 192 | } else { 193 | plugins.push(new webpack.HotModuleReplacementPlugin()); 194 | } 195 | 196 | const config = { 197 | context: __dirname, 198 | devServer, 199 | devtool: isProduction ? "source-map" : "cheap-source-map", 200 | entry: { 201 | homePage: "./src/js/index.js", 202 | }, 203 | module: { 204 | rules, 205 | }, 206 | optimization, 207 | output: { 208 | filename: "[name].[hash].js", 209 | path: path.join(__dirname, "build"), 210 | }, 211 | plugins, 212 | performance: { 213 | assetFilter: assetFilename => { 214 | // Silence warnings for big source maps (default) and font files. 215 | // To reduce .ttf file size, check the link below. 216 | // https://www.cnx-software.com/2010/02/19/reducing-truetype-font-file-size-for-embedded-systems/ 217 | return !/\.map$/.test(assetFilename) && !assetFilename.endsWith(".ttf"); 218 | }, 219 | hints: "warning", 220 | }, 221 | resolve: { 222 | alias: { 223 | // orbit-controls-es6 declares a version of three different from the one 224 | // used by this application. This would cause three to be duplicated in 225 | // the bundle. One way to avoid this issue is to use resolve.alias. 226 | // With resolve.alias we are telling Webpack to route any package 227 | // references to a single specified path. 228 | // Note: Aliasing packages with different major versions may break your 229 | // app. Use only if you're sure that all required versions are 230 | // compatible, at least in the context of your app 231 | // https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin#resolving-duplicate-packages-in-your-bundle 232 | three: path.resolve(__dirname, "node_modules/three"), 233 | }, 234 | }, 235 | target: "web", 236 | }; 237 | return config; 238 | }; 239 | --------------------------------------------------------------------------------