three.js/examples/jsm/node-editor/materials/StandardMaterialEditor.js

import { ObjectNode } from '../core/ObjectNode.js';
import { LabelElement } from '../../libs/flow.module.js';
import { MeshStandardNodeMaterial, ColorNode, FloatNode } from '../../renderers/nodes/Nodes.js';
import * as THREE from 'three';

const NULL_COLOR = new ColorNode();
const NULL_FLOAT = new FloatNode();

export class StandardMaterialEditor extends ObjectNode {

	constructor() {

		const material = new MeshStandardNodeMaterial();

		super( 'Standard Material', 0, material );

		this.title.setStyle( 'blue' );

		this.setWidth( 300 );

		const color = new LabelElement( 'color' ).setInput( 3 );
		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
		const metalness = new LabelElement( 'metalness' ).setInput( 1 );
		const roughness = new LabelElement( 'roughness' ).setInput( 1 );

		color.onConnect( () => this.update(), true );
		opacity.onConnect( () => this.update(), true );
		metalness.onConnect( () => this.update(), true );
		roughness.onConnect( () => this.update(), true );

		this.add( color )
			.add( opacity )
			.add( metalness )
			.add( roughness );

		this.color = color;
		this.opacity = opacity;
		this.metalness = metalness;
		this.roughness = roughness;

		this.material = material;

		this.update();

	}

	update() {

		const { material, color, opacity, roughness, metalness } = this;

		material.colorNode = color.linkedExtra || NULL_COLOR;

		material.opacityNode = opacity.linkedExtra || null;
		material.transparent = opacity.linkedExtra ? true : false;

		material.metalnessNode = metalness.linkedExtra || NULL_FLOAT;
		material.roughnessNode = roughness.linkedExtra || NULL_FLOAT;

		material.dispose();

		// TODO: Fix on NodeMaterial System
		material.customProgramCacheKey = () => {

			return THREE.MathUtils.generateUUID();

		};

	}

}