Skip to content

NodeMaterial: Playground r2 #22868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Nov 23, 2021
Merged

NodeMaterial: Playground r2 #22868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
43b4aa0
update lib -> many improvements
sunag Nov 21, 2021
5e673a7
add examples
sunag Nov 21, 2021
16d8ce9
Add OscNode: Sine, Square, Triangle, Sawtooth
sunag Nov 21, 2021
ca63e5a
fix SplitNode if input is a float
sunag Nov 21, 2021
97ca8e0
Add, PI2, PI_HALF, RECIPROCAL_PI2, abs, fract, round, sin, cos nodes
sunag Nov 21, 2021
6424972
Add OscNode to lib
sunag Nov 21, 2021
5294f9b
node-editor r2
sunag Nov 22, 2021
b85199c
fix circular reference and mobile context menu
sunag Nov 22, 2021
89322dd
update lib
sunag Nov 22, 2021
e9205e3
update lib
sunag Nov 22, 2021
08928f9
update lib (2)
sunag Nov 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,092 changes: 719 additions & 373 deletions examples/jsm/libs/flow.module.js
View file
Open in desktop

Large diffs are not rendered by default.

287 changes: 248 additions & 39 deletions examples/jsm/node-editor/NodeEditor.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions examples/jsm/node-editor/accessors/NormalEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { ObjectNode } from '../core/ObjectNode.js';
import { SelectInput, LabelElement } from '../../libs/flow.module.js';
import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
import { NormalNode } from '../../renderers/nodes/Nodes.js';

