",
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/jsantell/three-devtools/issues"
23 | },
24 | "homepage": "https://github.com/jsantell/three-devtools#readme",
25 | "dependencies": {
26 | "@egjs/agent": "2.1.5",
27 | "lit-element": "2.2.1",
28 | "lit-html": "1.1.2",
29 | "three": "0.137.0",
30 | "webextension-polyfill": "0.4.0"
31 | },
32 | "devDependencies": {
33 | "http-server": "^14.1.1",
34 | "json": "10.0.0"
35 | },
36 | "@pika/web": {
37 | "webDependencies": [
38 | "webextension-polyfill/dist/browser-polyfill.js",
39 | "lit-element",
40 | "lit-html/directives/if-defined.js",
41 | "@egjs/agent",
42 | "three",
43 | "three/src/constants.js",
44 | "three/examples/jsm/loaders/GLTFLoader.js",
45 | "three/examples/jsm/geometries/TeapotBufferGeometry.js"
46 | ]
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/scripts/build-deps.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | npm install
4 | npx @pika/web --dest web_modules/
5 | ./scripts/genlicenses.sh
6 |
7 | # Copy over the non-module form of three.js for injection
8 | # in the content. This beautiful hack fakes a CommonJS
9 | # environment so that:
10 | # 1) No global scope pollution or clobbering content's version of three.js
11 | # 2) Can be stringified and lazily injected along with the other content
12 | # side objects (src/content/). Need access to the full context in order
13 | # for Function.prototype.toString to work.
14 | # 3) Content-side devtools code can use its own private instance of three.js
15 | # to do things like injecting a bounding box visual.
16 | echo 'export default () => {' > src/content/three.js
17 | echo ' var exports = {};' >> src/content/three.js
18 | echo ' var module = { exports };' >> src/content/three.js
19 | cat node_modules/three/build/three.min.js >> src/content/three.js
20 | echo ' return exports;' >> src/content/three.js
21 | echo '};' >> src/content/three.js
22 |
23 | # Replace all instances of __THREE_DEVTOOLS__ in
24 | # the internal three.js so we're not recursively
25 | # complicating things, for example, we get a 'registration'
26 | # event from the internal version and can't determine
27 | # whether its the internal version, or a content version
28 | # that should be debugged.
29 | sed -i -e 's/__THREE_DEVTOOLS__/__INTERNAL_THREE_DEVTOOLS__/g' src/content/three.js
30 |
31 | # Copy over the non-modified version of TransformControls
32 | echo 'export default (THREE) => {' > src/content/TransformControls.js
33 | cat node_modules/three/examples/js/controls/TransformControls.js >> src/content/TransformControls.js
34 | echo '};' >> src/content/TransformControls.js
35 |
--------------------------------------------------------------------------------
/scripts/build-dist.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | rm -rf three-devtools
4 | mkdir three-devtools
5 |
6 | cp -r src three-devtools
7 | cp -r web_modules three-devtools
8 | cp -r assets three-devtools
9 | cp package.json three-devtools
10 | cp manifest.json three-devtools
11 | cp README.md three-devtools
12 | cp LICENSE three-devtools
13 |
14 | if [ ! -z "$1" ] && [ $1 == 'chrome' ] ;
15 | then
16 | echo "Building Chrome variation."
17 | cat manifest.json | \
18 | json -e 'delete this.browser_specific_settings' > \
19 | three-devtools/manifest.json
20 | fi
21 |
22 | npx web-ext build \
23 | --source-dir three-devtools \
24 | --artifacts-dir dist \
25 | --overwrite-dest
26 |
27 | rm -r three-devtools
28 |
--------------------------------------------------------------------------------
/scripts/build-source.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Zips up the necessary files and docs, sans dependencies from
4 | # npm, to build the add-on, necessary for AMO's reviewal of code
5 | # since @pika/web transforms the source code.
6 |
7 | zip -r dist/three-devtools-source.zip \
8 | assets examples src scripts web_modules \
9 | manifest.json package.json package-lock.json \
10 | LICENSE DEVELOPMENT.md README.md
11 |
--------------------------------------------------------------------------------
/scripts/genlicenses.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | mkdir -p web_modules/licenses
4 | cp node_modules/@egjs/agent/LICENSE web_modules/licenses/agent_LICENSE
5 | cp node_modules/three/LICENSE web_modules/licenses/three_LICENSE
6 | cp node_modules/lit-html/LICENSE web_modules/licenses/lit-html_LICENSE
7 | cp node_modules/lit-element/LICENSE web_modules/licenses/lit-element_LICENSE
8 |
--------------------------------------------------------------------------------
/scripts/version.js:
--------------------------------------------------------------------------------
1 | #!/bin/node
2 |
3 | // Called after the version as been incremented
4 | // via `npm version [major | minor | patch]`
5 | // https://docs.npmjs.com/cli/version
6 | const fs = require('fs');
7 | const path = require('path');
8 | const packageJSON = require('../package.json');
9 | const version = packageJSON.version;
10 | const manifestJSON = require('../manifest.json');
11 |
12 | manifestJSON.version = version;
13 |
14 | const manifestJSONPath = path.join(__dirname, '..', 'manifest.json');
15 | const manifestString = JSON.stringify(manifestJSON, null, 2);
16 | console.log(`Updating manifest.json with version ${version}`);
17 | fs.writeFileSync(manifestJSONPath, manifestString);
18 |
--------------------------------------------------------------------------------
/src/app/ContentBridge.js:
--------------------------------------------------------------------------------
1 | import injection from './injection.js';
2 | import { isUUID } from './utils.js';
3 | const $db = Symbol('db');
4 | const $sceneGraphs = Symbol('sceneGraphs');
5 | const $overviews = Symbol('overviews');
6 | const $update = Symbol('update');
7 | const $onMessage = Symbol('onMessage');
8 | const $log = Symbol('log');
9 | const $eval = Symbol('eval');
10 | const $dispatchToContent = Symbol('dispatchToContent');
11 | const $renderers = Symbol('renderers');
12 | const $renderingInfo = Symbol('renderingInfo');
13 |
14 | const VERBOSE_CONTENT_BRIDGE = false;
15 |
16 | export default class ContentBridge extends EventTarget {
17 | /**
18 | * Events:
19 | * 'load'
20 | * 'entity-update' { entity, uuid }
21 | * 'scene-graph-update' { uuid, graph }
22 | * 'overview-update' { type, entities }
23 | * 'rendering-info-update' {}
24 | * 'renderer-update' { renderer, id }
25 | */
26 | constructor() {
27 | super();
28 |
29 | this[$db] = new Map();
30 | this[$overviews] = new Map();
31 | this[$sceneGraphs] = new Map();
32 | this[$renderers] = new Map();
33 | this[$renderingInfo] = new Map();
34 |
35 | this.port = browser.runtime.connect({
36 | name: 'three-devtools',
37 | });
38 |
39 | // Notify background port that the tools panel is open
40 | this.port.postMessage({
41 | name: 'connect',
42 | tabId: browser.devtools.inspectedWindow.tabId,
43 | });
44 |
45 | this.port.onDisconnect.addListener(request => {
46 | console.error('disconnected from background', request);
47 | });
48 |
49 | this.port.onMessage.addListener(e => this[$onMessage](e));
50 |
51 | document.addEventListener('keydown', e => {
52 | let mode, space;
53 | switch (e.key) {
54 | case 'q': space = true; break;
55 | case 'w': mode = 'translate'; break;
56 | case 'e': mode = 'rotate'; break;
57 | case 'r': mode = 'scale'; break;
58 | }
59 |
60 | if (mode || space) {
61 | this[$dispatchToContent]('_transform-controls-update', { mode, space });
62 | }
63 | }, { passive: true })
64 | }
65 |
66 | reload() {
67 | browser.devtools.inspectedWindow.reload();
68 | }
69 |
70 | getEntity(uuid) {
71 | return /renderer/.test(uuid) ? this[$renderers].get(uuid) : this[$db].get(uuid);
72 | }
73 |
74 | getEntityAndDependencies(rootUUID) {
75 | const data = {};
76 | const uuids = [rootUUID];
77 | while (uuids.length) {
78 | const uuid = uuids.shift();
79 | const entity = this.getEntity(uuid);
80 | // In renderers case, uuid is an id.
81 | // @TODO should probably abstract away the differences
82 | // between UUID and synthesized renderer ids.
83 | if (entity && !data[uuid]) {
84 | data[uuid] = entity;
85 |
86 | // entities can have several dependencies, like textures on materials,
87 | // or a Mesh's geometry
88 | for (let value of Object.values(entity)) {
89 | if (isUUID(value)) {
90 | uuids.push(value);
91 | }
92 | }
93 | }
94 | }
95 |
96 | return data;
97 | }
98 |
99 | getRenderingInfo(uuid) {
100 | return this[$renderingInfo].get(uuid);
101 | }
102 |
103 | getResourcesOverview(type) {
104 | return this[$overviews].get(type);
105 | }
106 |
107 | getSceneGraph(uuid) {
108 | return this[$sceneGraphs].get(uuid);
109 | }
110 |
111 | updateProperty(uuid, property, value, dataType) {
112 | const object = this.getEntity(uuid);
113 | this[$dispatchToContent]('entity-update', {
114 | uuid,
115 | property,
116 | value,
117 | dataType,
118 | });
119 |
120 | // Updating property won't trigger a data flush, instead update
121 | // the local state so that elements' values are in sync with their
122 | // HTML input state, important when switching between different items
123 | // with LitElement.
124 |
125 | object[property] = value;
126 | this[$update](object);
127 | }
128 |
129 | /**
130 | * Request latest data from content for the object
131 | * with UUID.
132 | */
133 | requestEntity(uuid) {
134 | this[$dispatchToContent]('_request-entity', { uuid });
135 | }
136 |
137 | requestOverview(type) {
138 | this[$dispatchToContent]('_request-overview', { type });
139 | }
140 |
141 | requestSceneGraph(uuid) {
142 | this[$dispatchToContent]('_request-scene-graph', { uuid });
143 | }
144 |
145 | requestRenderingInfo(uuid) {
146 | this[$dispatchToContent]('_request-rendering-info', { uuid });
147 | }
148 |
149 | select(uuid) {
150 | if (!uuid) {
151 | return;
152 | }
153 | this[$dispatchToContent]('select', { uuid });
154 | }
155 |
156 | [$onMessage](request) {
157 | const { id, type, data } = request;
158 |
159 | this[$log]('>>', type, data);
160 | switch (type) {
161 | case 'error':
162 | this.dispatchEvent(new CustomEvent('error', {
163 | detail: data,
164 | }));
165 | break;
166 | case 'register':
167 | this.revision = data.revision;
168 | this[$eval](`console.log("three-devtools: debugging three.js r${this.revision}")`);
169 | break;
170 | case 'committed':
171 | this[$db].clear();
172 | this[$overviews].clear();
173 | this[$sceneGraphs].clear();
174 | this[$renderers].clear();
175 | this[$renderingInfo].clear();
176 |
177 | this[$eval](injection);
178 | this.dispatchEvent(new CustomEvent('load'));
179 | break;
180 | case 'observe':
181 | this.dispatchEvent(new CustomEvent('observe', {
182 | detail: {
183 | uuids: data.uuids,
184 | },
185 | }));
186 | break;
187 | case 'scene-graph':
188 | this[$sceneGraphs].set(data.uuid, data.graph);
189 | this.dispatchEvent(new CustomEvent('scene-graph-update', {
190 | detail: {
191 | uuid: data.uuid,
192 | graph: data.graph,
193 | },
194 | }));
195 | break;
196 | case 'overview':
197 | this[$overviews].set(data.type, data.entities);
198 | this.dispatchEvent(new CustomEvent('overview-update', {
199 | detail: {
200 | type: data.type,
201 | entities: data.entities,
202 | },
203 | }));
204 | break;
205 | case 'rendering-info':
206 | this.dispatchEvent(new CustomEvent('rendering-info-update', {
207 | detail: data,
208 | }));
209 | this[$renderingInfo].set(data.uuid, data);
210 | break;
211 | case 'entity':
212 | if (data.type === 'renderer') {
213 | this[$renderers].set(data.uuid, data);
214 | this.dispatchEvent(new CustomEvent('renderer-update', {
215 | detail: {
216 | renderer: data,
217 | uuid: data.uuid,
218 | },
219 | }));
220 | } else if (Array.isArray(data)) {
221 | for (let entity of data) {
222 | this[$update](entity);
223 | }
224 | }
225 | break;
226 | }
227 | }
228 |
229 | [$update](entity) {
230 | this[$db].set(entity.uuid, entity);
231 | this.dispatchEvent(new CustomEvent('entity-update', {
232 | detail: {
233 | entity,
234 | uuid: entity.uuid,
235 | },
236 | }));
237 | }
238 |
239 | [$dispatchToContent](type, detail) {
240 | this[$eval](`
241 | __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('${type}', {
242 | detail: ${JSON.stringify(detail)},
243 | }));`
244 | );
245 | }
246 |
247 | _contentLog(string) {
248 | this[$eval](`console.log("${string}")`);
249 | }
250 |
251 | async [$eval](string) {
252 | this[$log]('EVAL', string);
253 | const [result, error] = await browser.devtools.inspectedWindow.eval(string);
254 | if (error) {
255 | console.warn(error);
256 | }
257 | return result;
258 | }
259 |
260 | [$log](...message) {
261 | if (VERBOSE_CONTENT_BRIDGE) {
262 | console.log('ContentBridge:', ...message);
263 | }
264 | }
265 | }
266 |
--------------------------------------------------------------------------------
/src/app/assets/chromeSelect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/chromeSelect.png
--------------------------------------------------------------------------------
/src/app/assets/chromeSelect_2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/chromeSelect_2x.png
--------------------------------------------------------------------------------
/src/app/assets/largeIcons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/largeIcons.png
--------------------------------------------------------------------------------
/src/app/assets/largeIcons_2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/largeIcons_2x.png
--------------------------------------------------------------------------------
/src/app/assets/mediumIcons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/mediumIcons.png
--------------------------------------------------------------------------------
/src/app/assets/mediumIcons_2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/mediumIcons_2x.png
--------------------------------------------------------------------------------
/src/app/assets/smallIcons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/smallIcons.png
--------------------------------------------------------------------------------
/src/app/assets/smallIcons_2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/threejs/three-devtools/f2129475a34d32637cdc8aacea462a1fa40e5d30/src/app/assets/smallIcons_2x.png
--------------------------------------------------------------------------------
/src/app/common-elements/AccordionViewElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | const $onVisibilityToggle = Symbol('onVisibilityToggle');
4 | const $onClick = Symbol('onClick');
5 |
6 | export default class AccordionViewElement extends LitElement {
7 | static get properties() {
8 | return {
9 | open: {type: Boolean, reflect: true},
10 | }
11 | }
12 |
13 | render() {
14 | return html`
15 |
90 |
92 |
93 |
94 |
95 |
96 |
97 | `;
98 | }
99 |
100 | [$onVisibilityToggle](e) {
101 | e.stopPropagation();
102 | this.open = !this.open;
103 | }
104 |
105 | [$onClick](e) {
106 | e.stopPropagation();
107 | this.open = !this.open;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/app/common-elements/DevtoolsButtonElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | export default class DevtoolsButtonElement extends LitElement {
4 | render() {
5 | return html`
6 |
21 |
22 | `;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/common-elements/DevtoolsIconButtonElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | export default class DevtoolsIconButtonElement extends LitElement {
4 | static get properties() {
5 | return {
6 | "icon": { type: String, reflect: true }
7 | }
8 | }
9 |
10 | render() {
11 | return html`
12 |
36 |
39 | `;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/common-elements/DevtoolsIconElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | const icons = {
4 | "close": { sheet: "large", position: "-84px 0px" },
5 | "visibility": { sheet: "large", position: "28px 0px" },
6 | "add": { sheet: "large", position: "0px -24px" },
7 | "check": { sheet: "large", position: "-54px -24px" },
8 | "shadow": { sheet: "large", position: "0px -48px" },
9 | "camera": { sheet: "large", position: "-28px -48px" },
10 | "settings": { sheet: "large", position: "56px -48px" },
11 | "undo": { sheet: "large", position: "28px -48px" },
12 | "edit": { sheet: "large", position: "0px -96px" },
13 | "filter": { sheet: "large", position: "-56px -96px" },
14 | "menu": { sheet: "large", position: "-56px -120px" },
15 | "search": { sheet: "large", position: "28px -120px" },
16 | "refresh": { sheet: "large", position: "-84px 48px" },
17 | };
18 |
19 | const sizes = {
20 | "large": "width: 28px; height: 24px"
21 | }
22 |
23 | export default class DevtoolsIconElement extends LitElement {
24 | static get properties() {
25 | return {
26 | "icon": { type: String, reflect: true }
27 | }
28 | }
29 |
30 | render() {
31 | const icon = icons[this.icon || "refresh"];
32 | return html`
33 |
45 | `;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/common-elements/DevtoolsMessageElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | export default class DevtoolsMessageElement extends LitElement {
4 | render() {
5 | return html`
6 |
25 |
26 |
27 |
28 | `;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/common-elements/IconElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, svg, html } from '../../../web_modules/lit-element.js'
2 |
3 | // cube
4 | // cubes
5 | // flask (experiments)
6 | // globe-africa, globe-americas, globe-asia, globe-europe (scene graph?)
7 | // sitemap (scene graph?)
8 | // sliders-h
9 | // vr-cardboard
10 | // dice-d20, dice-d6
11 | // sync
12 | // magic
13 | // lightbulb (lights)
14 | // search
15 | // box/box-open (grouping?)
16 | // brush (material?)
17 | // chess-board (textures)
18 | // eye (visibility)
19 | export default class IconElement extends LitElement {
20 | static get properties() {
21 | return {
22 | "icon": { type: String, },
23 | "fill": { type: Boolean, }
24 | }
25 | }
26 |
27 | render() {
28 | const iconName = `${this.icon}${this.fill ? '' : '-outline'}`;
29 | return html`
30 |
31 |
45 |
46 | `;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/common-elements/NumberInputElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js';
2 | //import { LitElement, html } from '../examples/web_modules/lit-element.js'
3 |
4 | const $onActivate = Symbol('onActivate');
5 |
6 | /**
7 | * A LitElement form of A-Frame Inspector's number widget
8 | * https://github.com/aframevr/aframe-inspector/blob/master/src/components/widgets/NumberWidget.js
9 | */
10 | class NumberInputElement extends LitElement {
11 | static get properties() {
12 | return {
13 | min: { type: Number },
14 | max: { type: Number },
15 | step: { type: Number },
16 | value: { type: Number },
17 | precision: { type: Number },
18 | }
19 | }
20 |
21 | constructor() {
22 | super();
23 | this.min = -Infinity;
24 | this.max = Infinity;
25 | this.value = 0;
26 | this.precision = 3;
27 | this.step = 1;
28 |
29 | this.onMouseMove = this.onMouseMove.bind(this);
30 | this.onMouseUp = this.onMouseUp.bind(this);
31 | };
32 |
33 | firstUpdated() {
34 | this.distance = 0;
35 | this.onMouseDownValue = 0;
36 | this.prevPointer = [0, 0];
37 | this.$input = this.shadowRoot.querySelector('input');
38 | this.setValue(this.value);
39 | this.onBlur();
40 | }
41 |
42 | onMouseMove(event) {
43 | const currentValue = parseFloat(this.value);
44 | const pointer = [event.clientX, event.clientY];
45 | const delta =
46 | pointer[0] - this.prevPointer[0] - (pointer[1] - this.prevPointer[1]);
47 | this.distance += delta;
48 |
49 | // Add minimum tolerance to reduce unintentional drags when clicking on input.
50 | if (Math.abs(delta) <= 2) {
51 | return;
52 | }
53 |
54 | let value = this.onMouseDownValue;
55 | const accel = event.shiftKey ? 10 : 1;
56 | value = parseInt(this.distance / 2) * accel * this.step;
57 | value += currentValue;
58 | value = Math.min(this.max, Math.max(this.min, value));
59 | if (currentValue !== value) {
60 | this.setValue(value);
61 | }
62 | this.prevPointer = [event.clientX, event.clientY];
63 | }
64 |
65 | onMouseDown(event) {
66 | event.preventDefault();
67 | this.distance = 0;
68 | this.onMouseDownValue = this.value;
69 | this.prevPointer = [event.clientX, event.clientY];
70 | document.addEventListener('mousemove', this.onMouseMove, false);
71 | document.addEventListener('mouseup', this.onMouseUp, false);
72 | };
73 |
74 | onMouseUp(event) {
75 | document.removeEventListener('mousemove', this.onMouseMove, false);
76 | document.removeEventListener('mouseup', this.onMouseUp, false);
77 |
78 | if (Math.abs(this.distance) < 2) {
79 | this.$input.focus();
80 | this.$input.select();
81 | }
82 | };
83 |
84 | setValue(value) {
85 | if (value === this.value) return;
86 |
87 | if (value !== undefined) {
88 | if (this.precision === 0) {
89 | value = parseInt(value);
90 | } else {
91 | value = parseFloat(value);
92 | }
93 |
94 | if (value < this.min) {
95 | value = this.min;
96 | }
97 | if (value > this.max) {
98 | value = this.max;
99 | }
100 |
101 | this.value = value;
102 | this.dispatchEvent(new CustomEvent('change', {
103 | detail: {
104 | value: parseFloat(value.toFixed(5)),
105 | },
106 | bubbles: true,
107 | composed: true,
108 | }));
109 | }
110 | }
111 |
112 | shouldUpdate(changed) {
113 | // This will be triggered typically when the element is changed directly with
114 | // element.setAttribute.
115 | if (changed.has('value') && changed.get('value') !== this.value) {
116 | return true;
117 | }
118 | return true;
119 | }
120 |
121 | onBlur() {
122 | this.setValue(parseFloat(this.$input.value));
123 | }
124 |
125 | onChange(e) {
126 | this.setValue(e.target.value);
127 | };
128 |
129 | onKeyDown(event) {
130 | event.stopPropagation();
131 |
132 | // enter.
133 | if (event.keyCode === 13) {
134 | this.setValue(parseFloat(this.$input.value));
135 | this.$input.blur();
136 | return;
137 | }
138 |
139 | // up.
140 | if (event.keyCode === 38) {
141 | this.setValue(parseFloat(this.value) + this.step);
142 | return;
143 | }
144 |
145 | // down.
146 | if (event.keyCode === 40) {
147 | this.setValue(parseFloat(this.value) - this.step);
148 | return;
149 | }
150 | };
151 |
152 | render() {
153 | const displayValue = this.value.toFixed(this.precision);
154 | return html`
155 |
163 |
172 | `;
173 | }
174 | }
175 | export default NumberInputElement;
176 |
--------------------------------------------------------------------------------
/src/app/constants.js:
--------------------------------------------------------------------------------
1 | export const MaterialTypes = [
2 | 'Material',
3 | 'LineBasicMaterial',
4 | 'LineDashedMaterial',
5 | 'MeshBasicMaterial',
6 | 'MeshDepthMaterial',
7 | 'MeshDistanceMaterial',
8 | 'MeshLambertMaterial',
9 | 'MeshMatcapMaterial',
10 | 'MeshNormalMaterial',
11 | 'MeshPhongMaterial',
12 | 'MeshPhysicalMaterial',
13 | 'MeshStandardMaterial',
14 | 'MeshToonMaterial',
15 | 'PointsMaterial',
16 | 'RawShaderMaterial',
17 | 'ShaderMaterial',
18 | 'ShadowMaterial',
19 | 'SpriteMaterial'
20 | ];
21 |
22 | export const ObjectTypes = [
23 | 'Mesh',
24 | 'Line',
25 | 'LineLoop',
26 | 'LineSegments',
27 | 'AmbientLight',
28 | 'DirectionalLight',
29 | 'HemisphereLight',
30 | 'PointLight',
31 | 'RectAreaLight',
32 | 'SpotLight',
33 | 'ArrowHelper',
34 | 'AxesHelper',
35 | 'BoxHelper',
36 | 'Box3Helper',
37 | 'CameraHelper',
38 | 'DirectionalLightHelper',
39 | 'FaceNormalsHelper',
40 | 'GridHelper',
41 | 'PolarGridHelper',
42 | 'PositionalAudioHelper',
43 | 'HemisphereLightHelper',
44 | 'PlaneHelper',
45 | 'PointLightHelper',
46 | 'RectAreaLightHelper',
47 | 'SkeletonHelper',
48 | 'SpotLightHelper',
49 | 'VertexNormalsHelper',
50 | 'Skeleton',
51 | 'Bone',
52 | 'Group'
53 | ];
54 |
55 | // Defaults go first, and applied if undefined
56 | const ConstantTypes = {
57 | mapping: [
58 | 'UVMapping',
59 | 'CubeReflectionMapping',
60 | 'CubeRefractionMapping',
61 | 'EquirectangularReflectionMapping',
62 | 'EquirectangularRefractionMapping',
63 | 'SphericalReflectionMapping',
64 | 'CubeUVReflectionMapping',
65 | 'CubeUVRefractionMapping',
66 | ],
67 | drawMode: [
68 | 'TrianglesDrawMode',
69 | 'TriangleStripDrawMode',
70 | 'TriangleFanDrawMode'
71 | ],
72 | side: [
73 | 'FrontSide',
74 | 'BackSide',
75 | 'DoubleSide'
76 | ],
77 | colors: [
78 | 'NoColors',
79 | 'FaceColors',
80 | 'VertexColors'
81 | ],
82 | blending:[
83 | 'NormalBlending',
84 | 'NoBlending',
85 | 'AdditiveBlending',
86 | 'SubtractiveBlending',
87 | 'MultiplyBlending',
88 | 'CustomBlending'
89 | ],
90 | blendEquation: [
91 | 'AddEquation',
92 | 'SubtractEquation',
93 | 'ReverseSubtractEquation',
94 | 'MinEquation',
95 | 'MaxEquation'
96 | ],
97 | blendDst: [
98 | 'OneMinusSrcAlphaFactor',
99 | 'ZeroFactor',
100 | 'OneFactor',
101 | 'SrcColorFactor',
102 | 'OneMinusSrcColorFactor',
103 | 'SrcAlphaFactor',
104 | 'DstAlphaFactor',
105 | 'OneMinusDstAlphaFactor',
106 | 'DstColorFactor',
107 | 'OneMinusDstColorFactor'
108 | ],
109 | blendSrc: [
110 | 'OneMinusSrcAlphaFactor',
111 | 'ZeroFactor',
112 | 'OneFactor',
113 | 'SrcColorFactor',
114 | 'OneMinusSrcColorFactor',
115 | 'SrcAlphaFactor',
116 | 'DstAlphaFactor',
117 | 'OneMinusDstAlphaFactor',
118 | 'DstColorFactor',
119 | 'OneMinusDstColorFactor',
120 | 'SrcAlphaSaturateFactor'
121 | ],
122 | depthFunc: [
123 | 'LessEqualDepth',
124 | 'NeverDepth',
125 | 'AlwaysDepth',
126 | 'LessDepth',
127 | 'GreaterEqualDepth',
128 | 'GreaterDepth',
129 | 'NotEqualDepth'
130 | ],
131 | combine: [
132 | 'MultiplyOperation',
133 | 'MixOperation',
134 | 'AddOperation',
135 | ],
136 | vertexColors: [
137 | 'NoColors',
138 | 'VertexColors',
139 | 'FaceColors',
140 | ],
141 | normalMapType: [
142 | 'TangentSpaceNormalMap',
143 | 'ObjectSpaceNormalMap',
144 | ],
145 | encoding: [
146 | 'LinearEncoding',
147 | 'sRGBEncoding',
148 | 'GammaEncoding',
149 | 'RGBEEncoding',
150 | 'LogLuvEncoding',
151 | 'RGBM7Encoding',
152 | 'RGBM16Encoding',
153 | 'RGBDEncoding',
154 | 'BasicDepthPacking',
155 | 'RGBADepthPacking'
156 | ],
157 | format: [
158 | 'RGBAFormat',
159 | 'AlphaFormat',
160 | 'RGBFormat',
161 | 'LuminanceFormat',
162 | 'LuminanceAlphaFormat',
163 | 'RGBEFormat',
164 | 'DepthFormat',
165 | 'DepthStencilFormat'
166 | ],
167 | type: [
168 | 'UnsignedByteType',
169 | 'ByteType',
170 | 'ShortType',
171 | 'UnsignedShortType',
172 | 'IntType',
173 | 'UnsignedIntType',
174 | 'FloatType',
175 | 'HalfFloatType',
176 | 'UnsignedShort4444Type',
177 | 'UnsignedShort5551Type',
178 | 'UnsignedShort565Type',
179 | 'UnsignedInt248Type',
180 | ],
181 | wrapping: [
182 | 'ClampToEdgeWrapping',
183 | 'RepeatWrapping',
184 | 'MirroredRepeatWrapping',
185 | ],
186 | magFilter: [
187 | 'LinearFilter',
188 | 'NearestFilter',
189 | ],
190 | minFilter: [
191 | 'LinearMipMapLinearFilter',
192 | 'NearestFilter',
193 | 'NearestMipMapNearestFilter',
194 | 'NearestMipMapLinearFilter',
195 | 'LinearFilter',
196 | 'LinearMipMapNearestFilter',
197 | ],
198 | toneMapping: [
199 | 'NoToneMapping',
200 | 'LinearToneMapping',
201 | 'ReinhardToneMapping',
202 | 'Uncharted2ToneMapping',
203 | 'CineonToneMapping',
204 | 'ACESFilmicToneMapping',
205 | ],
206 | shadowMap: [
207 | 'BasicShadowMap',
208 | 'PCFShadowMap',
209 | 'PCFSoftShadowMap',
210 | 'VSMShadowMap',
211 | ],
212 | };
213 |
214 | // Copy some over since the constant type is found
215 | // by property name.
216 | ConstantTypes.shadowSide = ConstantTypes.side;
217 | ConstantTypes.blendSrcAlpha = ['null', ...ConstantTypes.blendSrc];
218 | ConstantTypes.blendDstAlpha = ['null', ...ConstantTypes.blendDst];
219 | ConstantTypes.blendEquationAlpha = ['null', ...ConstantTypes.blendEquation];
220 | // Change default (first in order) when encoding is used as `depthPacking`
221 | ConstantTypes.depthPacking = [...ConstantTypes.encoding];
222 | ConstantTypes.depthPacking[ConstantTypes.depthPacking.indexOf('BasicDepthPacking')] =
223 | ConstantTypes.depthPacking[0];
224 | ConstantTypes.depthPacking[0] = 'BasicDepthPacking';
225 |
226 | export { ConstantTypes };
227 |
--------------------------------------------------------------------------------
/src/app/data/geometry.js:
--------------------------------------------------------------------------------
1 | const BufferAttributes = (entity) => {
2 | const attributes = entity.data && entity.data.attributes;
3 | if (!attributes) {
4 | return;
5 | }
6 | const attrType = 'array'; // { name, itemSize, type, array, normalized }
7 | const attrs = Object.keys(attributes).map(key => {
8 | return {
9 | name: key,
10 | type: attrType,
11 | prop: `data.attributes.${key}`
12 | }
13 | });
14 | return {
15 | name: 'Attributes',
16 | type: 'group',
17 | props: attrs,
18 | }
19 | };
20 |
21 | // boundingBox
22 | // boundingSphere
23 | const Geometry = {
24 | type: 'geometry',
25 | props: [{
26 | name: 'Vertices',
27 | type: 'array',
28 | prop: 'data.vertices',
29 | }, {
30 | name: 'Colors',
31 | type: 'array',
32 | prop: 'colors',
33 | }, {
34 | name: 'Faces',
35 | type: 'array',
36 | prop: 'faces',
37 | }, {
38 | name: 'Faces Vertex UVs',
39 | type: 'array',
40 | prop: 'faceVertexUvs',
41 | }, {
42 | name: 'Morph Targets',
43 | type: 'array', // { name: ..., vertices: [new Vector3()]}
44 | prop: 'morphTargets',
45 | }, {
46 | name: 'Morph Normals',
47 | type: 'array', // { name: ..., normals: [new Vector3()]}
48 | prop: 'morphNormals',
49 | }, {
50 | name: 'Skin Weights',
51 | type: 'array',
52 | prop: 'skinWeights',
53 | }, {
54 | name: 'Skin Indices',
55 | type: 'array',
56 | prop: 'skinIndices',
57 | }, {
58 | name: 'Line Distances',
59 | type: 'array',
60 | prop: 'faceVertexUvs',
61 | }]
62 | }
63 |
64 | // boundingBox
65 | // boundingSphere
66 | // morphAttributes
67 | const bufferGeometryProps = [{
68 | name: 'Index',
69 | type: 'attribute',
70 | prop: 'data.index',
71 | }, {
72 | name: 'Groups',
73 | type: 'array', // { start, count, materialIndex }
74 | prop: 'data.groups',
75 | },
76 | /*
77 | {
78 | name: 'Draw Range',
79 | type: 'group',
80 | props: [{
81 | name: 'Start',
82 | type: 'number',
83 | prop: 'drawRange.start',
84 | default: 0,
85 | }, {
86 | name: 'Count',
87 | type: 'number',
88 | prop: 'drawRange.count',
89 | default: Infinity,
90 | }]
91 | },
92 | */
93 | {
94 | name: 'Morph Targets Relative',
95 | type: 'boolean',
96 | prop: 'data.morphTargetsRelative',
97 | default: false,
98 | }];
99 |
100 | const BufferGeometry = {
101 | type: 'geometry',
102 | props: [
103 | ...bufferGeometryProps
104 | ],
105 | BufferAttributes,
106 | }
107 |
108 | const InstancedBufferGeometry = {
109 | type: 'geometry',
110 | props: [
111 | ...bufferGeometryProps, {
112 | name: 'Instance Count',
113 | type: 'int',
114 | prop: 'instanceCount',
115 | }
116 | ],
117 | BufferAttributes,
118 | }
119 |
120 | export default {
121 | BufferGeometry: BufferGeometry,
122 | Geometry: Geometry,
123 |
124 | InstancedBufferGeometry: InstancedBufferGeometry,
125 |
126 | BoxBufferGeometry: BufferGeometry,
127 | BoxGeometry: Geometry,
128 | CircleBufferGeometry: BufferGeometry,
129 | CircleGeometry: Geometry,
130 | ConeBufferGeometry: BufferGeometry,
131 | ConeGeometry: Geometry,
132 | CylinderBufferGeometry: BufferGeometry,
133 | CylinderGeometry: Geometry,
134 | DodecahedronBufferGeometry: BufferGeometry,
135 | DodecahedronGeometry: Geometry,
136 | EdgesGeometry: Geometry,
137 | ExtrudeBufferGeometry: BufferGeometry,
138 | ExtrudeGeometry: Geometry,
139 | IcosahedronBufferGeometry: BufferGeometry,
140 | IcosahedronGeometry: Geometry,
141 | LatheBufferGeometry: BufferGeometry,
142 | LatheGeometry: Geometry,
143 | OctahedronBufferGeometry: BufferGeometry,
144 | OctahedronGeometry: Geometry,
145 | ParametricBufferGeometry: BufferGeometry,
146 | ParametricGeometry: Geometry,
147 | PlaneBufferGeometry: BufferGeometry,
148 | PlaneGeometry: Geometry,
149 | PolyhedronBufferGeometry: BufferGeometry,
150 | PolyhedronGeometry: Geometry,
151 | RingBufferGeometry: BufferGeometry,
152 | RingGeometry: Geometry,
153 | ShapeBufferGeometry: BufferGeometry,
154 | ShapeGeometry: Geometry,
155 | SphereBufferGeometry: BufferGeometry,
156 | SphereGeometry: Geometry,
157 | TetrahedronBufferGeometry: BufferGeometry,
158 | TetrahedronGeometry: Geometry,
159 | TextBufferGeometry: BufferGeometry,
160 | TextGeometry: Geometry,
161 | TorusBufferGeometry: BufferGeometry,
162 | TorusGeometry: Geometry,
163 | TorusKnotBufferGeometry: BufferGeometry,
164 | TorusKnotGeometry: Geometry,
165 | TubeBufferGeometry: BufferGeometry,
166 | TubeGeometry: Geometry,
167 | WireframeGeometry: Geometry,
168 | }
169 |
--------------------------------------------------------------------------------
/src/app/data/lights.js:
--------------------------------------------------------------------------------
1 | import transform from './object-transform.js';
2 | import renderable from './object-renderable.js';
3 |
4 | const base = [{
5 | name: 'Color',
6 | prop: 'color',
7 | type: 'color',
8 | }, {
9 | name: 'Intensity',
10 | prop: 'intensity',
11 | type: 'number',
12 | }];
13 |
14 | const objectProps = [
15 | transform,
16 | renderable,
17 | ];
18 |
19 | const castShadow = {
20 | name: 'Cast Shadow',
21 | prop: 'castShadow',
22 | type: 'boolean',
23 | default: false,
24 | };
25 |
26 | const target = {
27 | name: 'Target',
28 | prop: 'target',
29 | type: 'vec3',
30 | };
31 |
32 | const decay = {
33 | name: 'Decay',
34 | prop: 'decay',
35 | type: 'number',
36 | default: 1,
37 | };
38 | const distance = {
39 | name: 'Distance',
40 | prop: 'distance',
41 | type: 'number',
42 | default: 0,
43 | };
44 | const power = {
45 | name: 'Power',
46 | prop: 'power',
47 | type: 'number',
48 | default: Math.PI * 4,
49 | };
50 |
51 | const Light = {
52 | type: 'light',
53 | props: [
54 | ...base,
55 | ...objectProps
56 | ],
57 | }
58 |
59 | export default {
60 | Light: Light,
61 | AmbientLight: Light,
62 | DirectionalLight: {
63 | type: 'object',
64 | props: [
65 | ...base,
66 | castShadow,
67 | target,
68 | ...objectProps,
69 | ],
70 | },
71 | HemisphereLight: {
72 | type: 'object',
73 | props: [
74 | ...base,
75 | castShadow,
76 | {
77 | name: 'Ground Color',
78 | prop: 'groundColor',
79 | type: 'color'
80 | },
81 | ...objectProps,
82 | ],
83 | },
84 | PointLight: {
85 | type: 'object',
86 | props: [
87 | ...base,
88 | castShadow,
89 | decay,
90 | distance,
91 | power,
92 | ...objectProps,
93 | ],
94 | },
95 | RectAreaLight: {
96 | type: 'object',
97 | props: [
98 | ...base,
99 | castShadow,
100 | {
101 | name: 'Width',
102 | prop: 'width',
103 | type: 'number'
104 | }, {
105 | name: 'Height',
106 | prop: 'height',
107 | type: 'number'
108 | },
109 | ...objectProps,
110 | ],
111 | },
112 | SpotLight: {
113 | type: 'object',
114 | props: [
115 | ...base,
116 | castShadow,
117 | {
118 | name: 'Angle',
119 | prop: 'angle',
120 | type: 'angle',
121 | default: Math.PI/3,
122 | min: 0,
123 | max: Math.PI/2,
124 | },
125 | decay,
126 | distance,
127 | power,
128 | {
129 | name: 'Penumbra',
130 | prop: 'penumbra',
131 | type: 'number',
132 | default: 0,
133 | min: 0,
134 | max: 1,
135 | },
136 | target,
137 | ...objectProps,
138 | ],
139 | },
140 | };
141 |
--------------------------------------------------------------------------------
/src/app/data/material-blending.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'Blending',
3 | type: 'group',
4 | props: [{
5 | name: 'Blending',
6 | prop: 'blending',
7 | type: 'enum',
8 | }, {
9 | name: 'Alpha Test',
10 | prop: 'alphaTest',
11 | type: 'number',
12 | default: 0,
13 | }, {
14 | name: 'Source',
15 | prop: 'blendSrc',
16 | type: 'enum',
17 | }, {
18 | name: 'Source Alpha',
19 | prop: 'blendSrcAlpha',
20 | type: 'enum',
21 | default: 0,
22 | }, {
23 | name: 'Destination',
24 | prop: 'blendDst',
25 | type: 'enum',
26 | }, {
27 | name: 'Destination Alpha',
28 | prop: 'blendDstAlpha',
29 | type: 'enum',
30 | default: 0,
31 | }, {
32 | name: 'Blend Equation',
33 | prop: 'blendEquation',
34 | type: 'enum',
35 | }, {
36 | name: 'Blend Equation Alpha',
37 | prop: 'blendEquationAlpha',
38 | type: 'enum',
39 | default: 0,
40 | }, {
41 | name: 'Premultiplied Alpha',
42 | prop: 'premultipliedAlpha',
43 | type: 'boolean',
44 | default: false,
45 | }],
46 | };
47 |
--------------------------------------------------------------------------------
/src/app/data/material-common.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'Properties',
3 | type: 'group',
4 | props: [{
5 | name: 'Side',
6 | prop: 'side',
7 | type: 'enum',
8 | default: 0,
9 | }, {
10 | name: 'Transparent',
11 | prop: 'transparent',
12 | type: 'boolean',
13 | default: false,
14 | }, {
15 | name: 'Visible',
16 | prop: 'visible',
17 | type: 'boolean',
18 | default: true,
19 | }, {
20 | name: 'Opacity',
21 | prop: 'opacity',
22 | type: 'number',
23 | min: 0,
24 | max: 1,
25 | default: 1,
26 | }, {
27 | name: 'Color Write',
28 | prop: 'colorWrite',
29 | type: 'boolean',
30 | default: true,
31 | }, {
32 | name: 'Depth Func',
33 | prop: 'depthFunc',
34 | type: 'enum',
35 | }, {
36 | name: 'Depth Test',
37 | prop: 'depthTest',
38 | type: 'boolean',
39 | default: true,
40 | }, {
41 | name: 'Depth Write',
42 | prop: 'depthWrite',
43 | type: 'boolean',
44 | default: true,
45 | }, {
46 | name: 'Lights',
47 | prop: 'lights',
48 | type: 'boolean',
49 | default: false,
50 | }, {
51 | name: 'Flat Shading',
52 | prop: 'flatShading',
53 | type: 'boolean',
54 | default: false,
55 | }, {
56 | name: 'Fog',
57 | prop: 'fog',
58 | type: 'boolean',
59 | default: false,
60 | }, {
61 | name: 'Dithering',
62 | prop: 'dithering',
63 | type: 'boolean',
64 | default: false,
65 | }, {
66 | name: 'Clip Intersection',
67 | prop: 'clipIntersection',
68 | type: 'boolean',
69 | default: false,
70 | }, {
71 | name: 'Clip Shadows',
72 | prop: 'clipShadows',
73 | type: 'boolean',
74 | default: false,
75 | }, {
76 | name: 'Shadow Side',
77 | prop: 'shadowSide',
78 | type: 'enum',
79 | default: 0,
80 | }, {
81 | name: 'Tone Mapped',
82 | prop: 'toneMapped',
83 | type: 'boolean',
84 | default: true,
85 | }, {
86 | name: 'Vertex Colors',
87 | prop: 'vertexColors',
88 | type: 'enum',
89 | }, {
90 | name: 'Vertex Tangents',
91 | prop: 'vertexTangents',
92 | type: 'boolean',
93 | default: false,
94 | }]
95 | }
96 |
--------------------------------------------------------------------------------
/src/app/data/material-line.js:
--------------------------------------------------------------------------------
1 | export const line = {
2 | name: 'Line Width',
3 | type: 'number',
4 | prop: 'linewidth',
5 | default: 1,
6 | };
7 |
8 | export const lineDashed = [{
9 | name: 'Dash Size',
10 | type: 'number',
11 | prop: 'dashSize',
12 | default: 3,
13 | }, {
14 | name: 'Dash Scale',
15 | type: 'number',
16 | prop: 'scale',
17 | default: 1,
18 | }, {
19 | name: 'Gap Size',
20 | type: 'number',
21 | prop: 'gapSize',
22 | default: 1,
23 | }];
24 |
--------------------------------------------------------------------------------
/src/app/data/material-pbr.js:
--------------------------------------------------------------------------------
1 | export const metalness = {
2 | type: 'group',
3 | name: 'Metalness',
4 | props: [{
5 | name: 'Map',
6 | type: 'texture',
7 | prop: 'metalnessMap',
8 | }, {
9 | name: 'Metalness',
10 | type: 'number',
11 | prop: 'metalness',
12 | min: 0,
13 | max: 1,
14 | }],
15 | }
16 |
17 | export const roughness = {
18 | type: 'group',
19 | name: 'Roughness',
20 | props: [{
21 | name: 'Roughness Map',
22 | type: 'texture',
23 | prop: 'roughnessMap',
24 | }, {
25 | name: 'Roughness',
26 | type: 'number',
27 | prop: 'roughness',
28 | min: 0,
29 | max: 1,
30 | }],
31 | };
32 |
33 | export const clearCoat = {
34 | type: 'group',
35 | name: 'Clear Coat',
36 | props: [{
37 | name: 'Clear Coat',
38 | type: 'number',
39 | prop: 'clearCoat',
40 | min: 0,
41 | max: 1,
42 | default: 0,
43 | }, {
44 | name: 'Clear Coat Roughness',
45 | type: 'number',
46 | prop: 'clearCoatRoughness',
47 | min: 0,
48 | max: 1,
49 | default: 0,
50 | }],
51 | };
52 |
--------------------------------------------------------------------------------
/src/app/data/material-polygon-offset.js:
--------------------------------------------------------------------------------
1 | export default {
2 | type: 'group',
3 | name: 'Polygon Offset',
4 | props: [{
5 | name: 'Enabled',
6 | type: 'boolean',
7 | prop: 'polygonOffset',
8 | default: false,
9 | }, {
10 | name: 'Offset Factor',
11 | type: 'int',
12 | prop: 'polygonOffsetFactor',
13 | default: 0,
14 | }, {
15 | name: 'Offset Units',
16 | type: 'int',
17 | prop: 'polygonOffsetUnits',
18 | default: 0,
19 | }]
20 | };
21 |
--------------------------------------------------------------------------------
/src/app/data/material-shared.js:
--------------------------------------------------------------------------------
1 | export const color = {
2 | name: 'Color',
3 | prop: 'color',
4 | type: 'color',
5 | };
6 |
7 | export const gradientMap = {
8 | name: 'Gradient Map',
9 | prop: 'gradientMap',
10 | type: 'texture',
11 | };
12 |
13 | export const combine = {
14 | name: 'Combine',
15 | prop: 'combine',
16 | type: 'enum',
17 | };
18 |
19 | export const depthPacking = {
20 | name: 'Depth Packing',
21 | prop: 'depthPacking',
22 | type: 'enum',
23 | };
24 |
25 | export const alphaMap = {
26 | name: 'Alpha Map',
27 | prop: 'alphaMap',
28 | type: 'texture',
29 | };
30 |
31 | export const matcap = {
32 | name: 'matcap',
33 | prop: 'matcap',
34 | type: 'texture',
35 | }
36 |
37 | export const normalMap = {
38 | type: 'group',
39 | name: 'Normal Map',
40 | props: [{
41 | name: 'Map',
42 | type: 'texture',
43 | prop: 'normalMap',
44 | }, {
45 | name: 'Scale',
46 | type: 'vec2',
47 | prop: 'normalScale',
48 | default: [1, 1],
49 | }, {
50 | name: 'Type',
51 | type: 'enum',
52 | prop: 'normalMapType',
53 | }]
54 | };
55 |
56 | export const bumpMap = {
57 | type: 'group',
58 | name: 'Bump Map',
59 | props: [{
60 | name: 'Map',
61 | type: 'texture',
62 | prop: 'bumpMap',
63 | }, {
64 | name: 'Scale',
65 | type: 'texture',
66 | prop: 'bumpScale',
67 | default: 1,
68 | }],
69 | };
70 |
71 | export const distance = {
72 | name: 'Distance',
73 | type: 'group',
74 | props: [{
75 | name: 'referencePosition',
76 | prop: 'referencePosition',
77 | type: 'vec3',
78 | }, {
79 | name: 'Near Distance',
80 | prop: 'nearDistance',
81 | type: 'number',
82 | }, {
83 | name: 'Far Distance',
84 | prop: 'farDistance',
85 | type: 'number',
86 | }]
87 | }
88 |
89 | export const displacement = {
90 | type: 'group',
91 | name: 'Displacement Map',
92 | props: [{
93 | name: 'Map',
94 | type: 'texture',
95 | prop: 'displacementMap',
96 | }, {
97 | name: 'Scale',
98 | type: 'number',
99 | prop: 'displacementScale',
100 | min: 0,
101 | default: 1,
102 | }, {
103 | name: 'Bias',
104 | type: 'number',
105 | prop: 'displacementBias',
106 | min: 0,
107 | default: 0,
108 | }]
109 | };
110 |
111 | export const diffuseMap = {
112 | name: 'Diffuse Map',
113 | prop: 'map',
114 | type: 'texture',
115 | };
116 |
117 | export const ao = {
118 | name: 'Ambient Occlusion',
119 | type: 'group',
120 | props: [{
121 | name: 'Map',
122 | prop: 'aoMap',
123 | type: 'texture',
124 | }, {
125 | name: 'Intensity',
126 | prop: 'aoMapIntensity',
127 | type: 'number',
128 | min: 0,
129 | default: 1,
130 | }],
131 | };
132 |
133 | export const envMap = {
134 | name: 'Environment Map',
135 | type: 'texture',
136 | prop: 'envMap',
137 | };
138 |
139 | export const envMapIntensity = {
140 | name: 'Environment Intensity',
141 | type: 'number',
142 | prop: 'envMapIntensity',
143 | default: 1,
144 | min: 0,
145 | };
146 |
147 | export const lightMap = {
148 | name: 'Light Map',
149 | type: 'group',
150 | props: [{
151 | name: 'Map',
152 | prop: 'lightMap',
153 | type: 'texture',
154 | }, {
155 | name: 'Intensity',
156 | prop: 'lightMapIntensity',
157 | type: 'number',
158 | min: 0,
159 | default: 1,
160 | }],
161 | };
162 |
163 | export const morphNormals = {
164 | name: 'Morph Normals',
165 | type: 'boolean',
166 | prop: 'morphNormals',
167 | default: false,
168 | }
169 |
170 | export const morphTargets = {
171 | name: 'Morph Targets',
172 | type: 'boolean',
173 | prop: 'morphTargets',
174 | default: false,
175 | }
176 |
177 | export const reflectivity = {
178 | name: 'Reflectivity',
179 | type: 'number',
180 | prop: 'reflectivity',
181 | min: 0,
182 | max: 1,
183 | default: 1,
184 | }
185 |
186 | export const refractionRatio = {
187 | name: 'Refraction Ratio',
188 | type: 'number',
189 | prop: 'refractionRatio',
190 | default: 0.98,
191 | min: 0,
192 | }
193 |
194 | export const skinning = {
195 | name: 'Skinning',
196 | type: 'boolean',
197 | prop: 'skinning',
198 | default: false,
199 | }
200 |
201 | export const specularMap = {
202 | name: 'Specular Map',
203 | type: 'texture',
204 | prop: 'specularMap',
205 | }
206 |
207 | export const specular = {
208 | name: 'Specular',
209 | type: 'group',
210 | props: [{
211 | name: 'Color',
212 | type: 'color',
213 | prop: 'specular',
214 | }, {
215 | name: 'Map',
216 | type: 'texture',
217 | prop: 'specularMap',
218 | }],
219 | };
220 |
221 | export const clipping = {
222 | name: 'Clipping',
223 | type: 'boolean',
224 | prop: 'clipping',
225 | default: false,
226 | }
227 |
228 | export const wireframe = {
229 | name: 'Wireframe',
230 | type: 'group',
231 | props: [{
232 | name: 'Enabled',
233 | type: 'boolean',
234 | prop: 'wireframe',
235 | default: false,
236 | }, {
237 | name: 'Line Width',
238 | type: 'number',
239 | prop: 'wireframeLinewidth',
240 | default: 1,
241 | }, {
242 | name: 'Line Cap',
243 | type: 'string',
244 | prop: 'wireframeLinecap',
245 | default: 'round',
246 | }, {
247 | name: 'Line Join',
248 | type: 'string',
249 | prop: 'wireframeLinejoin',
250 | default: 'round',
251 | }]
252 | }
253 |
254 | export const sizeAttenuation = {
255 | name: 'Attenuation',
256 | type: 'boolean',
257 | prop: 'sizeAttenuation',
258 | default: true,
259 | }
260 |
261 | export const rotation = {
262 | name: 'Rotation',
263 | type: 'radians',
264 | prop: 'rotation',
265 | default: 0,
266 | }
267 |
268 | export const point = {
269 | name: 'Points',
270 | type: 'group',
271 | props: [{
272 | name: 'Size',
273 | type: 'number',
274 | prop: 'size',
275 | default: 1,
276 | }, {
277 | name: 'Attenuation',
278 | type: 'boolean',
279 | prop: 'sizeAttenuation',
280 | default: true,
281 | }]
282 | }
283 |
284 | export const emissive = {
285 | name: 'Emissive',
286 | type: 'group',
287 | props: [{
288 | name: 'Color',
289 | type: 'color',
290 | prop: 'emissive',
291 | }, {
292 | name: 'Emissive Map ',
293 | type: 'texture',
294 | prop: 'emissiveMap',
295 | }, {
296 | name: 'Emissive Intensity',
297 | prop: 'emissiveIntensity',
298 | type: 'number',
299 | default: 1,
300 | }]
301 | };
302 |
--------------------------------------------------------------------------------
/src/app/data/materials.js:
--------------------------------------------------------------------------------
1 | import common from './material-common.js';
2 | import * as prop from './material-shared.js';
3 | import blending from './material-blending.js';
4 | import polygonOffset from './material-polygon-offset.js';
5 | import { line, lineDashed } from './material-line.js';
6 | import { metalness, roughness, clearCoat } from './material-pbr.js';
7 |
8 | const standard = [
9 | {
10 | name: 'Environment',
11 | type: 'group',
12 | props: [prop.envMap, prop.envMapIntensity].map(p => {
13 | return Object.assign({}, p, {
14 | name: p.name.replace(/Environment /, ''),
15 | });
16 | }),
17 | },
18 | metalness,
19 | roughness,
20 | prop.normalMap,
21 | prop.bumpMap,
22 | prop.displacement,
23 | prop.ao,
24 | prop.lightMap,
25 | prop.emissive,
26 | ];
27 |
28 | const base = [
29 | common,
30 | blending,
31 | polygonOffset
32 | ];
33 |
34 | const lineBase = [
35 | // Remove 'side', 'shadowSide' from line materials
36 | Object.assign({}, common, {
37 | props: [...common.props.filter(({ prop }) => ['side', 'shadowSide'].indexOf(prop) === -1)],
38 | }),
39 | blending,
40 | polygonOffset
41 | ];
42 |
43 | const GenericMaterial = {
44 | type: 'material',
45 | props: base,
46 | }
47 |
48 | export default {
49 | Material: GenericMaterial,
50 | MeshBasicMaterial: {
51 | type: 'material',
52 | props: [
53 | prop.color,
54 | prop.diffuseMap,
55 | prop.combine,
56 | prop.alphaMap,
57 | prop.envMap,
58 | prop.reflectivity,
59 | prop.refractionRatio,
60 | prop.specularMap,
61 | prop.morphTargets,
62 | prop.skinning,
63 | prop.wireframe,
64 | prop.ao,
65 | prop.lightMap,
66 | ...base
67 | ],
68 | },
69 | MeshDepthMaterial: {
70 | type: 'material',
71 | props: [
72 | prop.depthPacking,
73 | prop.diffuseMap,
74 | prop.alphaMap,
75 | prop.wireframe,
76 | prop.displacement,
77 | ...base
78 | ],
79 | },
80 | MeshDistanceMaterial: {
81 | type: 'material',
82 | props: [
83 | prop.diffuseMap,
84 | prop.alphaMap,
85 | prop.morphTargets,
86 | prop.skinning,
87 | prop.distance,
88 | prop.displacement,
89 | ...base
90 | ],
91 | },
92 | MeshLambertMaterial: {
93 | type: 'material',
94 | props: [
95 | prop.color,
96 | prop.diffuseMap,
97 | prop.alphaMap,
98 | prop.envMap,
99 | prop.reflectivity,
100 | prop.refractionRatio,
101 | prop.morphNormals,
102 | prop.morphTargets,
103 | prop.skinning,
104 | prop.specularMap,
105 | prop.wireframe,
106 | prop.emissive,
107 | prop.ao,
108 | prop.lightMap,
109 | ...base
110 | ],
111 | },
112 | MeshMatcapMaterial: {
113 | type: 'material',
114 | props: [
115 | prop.color,
116 | prop.matcap,
117 | prop.diffuseMap,
118 | prop.alphaMap,
119 | prop.morphNormals,
120 | prop.morphTargets,
121 | prop.skinning,
122 | prop.normalMap,
123 | prop.bumpMap,
124 | prop.displacement,
125 | ...base
126 | ],
127 | },
128 | MeshNormalMaterial: {
129 | type: 'material',
130 | props: [
131 | prop.morphNormals,
132 | prop.morphTargets,
133 | prop.skinning,
134 | prop.wireframe,
135 | prop.normalMap,
136 | prop.bumpMap,
137 | prop.displacement,
138 | ...base
139 | ],
140 | },
141 | MeshPhongMaterial: {
142 | type: 'material',
143 | props: [
144 | prop.color,
145 | prop.alphaMap,
146 | prop.envMap,
147 | prop.diffuseMap,
148 | prop.combine,
149 | prop.refractionRatio,
150 | prop.reflectivity,
151 | prop.morphNormals,
152 | prop.morphTargets,
153 | prop.skinning,
154 | prop.ao,
155 | prop.specular,
156 | prop.lightMap,
157 | prop.wireframe,
158 | prop.emissive,
159 | prop.normalMap,
160 | prop.bumpMap,
161 | prop.displacement,
162 | ...base
163 | ],
164 | },
165 | MeshPhysicalMaterial: {
166 | type: 'material',
167 | props: [
168 | prop.diffuseMap,
169 | prop.color,
170 | prop.refractionRatio,
171 | prop.reflectivity,
172 | prop.skinning,
173 | prop.wireframe,
174 | ...standard,
175 | clearCoat,
176 | ...base
177 | ],
178 | },
179 | MeshStandardMaterial: {
180 | type: 'material',
181 | props: [
182 | prop.diffuseMap,
183 | prop.color,
184 | prop.refractionRatio,
185 | prop.skinning,
186 | prop.wireframe,
187 | ...standard,
188 | ...base
189 | ],
190 | },
191 | MeshToonMaterial: {
192 | type: 'material',
193 | props: [
194 | prop.color,
195 | prop.diffuseMap,
196 | prop.combine,
197 | prop.gradientMap,
198 | prop.alphaMap,
199 | prop.refractionRatio,
200 | prop.reflectivity,
201 | prop.envMap,
202 | prop.morphNormals,
203 | prop.morphTargets,
204 | prop.skinning,
205 | prop.specular,
206 | prop.ao,
207 | prop.lightMap,
208 | prop.wireframe,
209 | prop.emissive,
210 | prop.normalMap,
211 | prop.bumpMap,
212 | prop.displacement,
213 | ...base
214 | ],
215 | },
216 | PointsMaterial: {
217 | type: 'material',
218 | props: [
219 | prop.color,
220 | prop.alphaMap,
221 | prop.diffuseMap,
222 | prop.morphTargets,
223 | prop.point,
224 | ...base
225 | ]
226 | },
227 | RawShaderMaterial: {
228 | type: 'material',
229 | props: [
230 | prop.clipping,
231 | prop.morphNormals,
232 | prop.morphTargets,
233 | prop.skinning,
234 | prop.wireframe,
235 | ...base
236 | ],
237 | },
238 | ShaderMaterial: {
239 | type: 'material',
240 | props: [
241 | prop.clipping,
242 | prop.morphNormals,
243 | prop.morphTargets,
244 | prop.skinning,
245 | prop.wireframe,
246 | ...base
247 | ],
248 | },
249 | ShadowMaterial: GenericMaterial,
250 | SpriteMaterial: {
251 | type: 'material',
252 | props: [
253 | prop.color,
254 | prop.diffuseMap,
255 | prop.rotation,
256 | prop.sizeAttenuation,
257 | ...base
258 | ],
259 | },
260 | LineBasicMaterial: {
261 | type: 'material',
262 | props: [
263 | prop.color,
264 | line,
265 | ...lineBase
266 | ],
267 | },
268 | LineDashedMaterial: {
269 | type: 'material',
270 | props: [
271 | prop.color,
272 | line,
273 | ...lineDashed,
274 | ...lineBase
275 | ],
276 | },
277 | };
278 |
--------------------------------------------------------------------------------
/src/app/data/object-renderable.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'Rendering',
3 | type: 'group',
4 | props: [{
5 | name: 'Render Order',
6 | prop: 'renderOrder',
7 | type: 'int',
8 | default: 0,
9 | }, {
10 | name: 'Visible',
11 | prop: 'visible',
12 | type: 'boolean',
13 | default: true,
14 | }, {
15 | name: 'Receive Shadow',
16 | prop: 'receiveShadow',
17 | type: 'boolean',
18 | default: false,
19 | },{
20 | name: 'Cast Shadow',
21 | prop: 'castShadow',
22 | type: 'boolean',
23 | default: false,
24 | },{
25 | name: 'Frustum Culled',
26 | prop: 'frustumCulled',
27 | type: 'boolean',
28 | default: true,
29 | }],
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/data/object-transform.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'Transform',
3 | type: 'group',
4 | props: [{
5 | name: 'Position',
6 | prop: 'position',
7 | type: 'vec3',
8 | step: 0.01,
9 | precision: 3,
10 | }, {
11 | name: 'Rotation',
12 | prop: 'rotation',
13 | type: 'vec3',
14 | step: 0.01,
15 | precision: 3,
16 | }, {
17 | name: 'Scale',
18 | prop: 'scale',
19 | type: 'vec3',
20 | step: 0.01,
21 | precision: 3,
22 | }, {
23 | name: 'Matrix Auto Update',
24 | prop: 'matrixAutoUpdate',
25 | type: 'boolean',
26 | default: true,
27 | }]
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/data/objects.js:
--------------------------------------------------------------------------------
1 | import transform from './object-transform.js';
2 | import renderable from './object-renderable.js';
3 |
4 | const geometry = {
5 | name: 'Geometry',
6 | prop: 'geometry',
7 | type: 'geometry',
8 | }
9 | const material = {
10 | name: 'Material',
11 | prop: 'material',
12 | type: 'material',
13 | }
14 |
15 | const object = [
16 | transform,
17 | renderable,
18 | ];
19 |
20 | const GeometryRenderable = {
21 | type: 'object',
22 | props: [
23 | geometry,
24 | material,
25 | transform,
26 | renderable,
27 | ]
28 | }
29 |
30 | const Scene = {
31 | type: 'scene',
32 | props: object,
33 | }
34 |
35 | const Helper = {
36 | type: 'helper',
37 | props: object,
38 | }
39 |
40 | const Bone = {
41 | type: 'bone',
42 | props: object,
43 | }
44 |
45 | // Does not have a further classification yet
46 | const Object3D = {
47 | type: 'object',
48 | props: object,
49 | }
50 |
51 | export default {
52 | Mesh: GeometryRenderable,
53 | Line: GeometryRenderable,
54 | LineLoop: GeometryRenderable,
55 | LineSegments: GeometryRenderable,
56 | Points: GeometryRenderable,
57 | SkinnedMesh: GeometryRenderable,
58 | InstancedMesh: GeometryRenderable,
59 |
60 | AxesHelper: Helper,
61 | BoxHelper: Helper,
62 | Box3Helper: Helper,
63 | CameraHelper: Helper,
64 | DirectionalLightHelper: Helper,
65 | FaceNormalsHelper: Helper,
66 | GridHelper: Helper,
67 | PolarGridHelper: Helper,
68 | PositionalAudioHelper: Helper,
69 | HemisphereLightHelper: Helper,
70 | PlaneHelper: Helper,
71 | PointLightHelper: Helper,
72 | RectAreaLightHelper: Helper,
73 | SkeletonHelper: Helper,
74 | SpotLightHelper: Helper,
75 | VertexNormalsHelper: Helper,
76 |
77 | Scene: Scene,
78 |
79 | Skeleton: Bone,
80 | Bone: Bone,
81 |
82 | Object3D: Object3D,
83 | Group: Object3D,
84 | PerspectiveCamera: Object3D,
85 | OrthographicCamera: Object3D,
86 | Camera: Object3D,
87 | };
88 |
--------------------------------------------------------------------------------
/src/app/data/renderers.js:
--------------------------------------------------------------------------------
1 | const ToneMapping = {
2 | name: 'Tone Mapping',
3 | type: 'group',
4 | props: [{
5 | // @TODO
6 | name: 'Type',
7 | prop: 'toneMapping',
8 | type: 'enum',
9 | enumType: 'toneMapping',
10 | }, {
11 | name: 'Exposure',
12 | prop: 'toneMappingExposure',
13 | type: 'number',
14 | default: 1,
15 | }],
16 | };
17 |
18 | const ShadowMap = {
19 | name: 'Shadow Map',
20 | type: 'group',
21 | props: [{
22 | name: 'Enabled',
23 | prop: 'shadowMap.enabled',
24 | type: 'boolean',
25 | default: false,
26 | }, {
27 | name: 'Auto Update',
28 | prop: 'shadowMap.autoUpdate',
29 | type: 'boolean',
30 | default: true,
31 | }, {
32 | // @TODO enum
33 | name: 'Shadow Type',
34 | prop: 'shadowMap.type',
35 | type: 'enum',
36 | enumType: 'shadowMap',
37 | }],
38 | };
39 |
40 | const BufferClearing = {
41 | name: 'Buffer Clearing',
42 | type: 'group',
43 | props: [{
44 | name: 'Auto Clear',
45 | prop: 'autoClear',
46 | type: 'boolean',
47 | default: true,
48 | }, {
49 | name: 'Auto Clear Color',
50 | prop: 'autoClearColor',
51 | type: 'boolean',
52 | default: true,
53 | }, {
54 | name: 'Auto Clear Depth',
55 | prop: 'autoClearDepth',
56 | type: 'boolean',
57 | default: true,
58 | }, {
59 | name: 'Auto Clear Stencil',
60 | prop: 'autoClearStencil',
61 | type: 'boolean',
62 | default: true,
63 | }]
64 | };
65 |
66 |
67 | // Does not have a further classification yet
68 | const Capabilities = {
69 | name: 'Capabilities',
70 | type: 'group',
71 | props: [{
72 | name: 'Is WebGL2',
73 | prop: 'capabilities.isWebGL2',
74 | type: 'boolean',
75 | readonly: true,
76 | }, {
77 | name: 'Precision',
78 | prop: 'capabilities.precision',
79 | type: 'string',
80 | readonly: true,
81 | }, {
82 | name: 'Float Fragment Textures',
83 | prop: 'capabilities.floatFragmentTextures',
84 | type: 'boolean',
85 | readonly: true,
86 | }, {
87 | name: 'Float Vertex Textures',
88 | prop: 'capabilities.floatVertexTextures',
89 | type: 'boolean',
90 | readonly: true,
91 | }, {
92 | name: 'Logarithmic Depth Buffer',
93 | prop: 'capabilities.logarithmicDepthBuffer',
94 | type: 'boolean',
95 | readonly: true,
96 | }, {
97 | name: 'Max Anisotropy',
98 | prop: 'capabilities.maxAnisotropy',
99 | type: 'number',
100 | readonly: true,
101 | }, {
102 | name: 'Max Precision',
103 | prop: 'capabilities.maxPrecision',
104 | type: 'string',
105 | readonly: true,
106 | }, {
107 | name: 'Max Attributes',
108 | prop: 'capabilities.maxAttributes',
109 | type: 'int',
110 | readonly: true,
111 | }, {
112 | name: 'Max Cubemap Size',
113 | prop: 'capabilities.maxCubemapSize',
114 | type: 'int',
115 | readonly: true,
116 | }, {
117 | name: 'Max Fragment Uniforms',
118 | prop: 'capabilities.maxFragmentUniforms',
119 | type: 'int',
120 | readonly: true,
121 | }, {
122 | name: 'Max Texture Size',
123 | prop: 'capabilities.maxTextureSize',
124 | type: 'int',
125 | readonly: true,
126 | }, {
127 | name: 'Max Textures',
128 | prop: 'capabilities.maxTextures',
129 | type: 'int',
130 | readonly: true,
131 | }, {
132 | name: 'Max Varyings',
133 | prop: 'capabilities.maxVaryings',
134 | type: 'int',
135 | readonly: true,
136 | }, {
137 | name: 'Max Vertex Textures',
138 | prop: 'capabilities.maxVertexTextures',
139 | type: 'int',
140 | readonly: true,
141 | }, {
142 | name: 'Max Vertex Uniforms',
143 | prop: 'capabilities.maxVertexUniforms',
144 | type: 'int',
145 | readonly: true,
146 | }, {
147 | name: 'Vertex Textures',
148 | prop: 'capabilities.vertexTextures',
149 | type: 'boolean',
150 | readonly: true,
151 | }]
152 | };
153 |
154 | // @TODO clippingPlanes
155 | const Clipping = {
156 | name: 'Clipping',
157 | type: 'group',
158 | props: [{
159 | name: 'Local Clipping',
160 | prop: 'localClippingEnabled',
161 | type: 'boolean',
162 | default: false,
163 | }],
164 | };
165 |
166 | const Scene = {
167 | name: 'Scene',
168 | type: 'group',
169 | props: [{
170 | name: 'Sort Objects',
171 | prop: 'sortObjects',
172 | type: 'boolean',
173 | default: true,
174 | }],
175 | };
176 |
177 | const MorphLimits = {
178 | name: 'Morph Limits',
179 | type: 'group',
180 | props: [{
181 | name: 'Max Morph Targets',
182 | prop: 'maxMorphTargets',
183 | type: 'int',
184 | default: 8,
185 | min: 0,
186 | max: 8,
187 | }, {
188 | name: 'Max Morph Normals',
189 | prop: 'maxMorphNormals',
190 | type: 'int',
191 | default: 4,
192 | min: 0,
193 | max: 4,
194 | }],
195 | };
196 |
197 | const WebGLRenderer = {
198 | type: 'renderer',
199 | props: [
200 | {
201 | name: 'Check Shader Errors',
202 | prop: 'debug.checkShaderErrors',
203 | type: 'boolean',
204 | default: true,
205 | }, {
206 | name: 'Physically Correct Lights',
207 | prop: 'physicallyCorrectLights',
208 | type: 'boolean',
209 | default: false,
210 | }, {
211 | name: 'Gamma',
212 | prop: 'gammaFactor',
213 | type: 'number',
214 | default: 2,
215 | }, {
216 | name: 'Output Encoding',
217 | prop: 'outputEncoding',
218 | type: 'enum',
219 | enumType: 'encoding',
220 | },
221 | ToneMapping,
222 | ShadowMap,
223 | BufferClearing,
224 | Capabilities,
225 | Clipping,
226 | Scene,
227 | MorphLimits,
228 | ],
229 | };
230 |
231 | export default {
232 | WebGLRenderer: WebGLRenderer,
233 | WebGL1Renderer: WebGLRenderer,
234 | };
235 |
--------------------------------------------------------------------------------
/src/app/data/textures.js:
--------------------------------------------------------------------------------
1 | const Filters = {
2 | name: 'Filters',
3 | type: 'group',
4 | props: [{
5 | name: 'Min Filter',
6 | prop: 'minFilter',
7 | type: 'enum',
8 | }, {
9 | name: 'Mag Filter',
10 | prop: 'magFilter',
11 | type: 'enum',
12 | }]
13 | };
14 |
15 | const Wrapping = object => ({
16 | name: 'Wrapping',
17 | type: 'group',
18 | // wrapR is currently used with DataTexture3D but not serialized,
19 | // let's not display it for now.
20 | props: [{
21 | name: 'Wrap S',
22 | prop: 'wrap[0]',
23 | type: 'enum',
24 | enumType: 'wrapping',
25 | }, {
26 | name: 'Wrap T',
27 | prop: 'wrap[1]',
28 | type: 'enum',
29 | enumType: 'wrapping',
30 | }]
31 | });
32 |
33 | const Transform = {
34 | name: 'Transform',
35 | type: 'group',
36 | props: [{
37 | name: 'Offset',
38 | prop: 'offset',
39 | type: 'vec2',
40 | }, {
41 | name: 'Repeat',
42 | prop: 'repeat',
43 | type: 'vec2',
44 | }, {
45 | name: 'Rotation',
46 | prop: 'rotation',
47 | type: 'radians',
48 | }, {
49 | name: 'Center',
50 | prop: 'center',
51 | type: 'vec2',
52 | }, {
53 | name: 'matrixAutoUpdate',
54 | prop: 'matrixAutoUpdate',
55 | type: 'boolean',
56 | default: true,
57 | }, {
58 | name: 'Matrix',
59 | prop: 'matrix',
60 | type: 'mat3',
61 | }]
62 | };
63 |
64 | const Texture = {
65 | type: 'texture',
66 | props: [{
67 | name: 'Mapping',
68 | prop: 'mapping',
69 | type: 'enum',
70 | }, {
71 | name: 'Encoding',
72 | prop: 'encoding',
73 | type: 'enum',
74 | }, {
75 | name: 'Format',
76 | prop: 'format',
77 | type: 'enum',
78 | }, {
79 | name: 'Byte Type',
80 | prop: 'type',
81 | type: 'enum',
82 | }, {
83 | name: 'Anisotropy',
84 | prop: 'anisotropy',
85 | type: 'number',
86 | min: 0,
87 | }, {
88 | name: 'Flip Y',
89 | prop: 'flipY',
90 | type: 'boolean',
91 | default: true,
92 | }, {
93 | name: 'Generate Mipmaps',
94 | prop: 'generateMipmaps',
95 | type: 'boolean',
96 | default: true,
97 | }, {
98 | name: 'Premultiply Alpha',
99 | prop: 'premultiplyAlpha',
100 | type: 'boolean',
101 | default: false,
102 | },
103 | Filters,
104 | Wrapping,
105 | Transform,
106 | ]
107 | }
108 |
109 | export default {
110 | Texture: Texture,
111 | CanvasTexture: Texture,
112 | CompressedTexture: Texture,
113 | CubeTexture: Texture,
114 | DataTexture: Texture,
115 | DataTexture2DArray: Texture,
116 | DataTexture3D: Texture,
117 | DepthTexture: Texture,
118 | VideoTexture: Texture,
119 | }
120 |
--------------------------------------------------------------------------------
/src/app/elements/ImagePreviewElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../../web_modules/lit-element.js'
2 |
3 | const $onActivate = Symbol('onActivate');
4 | const $onLoad = Symbol('onLoad');
5 |
6 | export default class ImagePreviewElement extends LitElement {
7 | static get properties() {
8 | return {
9 | width: { type: Number, reflect: true },
10 | height: { type: Number, reflect: true },
11 | }
12 | }
13 |
14 | constructor() {
15 | super();
16 | this.width = 0;
17 | this.height = 0;
18 | }
19 |
20 | render() {
21 | const image = null;//this.getEntity();
22 |
23 | if (!image) {
24 | return html`None`;
25 | }
26 |
27 | console.log('render imagepreview',image);
28 | return html`
29 |
43 | 
44 | ${this.width + ' x ' + this.height}
45 | `;
46 | }
47 |
48 | [$onLoad](e) {
49 | const image = e.composedPath()[0];
50 | this.width = image.naturalWidth;
51 | this.height = image.naturalHeight;
52 | }
53 |
54 | [$onActivate](e) {
55 | this.dispatchEvent(new CustomEvent('select-entity', {
56 | detail: {
57 | uuid: this.uuid,
58 | },
59 | bubbles: true,
60 | composed: true,
61 | }));
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/elements/ParametersViewElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 | import RendererTypes from '../data/renderers.js';
3 | import ObjectTypes from '../data/objects.js';
4 | import LightTypes from '../data/lights.js';
5 | import MaterialTypes from '../data/materials.js';
6 | import GeometryTypes from '../data/geometry.js';
7 | import TextureTypes from '../data/textures.js';
8 | import { getEntityName } from '../utils.js';
9 |
10 | // https://stackoverflow.com/a/6491621
11 | const propByString = function(o, s) {
12 | s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
13 | s = s.replace(/^\./, ''); // strip a leading dot
14 | var a = s.split('.');
15 | for (var i = 0, n = a.length; i < n; ++i) {
16 | var k = a[i];
17 | if (k in o) {
18 | o = o[k];
19 | } else {
20 | return;
21 | }
22 | }
23 | return o;
24 | }
25 |
26 | const $onRefresh = Symbol('onRefresh');
27 | const CommonProps = {
28 | Type: {
29 | name: 'Type',
30 | type: 'string',
31 | prop: 'baseType',
32 | },
33 | UUID: {
34 | name: 'UUID',
35 | type: 'string',
36 | prop: 'uuid',
37 | },
38 | Name: {
39 | name: 'Name',
40 | type: 'string',
41 | prop: 'name',
42 | }
43 | };
44 |
45 | function propsToElements(entity, elements, props, entities) {
46 | for (let prop of props) {
47 | if (typeof prop === 'function') {
48 | const result = prop(entity);
49 | if (result) {
50 | prop = result;
51 | } else {
52 | continue;
53 | }
54 | }
55 |
56 | if (prop.type === 'group') {
57 | const subProps = [];
58 | propsToElements(entity, subProps, [...prop.props]);
59 | elements.push(html`
60 | ${prop.name}
61 | ${subProps}
62 | `);
63 | continue;
64 | } else {
65 | const { name, type, prop: propName, enumType, default: def, readonly } = prop;
66 |
67 | let value = propByString(entity, propName);
68 | if (value === undefined) {
69 | value = def;
70 | }
71 |
72 | // For number/int types
73 | let min = 'min' in prop ? prop.min : -Infinity;
74 | let max = 'max' in prop ? prop.max : Infinity;
75 | let step = 'step' in prop ? prop.step :
76 | type === 'int' ? 1 : 0.01;
77 | let precision = 'precision' in prop ? prop.precision :
78 | type === 'int' ? 0 : 3;
79 |
80 | // For object types (geometry, material, texture)
81 | let associatedData = {};
82 | if (value && entities && ['geometry', 'material', 'texture'].indexOf(prop.type) !== -1) {
83 | associatedData = entities[value] || {};
84 | }
85 |
86 | elements.push(html`
87 |
100 | `);
101 | }
102 | }
103 | }
104 |
105 | export default class ParametersViewElement extends LitElement {
106 | static get properties() {
107 | return {
108 | uuid: { type: String },
109 | // Object with uuids as keys to entity data. Most objects will
110 | // only contain the selected entity's data (matching the uuid),
111 | // however things like Mesh will also contain any associated
112 | // material or geometry, etc.
113 | entities: { type: Object },
114 | }
115 | }
116 |
117 | [$onRefresh](e) {
118 | this.dispatchEvent(new CustomEvent('command', {
119 | detail: {
120 | type: 'refresh',
121 | },
122 | bubbles: true,
123 | composed: true,
124 | }));
125 | }
126 |
127 | render() {
128 | const entityData = (this.entities && this.entities[this.uuid]) || null;
129 | const entityTitle = entityData ? getEntityName(entityData) : '';
130 | const elements = [];
131 |
132 | if (entityData) {
133 | let definition = RendererTypes[entityData.baseType] ||
134 | ObjectTypes[entityData.baseType] ||
135 | LightTypes[entityData.baseType] ||
136 | MaterialTypes[entityData.baseType] ||
137 | GeometryTypes[entityData.baseType] ||
138 | TextureTypes[entityData.baseType];
139 | if (!definition) {
140 | definition = ObjectTypes.Object3D;
141 | }
142 |
143 | const commonProps = entityData.type === 'renderer' ? [CommonProps.Type, CommonProps.Name] :
144 | [CommonProps.Type, CommonProps.UUID, CommonProps.Name];
145 | propsToElements(entityData, elements, [...commonProps, ...definition.props], this.entities);
146 | }
147 |
148 | return html`
149 |
189 |
190 |
191 |
192 |
193 | ${elements}
194 |
195 | `;
196 | }
197 | }
198 |
--------------------------------------------------------------------------------
/src/app/elements/RendererViewElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | const $onPoll = Symbol('onPoll');
4 | const RENDERER_POLL_INTERVAL = 1000; // ms
5 |
6 | export default class RendererViewElement extends LitElement {
7 | static get properties() {
8 | return {
9 | rendererId: { type: String, },
10 | renderingInfo: { type: Object, },
11 | enabled: { type: Boolean, reflect: true },
12 | };
13 | }
14 |
15 | constructor() {
16 | super();
17 | this[$onPoll] = this[$onPoll].bind(this);
18 | }
19 |
20 | disconnectedCallback() {
21 | if (this[$onPoll].timer) {
22 | window.clearInterval(this[$onPoll].timer);
23 | }
24 | super.disconnectedCallback();
25 | }
26 |
27 | [$onPoll]() {
28 | if (this.rendererId) {
29 | this.dispatchEvent(new CustomEvent('command', {
30 | detail: {
31 | type: 'request-rendering-info',
32 | uuid: this.rendererId,
33 | },
34 | bubbles: true,
35 | composed: true,
36 | }));
37 | }
38 | }
39 |
40 | shouldUpdate(props) {
41 | if (props.has('enabled')) {
42 | if (this.enabled) {
43 | this[$onPoll].timer = window.setInterval(this[$onPoll], RENDERER_POLL_INTERVAL);
44 | } else {
45 | window.clearInterval(this[$onPoll].timer);
46 | }
47 | }
48 | return true;
49 | }
50 |
51 | render() {
52 | const activeRenderer = this.rendererId;
53 | const hasRenderingInfo = !!this.renderingInfo;
54 |
55 | const info = hasRenderingInfo ? this.renderingInfo.info : {
56 | render: {
57 | frame: 0,
58 | calls: 0,
59 | triangles: 0,
60 | points: 0,
61 | lines: 0,
62 | },
63 | memory: {
64 | geometries: 0,
65 | textures: 0,
66 | },
67 | programs: 0,
68 | };
69 |
70 | return html`
71 |
97 |
98 |
99 | - frame${info.render.frame}
100 | - draw calls${info.render.calls}
101 | - triangles${info.render.triangles}
102 | - points${info.render.points}
103 | - lines${info.render.lines}
104 |
105 |
106 |
107 |
108 |
109 | - geometries${info.memory.geometries || 0}
110 | - textures${info.memory.textures || 0}
111 | - programs${info.programs || 0}
112 |
113 | `;
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/app/elements/ResourcesViewElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 | import { getEntityName } from '../utils.js';
3 |
4 | const $onTreeItemSelect = Symbol('onTreeItemSelect');
5 | const $onRefreshClick = Symbol('onRefreshClick');
6 |
7 | export default class ResourcesViewElement extends LitElement {
8 | static get properties() {
9 | return {
10 | title: { type: String, reflect: true },
11 | selected: { type: String, reflect: true },
12 | resources: { type: Array },
13 | }
14 | }
15 |
16 | connectedCallback() {
17 | super.connectedCallback();
18 | this.addEventListener('tree-item-select', this[$onTreeItemSelect]);
19 | }
20 |
21 | disconnectedCallback() {
22 | this.removeEventListener('tree-item-select', this[$onTreeItemSelect]);
23 | super.disconnectedCallback();
24 | }
25 |
26 | render() {
27 | const title = this.title;
28 | const resources = this.resources || [];
29 |
30 | let nodes = resources.map((obj, i) => {
31 | let selected = obj.uuid && this.selected && this.selected === obj.uuid;
32 | let name = getEntityName(obj);
33 | return html`
34 |
39 | ${name}
40 |
41 | `;
42 | });
43 |
44 | return html`
45 |
68 |
69 |
70 |
71 |
77 | ${nodes}
78 |
79 |
88 |
89 | `;
90 | }
91 |
92 | updated() {
93 | const selected = this.shadowRoot.querySelector('tree-item[selected]');
94 | if (selected && selected.parentElement) {
95 | selected.parentElement.open = true;
96 | }
97 | }
98 |
99 | [$onRefreshClick](e) {
100 | this.dispatchEvent(new CustomEvent('command', {
101 | detail: {
102 | type: 'refresh',
103 | },
104 | bubbles: true,
105 | composed: true,
106 | }));
107 | }
108 |
109 | [$onTreeItemSelect](e) {
110 | e.stopPropagation();
111 | const treeItem = e.composedPath()[0];
112 | const uuid = treeItem.getAttribute('unique');
113 | this.dispatchEvent(new CustomEvent('command', {
114 | detail: {
115 | type: 'select-entity',
116 | uuid,
117 | },
118 | bubbles: true,
119 | composed: true,
120 | }));
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/src/app/elements/SceneViewElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 | import { getEntityName } from '../utils.js';
3 | import ChromeSelectStyle from './shared-styles/chrome-select.js';
4 |
5 | const $createSceneGraphNode = Symbol('createSceneGraphNode');
6 | const $onRefreshClick = Symbol('onRefreshClick');
7 | const $onSceneSelect = Symbol('onSceneSelect');
8 | const $onContentUpdate = Symbol('onContentUpdate');
9 | const $onTreeItemSelect = Symbol('onTreeItemSelect');
10 |
11 | export default class SceneViewElement extends LitElement {
12 | static get properties() {
13 | return {
14 | graph: { type: Object},
15 | scenes: { type: Array },
16 | activeScene: { type: String, },
17 | activeEntity: { type: String, },
18 | }
19 | }
20 |
21 | constructor() {
22 | super();
23 | this[$onRefreshClick] = this[$onRefreshClick].bind(this);
24 | this[$onTreeItemSelect] = this[$onTreeItemSelect].bind(this);
25 | this[$onContentUpdate] = this[$onContentUpdate].bind(this);
26 | }
27 |
28 | connectedCallback() {
29 | super.connectedCallback();
30 | this.addEventListener('tree-item-select', this[$onTreeItemSelect]);
31 | }
32 |
33 | disconnectedCallback() {
34 | super.disconnectedCallback();
35 | this.removeEventListener('tree-item-select', this[$onTreeItemSelect]);
36 | }
37 |
38 | render() {
39 | const { activeScene, activeEntity, scenes, graph } = this;
40 |
41 | if (!scenes) {
42 | return html``;
43 | }
44 |
45 | let sceneGraphNode;
46 | if (graph && activeScene) {
47 | sceneGraphNode = this[$createSceneGraphNode](graph, activeScene, activeEntity);
48 | }
49 |
50 | return html`
51 |
72 |
73 |
76 |
77 |
78 | ${sceneGraphNode}
79 | `;
80 | }
81 |
82 | [$createSceneGraphNode](graph, uuid, selected, depth=0) {
83 | const obj = graph[uuid];
84 |
85 | return html`
86 |
96 | ${getEntityName(obj)}
97 | ${obj.children.map(uuid => this[$createSceneGraphNode](graph, uuid, selected, depth + 1))}
98 |
99 | `;
100 | }
101 |
102 |
103 | [$onRefreshClick](e) {
104 | if (this.activeScene) {
105 | this.dispatchEvent(new CustomEvent('command', {
106 | detail: {
107 | type: 'refresh',
108 | },
109 | bubbles: true,
110 | composed: true,
111 | }));
112 | }
113 | }
114 |
115 | [$onSceneSelect](e) {
116 | this.dispatchEvent(new CustomEvent('command', {
117 | detail: {
118 | type: 'select-scene',
119 | uuid: e.target.value,
120 | },
121 | bubbles: true,
122 | composed: true,
123 | }));
124 | }
125 |
126 | [$onContentUpdate](e) {
127 | if (this.app.content.getEntityCategory(e.detail.uuid) === 'scene') {
128 | // Maybe the selector should be pulled into its own component,
129 | // this is a bit messy.
130 | this.requestUpdate();
131 | }
132 | }
133 |
134 | [$onTreeItemSelect](e) {
135 | e.stopPropagation();
136 | const treeItem = e.composedPath()[0];
137 | const uuid = treeItem.getAttribute('uuid');
138 | this.dispatchEvent(new CustomEvent('command', {
139 | detail: {
140 | type: 'select-entity',
141 | uuid,
142 | },
143 | bubbles: true,
144 | composed: true,
145 | }));
146 | }
147 | }
148 |
--------------------------------------------------------------------------------
/src/app/elements/TabBarElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | export default class TitleBarElement extends LitElement {
4 |
5 | static get properties() {
6 | return {
7 | }
8 | }
9 |
10 | render() {
11 |
12 | return html`
13 |
43 |
44 | `;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/app/elements/TitleBarElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../web_modules/lit-element.js'
2 |
3 | export default class TitleBarElement extends LitElement {
4 |
5 | static get properties() {
6 | return {
7 | title: {type: String, reflect: true}
8 | }
9 | }
10 |
11 | render() {
12 |
13 | return html`
14 |
46 |
47 | ${this.title}
48 |
49 |
50 | `;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/app/elements/shared-styles/chrome-select.js:
--------------------------------------------------------------------------------
1 | export default `
2 | /*
3 | * Styling taken from css/inspectorCommon.css from chrome devtools
4 | */
5 | select {
6 | /* Form elements do not automatically inherit font style from ancestors. */
7 | font-family: inherit;
8 | font-size: inherit;
9 | }
10 |
11 | .chrome-select {
12 | -webkit-appearance: none;
13 | -webkit-user-select: none;
14 | border: 1px solid rgba(0, 0, 0, 0.2);
15 | border-radius: 2px;
16 | color: #333;
17 | font: inherit;
18 | margin: 0;
19 | outline: none;
20 | padding-right: 20px;
21 | padding-left: 6px;
22 | background-image: -webkit-image-set(url('assets/chromeSelect.png') 1x, url('assets/chromeSelect_2x.png') 2x);
23 | background-color: hsl(0, 0%, 98%);
24 | background-position: right center;
25 | background-repeat: no-repeat;
26 | min-height: 24px;
27 | min-width: 16px;
28 | background-size: 15px;
29 | }
30 |
31 | .chrome-select:enabled:active,
32 | .chrome-select:enabled:focus,
33 | .chrome-select:enabled:hover {
34 | background-color: hsl(0, 0%, 96%);
35 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
36 | }
37 |
38 | .chrome-select:enabled:active {
39 | background-color: #f2f2f2;
40 | }
41 |
42 | .chrome-select:enabled:focus {
43 | border-color: transparent;
44 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
45 | }
46 |
47 | .chrome-select:disabled {
48 | opacity: 0.38;
49 | }
50 |
51 | .chrome-select optgroup,
52 | .chrome-select option {
53 | background-color: #EEEEEE;
54 | color: #222;
55 | }
56 | `;
57 |
--------------------------------------------------------------------------------
/src/app/elements/values/EnumValueElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../../web_modules/lit-element.js'
2 | import { ConstantTypes } from '../../constants.js';
3 | import * as constants from '../../../../web_modules/three/src/constants.js';
4 | import ChromeSelectStyle from '../shared-styles/chrome-select.js';
5 |
6 | const $onInput = Symbol('onInput');
7 |
8 | export default class EnumValueElement extends LitElement {
9 | static get properties() {
10 | return {
11 | uuid: { type: String, reflect: true },
12 | // Type of enum, e.g. "drawMode", "side", "blendMode"
13 | type: { type: String, reflect: true },
14 | // Numerical value of enum.
15 | value: { type: String, reflect: true },
16 | }
17 | }
18 |
19 | constructor() {
20 | super();
21 | this[$onInput] = this[$onInput].bind(this);
22 | }
23 |
24 | render() {
25 |
26 | if (!ConstantTypes[this.type]) {
27 | return html``;
28 | }
29 |
30 | const options = ConstantTypes[this.type].map((c,i) => {
31 | let value = constants[c];
32 |
33 | // Let 'null' be a special enum that is -1
34 | if (c === 'null') {
35 | value = -1;
36 | }
37 |
38 | if (typeof value !== 'number') {
39 | throw new Error(`invalid constant value for ${c}`);
40 | }
41 | const selected = this.value === undefined ? i === 0 : this.value === value;
42 | return html``;
43 | });
44 |
45 | return html`
46 |
53 |
54 | `;
55 | }
56 |
57 | [$onInput](e) {
58 | const selected = [...e.target.querySelectorAll('option')].filter(o => o.selected)[0];
59 | const value = +selected.value;
60 |
61 | if (value !== null) {
62 | this.dispatchEvent(new CustomEvent('change', {
63 | detail: {
64 | value,
65 | },
66 | bubbles: true,
67 | composed: true,
68 | }));
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/app/elements/values/KeyValueElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../../web_modules/lit-element.js'
2 | import { getEntityName, cssStringToHexNumber, hexNumberToCSSString } from '../../utils.js';
3 |
4 | const $onChange = Symbol('onChange');
5 | const $onDependencyClick = Symbol('onDependencyClick');
6 | const anchor = document.createElement('a');
7 | let kvIterator = 0;
8 |
9 | export default class KeyValueElement extends LitElement {
10 | static get properties() {
11 | return {
12 | uuid: { type: String, reflect: true },
13 | // @TODO probably should use less generic/collision-y
14 | // attribute names.
15 | keyName: { type: String, reflect: true, attribute: 'key-name'},
16 | value: { type: String, reflect: true },
17 | type: { type: String, reflect: true },
18 | enumType: { type: String, reflect: true, attribute: 'enum-type' },
19 | property: { type: String, reflect: true },
20 | readonly: { type: Boolean },
21 | // For number types only
22 | min: { type: Number, reflect: true },
23 | max: { type: Number, reflect: true },
24 | step: { type: Number, reflect: true },
25 | precision: { type: Number, reflect: true },
26 | // Optional data for data types (material, geometry)
27 | data: { type: Object },
28 | }
29 | }
30 |
31 | constructor() {
32 | super();
33 | // Currently no way to handle a true label/input match
34 | // across shadow boundaries? Can this be handled better?
35 | // https://github.com/whatwg/html/issues/3219
36 | this._id = `key-value-element-${kvIterator++}`;
37 | this.precision = 1;
38 | this.step = 1;
39 | this.min = -Infinity;
40 | this.max = Infinity;
41 | }
42 |
43 | onDataURLClick(e) {
44 | try {
45 | let stringified = JSON.stringify(this.value, null, 2);
46 | let blob = new Blob([stringified], { type: 'application/json' });
47 | let url = window.URL.createObjectURL(blob);
48 | anchor.setAttribute('href', url);
49 | anchor.setAttribute('target', '_window');
50 | anchor.click();
51 | // Clean it up immediately so we're not storing
52 | // large buffers for the lifetime of the tools
53 | window.URL.revokeObjectURL(url);
54 | } catch (e) {
55 | }
56 | e.preventDefault();
57 | }
58 |
59 | render() {
60 |
61 | let valueElement;
62 |
63 | if (this.value == null) {
64 | valueElement = html``;
65 | } else if (this.readonly) {
66 | valueElement = this.value;
67 | } else {
68 | switch (this.type) {
69 | case 'array':
70 | if (this.value) {
71 | valueElement = html`
72 | this.onDataURLClick(e)}>
73 | array
74 | `;
75 | }
76 | else {
77 | valueElement = html`[]`;
78 | }
79 | break;
80 | case 'enum':
81 | let enumType = this.enumType || this.property;
82 | valueElement = html``;
83 | break;
84 | case 'vec2':
85 | case 'vec3':
86 | case 'vec4':
87 | const arity = this.type === 'vec2' ? 2 :
88 | this.type === 'vec3' ? 3 : 4;
89 | valueElement = [...new Array(arity)].map((_, i) => html``);
98 | break;
99 | case 'image':
100 | case 'texture':
101 | case 'material':
102 | case 'geometry':
103 | if (this.data) {
104 | const name = getEntityName(this.data);
105 | valueElement = html`${name}
`;
106 | }
107 | break;
108 | case 'color':
109 | valueElement = html``;
110 | break;
111 | case 'boolean':
112 | valueElement = html``;
113 | break;
114 | case 'number':
115 | case 'int':
116 | case 'angle':
117 | valueElement = html``;
125 | break;
126 | case 'string':
127 | valueElement = this.value;
128 | break;
129 | default:
130 | valueElement = this.value;
131 | }
132 | }
133 |
134 | return html`
135 |
182 |
183 |
184 | ${valueElement}
185 |
186 | `;
187 | }
188 |
189 | [$onDependencyClick](e) {
190 | const target = e.composedPath()[0];
191 | const uuid = target.getAttribute('data-uuid');
192 | if (uuid !== null) {
193 | this.dispatchEvent(new CustomEvent('command', { detail: {
194 | type: 'select-entity',
195 | uuid,
196 | },
197 | bubbles: true,
198 | composed: true,
199 | }));
200 | }
201 | }
202 |
203 | [$onChange](e) {
204 |
205 | const target = e.composedPath()[0];
206 |
207 | let value = null;
208 | let dataType = null;
209 | let property = this.property;
210 | switch (this.type) {
211 | case 'color':
212 | value = target.value ? cssStringToHexNumber(target.value) : 0;
213 | dataType = 'color';
214 | break;
215 | case 'boolean':
216 | value = !!target.checked;
217 | dataType = 'boolean';
218 | break;
219 | case 'number':
220 | case 'radians':
221 | dataType = 'number';
222 | value = target.value;
223 | break;
224 | case 'enum':
225 | dataType = 'number';
226 | value = e.detail.value;
227 | break;
228 | case 'vec2':
229 | case 'vec3':
230 | case 'vec4':
231 | dataType = this.type;
232 | value = e.detail.value;
233 | // Add 'x', 'y', 'z', 'w' to the property name
234 | property = `${this.property}.${target.getAttribute('axis')}`;
235 | break;
236 | default:
237 | value = target.value;
238 | }
239 |
240 | if (value !== null) {
241 | this.dispatchEvent(new CustomEvent('command', { detail: {
242 | type: 'update-property',
243 | uuid: this.uuid,
244 | property,
245 | dataType,
246 | value,
247 | },
248 | bubbles: true,
249 | composed: true,
250 | }));
251 | }
252 | }
253 | }
254 |
--------------------------------------------------------------------------------
/src/app/elements/values/MaterialValueElement.js:
--------------------------------------------------------------------------------
1 | import { LitElement, html } from '../../../../web_modules/lit-element.js'
2 | import { hexNumberToCSSString } from '../../utils.js';
3 |
4 | const $onActivate = Symbol('onActivate');
5 |
6 | export default class MaterialValueElement extends LitElement {
7 | static get properties() {
8 | return {
9 |
10 | }
11 | }
12 |
13 | render() {
14 | const material = null;
15 |
16 | if (!material) {
17 | return null;
18 | }
19 |
20 | const color = material.color ? hexNumberToCSSString(material.color) : 'white';
21 | return html`
22 |
48 |
49 |
50 |
${material.type}
51 |