Playground: UVEditor and fix selection of nodes by keyboard (#26349)

* cleanup

* order by frequency of use

* Improve new node selected by keyboard

* cleanup

* fix opacity

examples/jsm/renderers/webgl/nodes/WebGLNodeBuilder.js

@@ -126,7 +126,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 				node: material.colorNode,
 				nodeType: 'vec4',
 				source: 'vec4 diffuseColor = vec4( diffuse, opacity );',
-				target: 'vec4 diffuseColor = %RESULT%;'
+				target: 'vec4 diffuseColor = %RESULT%; diffuseColor.a *= opacity;',
 			} ) );
 
 		}

playground/NodeEditor.js

@@ -682,7 +682,7 @@ export class NodeEditor extends THREE.EventDispatcher {
 
 				const visible = buttonLabel.indexOf( value ) !== - 1;
 
-				if ( visible && button.parent !== null ) {
+				if ( visible && button.children.length === 0 ) {
 
 					nodeButtonsVisible.push( button );
 

playground/Nodes.json

@@ -421,6 +421,12 @@
 					"name": "UV",
 					"icon": "chart-treemap",
 					"children": [
+						{
+							"name": "UV",
+							"icon": "chart-treemap",
+							"nodeType": "vec2",
+							"editorClass": "UVEditor"
+						},
 						{
 							"name": "Matcap UV",
 							"icon": "chart-treemap",
@@ -432,12 +438,6 @@
 							"icon": "chart-treemap",
 							"nodeType": "vec1",
 							"shaderNode": "pointUV"
-						},
-						{
-							"name": "UV",
-							"icon": "chart-treemap",
-							"nodeType": "vec2",
-							"editorClass": "UVEditor"
 						}
 					]
 				},

playground/editors/UVEditor.js

@@ -12,9 +12,7 @@ export class UVEditor extends BaseNodeEditor {
 
 		this.setOutputLength( 2 );
 
-		const options = Array.from( Array( 4 ).keys() ).map( String );
-
-		const optionsField = new SelectInput( options, 0 ).onChange( () => {
+		const optionsField = new SelectInput( [ '0', '1', '2', '3' ], 0 ).onChange( () => {
 
 			node.index = Number( optionsField.getValue() );