export class NormalEditor extends ObjectNode {
Expand All @@ -8,7 +7,7 @@ export class NormalEditor extends ObjectNode {

const node = new NormalNode();

super( 'Normal', 3, node );
super( 'Normal', 3, node, 250 );

this.title.setStyle( 'red' );

Expand Down
5 changes: 2 additions & 3 deletions examples/jsm/node-editor/accessors/PositionEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { ObjectNode } from '../core/ObjectNode.js';
import { SelectInput, LabelElement } from '../../libs/flow.module.js';
import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
import { PositionNode } from '../../renderers/nodes/Nodes.js';

export class PositionEditor extends ObjectNode {
Expand All @@ -8,7 +7,7 @@ export class PositionEditor extends ObjectNode {

const node = new PositionNode();

super( 'Position', 3, node );
super( 'Position', 3, node, 250 );

this.title.setStyle( 'red' );

Expand Down
5 changes: 2 additions & 3 deletions examples/jsm/node-editor/accessors/UVEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { ObjectNode } from '../core/ObjectNode.js';
import { SelectInput, LabelElement } from '../../libs/flow.module.js';
import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
import { UVNode } from '../../renderers/nodes/Nodes.js';

export class UVEditor extends ObjectNode {
Expand All @@ -8,7 +7,7 @@ export class UVEditor extends ObjectNode {

const node = new UVNode();

super( 'UV', 2, node );
super( 'UV', 2, node, 250 );

this.title.setStyle( 'red' );

Expand Down
34 changes: 0 additions & 34 deletions examples/jsm/node-editor/core/ObjectNode.js
View file
Open in desktop

This file was deleted.

43 changes: 43 additions & 0 deletions examples/jsm/node-editor/display/BlendEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';

const NULL_VALUE = new FloatNode();
const ONE_VALUE = new FloatNode( 1 );

export class BlendEditor extends ObjectNode {

constructor() {

const node = new MathNode( MathNode.MIX, NULL_VALUE, NULL_VALUE, ONE_VALUE );

super( 'Blend', 3, node );

const aElement = new LabelElement( 'Base' ).setInput( 3 );
const bElement = new LabelElement( 'Blend' ).setInput( 3 );
const cElement = new LabelElement( 'Opacity' ).setInput( 1 );

aElement.onConnect( () => {

node.aNode = aElement.linkedExtra || NULL_VALUE;

} );

bElement.onConnect( () => {

node.bNode = bElement.linkedExtra || NULL_VALUE;

} );

cElement.onConnect( () => {

node.cNode = cElement.linkedExtra || ONE_VALUE;

} );

this.add( aElement )
.add( bElement )
.add( cElement );

}

}
1 change: 1 addition & 0 deletions examples/jsm/node-editor/examples/animate-uv.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"objects":{"325":{"x":1718,"y":136,"width":"300px","elements":[326,328,329,330,331],"id":325,"type":"StandardMaterialEditor"},"326":{"style":"blue","title":"Standard Material","id":326,"type":"TitleElement"},"328":{"inputLength":3,"links":[394],"label":"Color","id":328,"type":"LabelElement"},"329":{"inputLength":1,"label":"Opacity","id":329,"type":"LabelElement"},"330":{"inputLength":1,"label":"Metalness","id":330,"type":"LabelElement"},"331":{"inputLength":1,"label":"Roughness","id":331,"type":"LabelElement"},"337":{"x":155,"y":230,"width":"250px","elements":[338,344,345,342],"id":337,"type":"TimerEditor"},"338":{"outputLength":1,"title":"Timer","icon":"ti ti-clock","id":338,"type":"TitleElement"},"340":{"value":16.881,"id":340,"type":"NumberInput"},"341":{"value":0.04,"id":341,"type":"NumberInput"},"342":{"inputs":[343],"id":342,"type":"Element"},"343":{"value":"Reset","id":343,"type":"ButtonInput"},"344":{"inputs":[340],"label":"Value","id":344,"type":"LabelElement"},"345":{"inputs":[341],"label":"Scale","id":345,"type":"LabelElement"},"353":{"x":202,"y":79,"width":"250px","elements":[354,357],"id":353,"type":"UVEditor"},"354":{"outputLength":2,"style":"red","title":"UV","id":354,"type":"TitleElement"},"356":{"options":["1","2"],"value":"0","id":356,"type":"SelectInput"},"357":{"inputs":[356],"label":"Channel","id":357,"type":"LabelElement"},"361":{"x":612,"y":102,"width":"250px","elements":[362,367,365,366],"id":361,"type":"OperatorEditor"},"362":{"outputLength":1,"title":"Operator","id":362,"type":"TitleElement"},"364":{"options":[{"name":"+ Addition","value":"+"},{"name":"- Subtraction","value":"-"},{"name":"* Multiplication","value":"*"},{"name":"/ Division","value":"/"}],"value":"+","id":364,"type":"SelectInput"},"365":{"inputLength":3,"links":[354],"label":"A","id":365,"type":"LabelElement"},"366":{"inputLength":3,"links":[338],"label":"B","id":366,"type":"LabelElement"},"367":{"inputs":[364],"label":"Operator","id":367,"type":"LabelElement"},"373":{"x":1047,"y":158,"width":"250px","elements":[374,379,377,378],"id":373,"type":"OperatorEditor"},"374":{"outputLength":1,"title":"Operator","id":374,"type":"TitleElement"},"376":{"options":[{"name":"+ Addition","value":"+"},{"name":"- Subtraction","value":"-"},{"name":"* Multiplication","value":"*"},{"name":"/ Division","value":"/"}],"value":"*","id":376,"type":"SelectInput"},"377":{"inputLength":3,"links":[362],"label":"A","id":377,"type":"LabelElement"},"378":{"inputLength":3,"links":[386],"label":"B","id":378,"type":"LabelElement"},"379":{"inputs":[376],"label":"Operator","id":379,"type":"LabelElement"},"385":{"x":601,"y":345,"width":"250px","elements":[386,389],"id":385,"type":"FloatEditor"},"386":{"outputLength":1,"title":"Float","icon":"ti ti-box-multiple-1","id":386,"type":"TitleElement"},"388":{"value":24.12,"id":388,"type":"NumberInput"},"389":{"inputs":[388],"label":"Value","id":389,"type":"LabelElement"},"393":{"x":1402,"y":14,"width":"200px","elements":[394,396],"id":393,"type":"CheckerEditor"},"394":{"outputLength":1,"title":"Checker","id":394,"type":"TitleElement"},"396":{"inputLength":2,"links":[374],"label":"UV","id":396,"type":"LabelElement"}},"nodes":[325,337,353,361,373,385,393],"id":0,"type":"Canvas"}
1 change: 1 addition & 0 deletions examples/jsm/node-editor/examples/fake-top-light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"objects":{"575":{"x":885,"y":119,"width":"300px","elements":[576,578,579,580,581],"id":575,"type":"StandardMaterialEditor"},"576":{"style":"blue","title":"Standard Material","id":576,"type":"TitleElement"},"578":{"inputLength":3,"links":[595],"label":"Color","id":578,"type":"LabelElement"},"579":{"inputLength":1,"label":"Opacity","id":579,"type":"LabelElement"},"580":{"inputLength":1,"label":"Metalness","id":580,"type":"LabelElement"},"581":{"inputLength":1,"label":"Roughness","id":581,"type":"LabelElement"},"587":{"x":73,"y":296,"width":"","elements":[588,593],"id":587,"type":"Vector3Editor"},"588":{"outputLength":3,"title":"Vector 3","icon":"ti ti-box-multiple-3","id":588,"type":"TitleElement"},"590":{"value":0,"id":590,"type":"NumberInput"},"591":{"value":1,"id":591,"type":"NumberInput"},"592":{"value":0,"id":592,"type":"NumberInput"},"593":{"inputs":[590,591,592],"label":"Values","id":593,"type":"LabelElement"},"594":{"x":541,"y":199,"width":"200px","elements":[595,597,598],"id":594,"type":"DotEditor"},"595":{"outputLength":1,"title":"Dot Product","id":595,"type":"TitleElement"},"597":{"inputLength":3,"links":[600],"label":"A","id":597,"type":"LabelElement"},"598":{"inputLength":3,"links":[588],"label":"B","id":598,"type":"LabelElement"},"599":{"x":106,"y":158,"width":"250px","elements":[600,603],"id":599,"type":"NormalEditor"},"600":{"outputLength":3,"style":"red","title":"Normal","id":600,"type":"TitleElement"},"602":{"options":[{"name":"Local","value":"local"},{"name":"World","value":"world"},{"name":"View","value":"view"}],"value":"world","id":602,"type":"SelectInput"},"603":{"inputs":[602],"label":"Scope","id":603,"type":"LabelElement"}},"nodes":[575,587,594,599],"id":0,"type":"Canvas"}
1 change: 1 addition & 0 deletions examples/jsm/node-editor/examples/oscillator-color.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"objects":{"131":{"x":1602,"y":-3,"width":"300px","elements":[132,134,135,136,137],"id":131,"type":"StandardMaterialEditor"},"132":{"style":"blue","title":"Standard Material","id":132,"type":"TitleElement"},"134":{"inputLength":3,"links":[170],"label":"Color","id":134,"type":"LabelElement"},"135":{"inputLength":1,"label":"Opacity","id":135,"type":"LabelElement"},"136":{"inputLength":1,"label":"Metalness","id":136,"type":"LabelElement"},"137":{"inputLength":1,"label":"Roughness","id":137,"type":"LabelElement"},"143":{"x":123,"y":207,"width":"250px","elements":[144,150,151,148],"id":143,"type":"TimerEditor"},"144":{"outputLength":1,"title":"Timer","icon":"ti ti-clock","id":144,"type":"TitleElement"},"146":{"value":7.286,"id":146,"type":"NumberInput"},"147":{"value":0.37,"id":147,"type":"NumberInput"},"148":{"inputs":[149],"id":148,"type":"Element"},"149":{"value":"Reset","id":149,"type":"ButtonInput"},"150":{"inputs":[146],"label":"Value","id":150,"type":"LabelElement"},"151":{"inputs":[147],"label":"Scale","id":151,"type":"LabelElement"},"159":{"x":485,"y":94,"width":"250px","elements":[160,164,163],"id":159,"type":"OscillatorEditor"},"160":{"outputLength":1,"title":"Oscillator","id":160,"type":"TitleElement"},"162":{"options":[{"name":"Sine","value":"sine"},{"name":"Square","value":"square"},{"name":"Triangle","value":"triangle"},{"name":"Sawtooth","value":"sawtooth"}],"value":"sine","id":162,"type":"SelectInput"},"163":{"inputLength":1,"links":[144],"label":"Time","id":163,"type":"LabelElement"},"164":{"inputs":[162],"label":"Method","id":164,"type":"LabelElement"},"169":{"x":1208,"y":66,"width":"","elements":[170,172,173,174],"id":169,"type":"BlendEditor"},"170":{"outputLength":3,"title":"Blend","id":170,"type":"TitleElement"},"172":{"inputLength":3,"links":[180],"label":"Base","id":172,"type":"LabelElement"},"173":{"inputLength":3,"links":[200],"label":"Blend","id":173,"type":"LabelElement"},"174":{"inputLength":1,"links":[160],"label":"Opacity","id":174,"type":"LabelElement"},"179":{"x":797,"y":-55,"width":"","elements":[180,187,188,189],"id":179,"type":"ColorEditor"},"180":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":180,"type":"TitleElement"},"182":{"value":16580865,"id":182,"type":"ColorInput"},"183":{"value":"#FD0101","id":183,"type":"StringInput"},"184":{"min":0,"max":1,"step":0.01,"value":0.996,"id":184,"type":"NumberInput"},"185":{"min":0,"max":1,"step":0.01,"value":0.004,"id":185,"type":"NumberInput"},"186":{"min":0,"max":1,"step":0.01,"value":0.004,"id":186,"type":"NumberInput"},"187":{"inputs":[182],"label":"Value","id":187,"type":"LabelElement"},"188":{"inputs":[183],"label":"Hex","id":188,"type":"LabelElement"},"189":{"inputs":[184,185,186],"label":"RGB","id":189,"type":"LabelElement"},"199":{"x":810,"y":220,"width":"","elements":[200,207,208,209],"id":199,"type":"ColorEditor"},"200":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":200,"type":"TitleElement"},"202":{"value":19455,"id":202,"type":"ColorInput"},"203":{"value":"#4BFF00","id":203,"type":"StringInput"},"204":{"min":0,"max":1,"step":0.01,"value":0,"id":204,"type":"NumberInput"},"205":{"min":0,"max":1,"step":0.01,"value":0.298,"id":205,"type":"NumberInput"},"206":{"min":0,"max":1,"step":0.01,"value":1,"id":206,"type":"NumberInput"},"207":{"inputs":[202],"label":"Value","id":207,"type":"LabelElement"},"208":{"inputs":[203],"label":"Hex","id":208,"type":"LabelElement"},"209":{"inputs":[204,205,206],"label":"RGB","id":209,"type":"LabelElement"}},"nodes":[131,143,159,169,179,199],"id":0,"type":"Canvas"}
1 change: 1 addition & 0 deletions examples/jsm/node-editor/examples/rim.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"objects":{"52":{"x":1873,"y":248,"width":"300px","elements":[53,55,56,57,58],"id":52,"type":"StandardMaterialEditor"},"53":{"style":"blue","title":"Standard Material","id":53,"type":"TitleElement"},"55":{"inputLength":3,"links":[103],"label":"Color","id":55,"type":"LabelElement"},"56":{"inputLength":1,"label":"Opacity","id":56,"type":"LabelElement"},"57":{"inputLength":1,"label":"Metalness","id":57,"type":"LabelElement"},"58":{"inputLength":1,"links":[177],"label":"Roughness","id":58,"type":"LabelElement"},"64":{"x":506,"y":328,"width":"200px","elements":[65,67,68],"id":64,"type":"DotEditor"},"65":{"outputLength":1,"title":"Dot Product","id":65,"type":"TitleElement"},"67":{"inputLength":3,"links":[85],"label":"A","id":67,"type":"LabelElement"},"68":{"inputLength":3,"links":[73],"label":"B","id":68,"type":"LabelElement"},"72":{"x":33,"y":453,"width":"300px","elements":[73,78],"id":72,"type":"Vector3Editor"},"73":{"outputLength":3,"title":"Vector 3","icon":"ti ti-box-multiple-3","id":73,"type":"TitleElement"},"75":{"value":0,"id":75,"type":"NumberInput"},"76":{"value":0,"id":76,"type":"NumberInput"},"77":{"value":1.54,"id":77,"type":"NumberInput"},"78":{"inputs":[75,76,77],"label":"Values","id":78,"type":"LabelElement"},"84":{"x":75,"y":278,"width":"250px","elements":[85,88],"id":84,"type":"NormalEditor"},"85":{"outputLength":3,"style":"red","title":"Normal","id":85,"type":"TitleElement"},"87":{"options":[{"name":"Local","value":"local"},{"name":"World","value":"world"},{"name":"View","value":"view"}],"value":"view","id":87,"type":"SelectInput"},"88":{"inputs":[87],"label":"Scope","id":88,"type":"LabelElement"},"92":{"x":846,"y":353,"width":"300px","elements":[93,97,96],"id":92,"type":"InvertEditor"},"93":{"outputLength":1,"title":"Invert / Negate","id":93,"type":"TitleElement"},"95":{"options":[{"name":"Invert ( 1 - Source )","value":"invert"},{"name":"Negate ( - Source )","value":"negate"}],"value":"invert","id":95,"type":"SelectInput"},"96":{"inputLength":1,"links":[65],"label":"Source","id":96,"type":"LabelElement"},"97":{"inputs":[95],"label":"Method","id":97,"type":"LabelElement"},"102":{"x":1459,"y":146,"width":"300px","elements":[103,105,106,107],"id":102,"type":"BlendEditor"},"103":{"outputLength":3,"title":"Blend","id":103,"type":"TitleElement"},"105":{"inputLength":3,"links":[113],"label":"Base","id":105,"type":"LabelElement"},"106":{"inputLength":3,"links":[133],"label":"Blend","id":106,"type":"LabelElement"},"107":{"inputLength":1,"links":[161],"label":"Opacity","id":107,"type":"LabelElement"},"112":{"x":846,"y":17,"width":"300px","elements":[113,120,121,122],"id":112,"type":"ColorEditor"},"113":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":113,"type":"TitleElement"},"115":{"value":5058,"id":115,"type":"ColorInput"},"116":{"value":"#13C200","id":116,"type":"StringInput"},"117":{"min":0,"max":1,"step":0.01,"value":0,"id":117,"type":"NumberInput"},"118":{"min":0,"max":1,"step":0.01,"value":0.075,"id":118,"type":"NumberInput"},"119":{"min":0,"max":1,"step":0.01,"value":0.761,"id":119,"type":"NumberInput"},"120":{"inputs":[115],"label":"Value","id":120,"type":"LabelElement"},"121":{"inputs":[116],"label":"Hex","id":121,"type":"LabelElement"},"122":{"inputs":[117,118,119],"label":"RGB","id":122,"type":"LabelElement"},"132":{"x":844,"y":189,"width":"300px","elements":[133,140,141,142],"id":132,"type":"ColorEditor"},"133":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":133,"type":"TitleElement"},"135":{"value":16711680,"id":135,"type":"ColorInput"},"136":{"value":"#FF0000","id":136,"type":"StringInput"},"137":{"min":0,"max":1,"step":0.01,"value":1,"id":137,"type":"NumberInput"},"138":{"min":0,"max":1,"step":0.01,"value":0,"id":138,"type":"NumberInput"},"139":{"min":0,"max":1,"step":0.01,"value":0,"id":139,"type":"NumberInput"},"140":{"inputs":[135],"label":"Value","id":140,"type":"LabelElement"},"141":{"inputs":[136],"label":"Hex","id":141,"type":"LabelElement"},"142":{"inputs":[137,138,139],"label":"RGB","id":142,"type":"LabelElement"},"160":{"x":1241,"y":361,"width":"200px","elements":[161,163,164],"id":160,"type":"PowerEditor"},"161":{"outputLength":1,"title":"Power","id":161,"type":"TitleElement"},"163":{"inputLength":1,"links":[93],"label":"A","id":163,"type":"LabelElement"},"164":{"inputLength":1,"links":[169],"label":"B","id":164,"type":"LabelElement"},"168":{"x":852,"y":503,"width":"250px","elements":[169,172],"id":168,"type":"FloatEditor"},"169":{"outputLength":1,"title":"Float","icon":"ti ti-box-multiple-1","id":169,"type":"TitleElement"},"171":{"value":1.32,"id":171,"type":"NumberInput"},"172":{"inputs":[171],"label":"Value","id":172,"type":"LabelElement"},"176":{"x":1482,"y":449,"width":"300px","elements":[177,187,183,184,185],"id":176,"type":"SliderEditor"},"177":{"outputLength":1,"title":"Slider","icon":"ti ti-adjustments-horizontal","id":177,"type":"TitleElement"},"179":{"min":0,"max":1,"value":1,"id":179,"type":"SliderInput"},"181":{"value":0,"id":181,"type":"NumberInput"},"182":{"value":1,"id":182,"type":"NumberInput"},"183":{"inputs":[181],"label":"Min.","id":183,"type":"LabelElement"},"184":{"inputs":[182],"label":"Max.","id":184,"type":"LabelElement"},"185":{"inputs":[186],"id":185,"type":"Element"},"186":{"value":"More","id":186,"type":"ButtonInput"},"187":{"inputs":[179],"label":"Value","id":187,"type":"LabelElement"}},"nodes":[52,64,72,84,92,102,112,132,160,168,176],"id":0,"type":"Canvas"}
76 changes: 70 additions & 6 deletions examples/jsm/node-editor/inputs/ColorEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { ObjectNode } from '../core/ObjectNode.js';
import { ColorInput, LabelElement } from '../../libs/flow.module.js';
import { ObjectNode, ColorInput, StringInput, NumberInput, LabelElement } from '../../libs/flow.module.js';
import { ColorNode } from '../../renderers/nodes/Nodes.js';

export class ColorEditor extends ObjectNode {
Expand All @@ -12,15 +11,80 @@ export class ColorEditor extends ObjectNode {

this.title.setIcon( 'ti ti-palette' );

const colorField = new ColorInput( 0xFFFFFF ).onChange( ( input ) => {
const updateFields = ( editing ) => {

const hex = parseInt( input.getValue() );
const value = node.value;
const hexValue = value.getHex();

node.value.setHex( hex );
if ( editing !== 'color' ) {

field.setValue( hexValue, false );

}

if ( editing !== 'hex' ) {

hexField.setValue( '#' + hexValue.toString( 16 ).toUpperCase().padEnd( 6, '0' ), false );

}

if ( editing !== 'rgb' ) {

fieldR.setValue( value.r.toFixed( 3 ), false );
fieldG.setValue( value.g.toFixed( 3 ), false );
fieldB.setValue( value.b.toFixed( 3 ), false );

}

};

const field = new ColorInput( 0xFFFFFF ).onChange( () => {

node.value.setHex( field.getValue() );

updateFields( 'picker' );

} );

this.add( new LabelElement( 'Value' ).add( colorField ) );
const hexField = new StringInput().onChange( () => {

const value = hexField.getValue();

if ( value.indexOf( '#' ) === 0 ) {

const hexStr = value.substr( 1 ).padEnd( 6, '0' );

node.value.setHex( parseInt( hexStr, 16 ) );

updateFields( 'hex' );

}

} );

hexField.addEventListener( 'blur', () => {

updateFields();

} );

const onChangeRGB = () => {

node.value.setRGB( fieldR.getValue(), fieldG.getValue(), fieldB.getValue() );

updateFields( 'rgb' );

};

const fieldR = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
const fieldG = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
const fieldB = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );

this.add( new LabelElement( 'Value' ).add( field ).setSerializable( false ) )
.add( new LabelElement( 'Hex' ).add( hexField ).setSerializable( false ) )
.add( new LabelElement( 'RGB' ).add( fieldR ).add( fieldG ).add( fieldB ) );

updateFields();

}

Expand Down
Loading