NodeEditor: Adds support for exporting Node Chaining, Materials and Objects3D (individually)

examples/jsm/node-editor/NodeEditor.js

@@ -33,6 +33,7 @@ import { PointsEditor } from './scene/PointsEditor.js';
 import { MeshEditor } from './scene/MeshEditor.js';
 import { FileEditor } from './core/FileEditor.js';
 import { FileURLEditor } from './core/FileURLEditor.js';
+import { exportJSON } from './NodeEditorUtils.js';
 import { EventDispatcher } from 'three';
 
 Styles.icons.unlink = 'ti ti-unlink';
@@ -540,14 +541,7 @@ export class NodeEditor extends EventDispatcher {
 
 		saveButton.onClick( () => {
 
-			const json = JSON.stringify( this.canvas.toJSON() );
-
-			const a = document.createElement( 'a' );
-			const file = new Blob( [ json ], { type: 'text/plain' } );
-
-			a.href = URL.createObjectURL( file );
-			a.download = 'node_editor.json';
-			a.click();
+			exportJSON( this.canvas.toJSON(), 'node_editor' );
 
 		} );
 

examples/jsm/node-editor/NodeEditorUtils.js

@@ -0,0 +1,12 @@
+export const exportJSON = ( object, name ) => {
+
+	const json = JSON.stringify( object );
+
+	const a = document.createElement( 'a' );
+	const file = new Blob( [ json ], { type: 'text/plain' } );
+
+	a.href = URL.createObjectURL( file );
+	a.download = name + '.json';
+	a.click();
+
+};

examples/jsm/node-editor/core/BaseNode.js

@@ -31,24 +31,33 @@ export class BaseNode extends Node {
 			.setSerializable( false )
 			.setOutput( outputLength );
 
-		const closeButton = new ButtonInput().onClick( () => {
+		const contextButton = new ButtonInput().onClick( () => {
 
 			context.open();
 
 		} ).setIcon( 'ti ti-dots' );
 
-		const context = new ContextMenu( this.dom );
-		context.add( new ButtonInput( 'Remove' ).setIcon( 'ti ti-trash' ).onClick( () => {
+		const onAddButtons = () => {
+
+			context.removeEventListener( 'show', onAddButtons );
+
+			context.add( new ButtonInput( 'Remove' ).setIcon( 'ti ti-trash' ).onClick( () => {
+
+				this.dispose();
 
-			this.dispose();
+			} ) );
 
-		} ) );
+		};
+
+		const context = new ContextMenu( this.dom );
+		context.addEventListener( 'show', onAddButtons );
 
 		this.title = title;
-		this.closeButton = closeButton;
+
+		this.contextButton = contextButton;
 		this.context = context;
 
-		title.addButton( closeButton );
+		title.addButton( contextButton );
 
 		this.add( title );
 

examples/jsm/node-editor/materials/BasicMaterialEditor.js

@@ -1,14 +1,14 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
-import { BaseNode } from '../core/BaseNode.js';
+import { MaterialEditor } from './MaterialEditor.js';
 import { MeshBasicNodeMaterial } from 'three/nodes';
 
-export class BasicMaterialEditor extends BaseNode {
+export class BasicMaterialEditor extends MaterialEditor {
 
 	constructor() {
 
 		const material = new MeshBasicNodeMaterial();
 
-		super( 'Basic Material', 1, material );
+		super( 'Basic Material', material );
 
 		this.setWidth( 300 );
 
@@ -42,8 +42,6 @@ export class BasicMaterialEditor extends BaseNode {
 		this.opacity = opacity;
 		this.position = position;
 
-		this.material = material;
-
 		this.update();
 
 	}

examples/jsm/node-editor/materials/MaterialEditor.js

@@ -0,0 +1,25 @@
+import { BaseNode } from '../core/BaseNode.js';
+import { ButtonInput } from '../../libs/flow.module.js';
+import { exportJSON } from '../NodeEditorUtils.js';
+
+export class MaterialEditor extends BaseNode {
+
+	constructor( name, material, width = 300 ) {
+
+		super( name, 1, material, width );
+
+		this.context.add( new ButtonInput( 'Export' ).setIcon( 'ti ti-download' ).onClick( () => {
+
+			exportJSON( this.material.toJSON(), 'node_material' );
+
+		} ) );
+
+	}
+
+	get material() {
+
+		return this.value;
+
+	}
+
+}

examples/jsm/node-editor/materials/PointsMaterialEditor.js

@@ -1,15 +1,15 @@
 import { ColorInput, ToggleInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
-import { BaseNode } from '../core/BaseNode.js';
+import { MaterialEditor } from './MaterialEditor.js';
 import { PointsNodeMaterial } from 'three/nodes';
 import * as THREE from 'three';
 
-export class PointsMaterialEditor extends BaseNode {
+export class PointsMaterialEditor extends MaterialEditor {
 
 	constructor() {
 
 		const material = new PointsNodeMaterial();
 
-		super( 'Points Material', 1, material );
+		super( 'Points Material', material );
 
 		this.setWidth( 300 );
 
@@ -57,8 +57,6 @@ export class PointsMaterialEditor extends BaseNode {
 		this.position = position;
 		this.sizeAttenuation = sizeAttenuation;
 
-		this.material = material;
-
 		this.update();
 
 	}

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

@@ -1,14 +1,14 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
-import { BaseNode } from '../core/BaseNode.js';
+import { MaterialEditor } from './MaterialEditor.js';
 import { MeshStandardNodeMaterial } from 'three/nodes';
 
-export class StandardMaterialEditor extends BaseNode {
+export class StandardMaterialEditor extends MaterialEditor {
 
 	constructor() {
 
 		const material = new MeshStandardNodeMaterial();
 
-		super( 'Standard Material', 1, material );
+		super( 'Standard Material', material );
 
 		this.setWidth( 300 );
 
@@ -70,8 +70,6 @@ export class StandardMaterialEditor extends BaseNode {
 		this.normal = normal;
 		this.position = position;
 
-		this.material = material;
-
 		this.update();
 
 	}