super-three 0.137.0 → 0.141.0

package/examples/jsm/node-editor/inputs/Vector2Editor.js

@@ -1,12 +1,13 @@
 import { NumberInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { Vector2Node } from '../../renderers/nodes/Nodes.js';
+import { Vector2 } from 'three';
+import { UniformNode } from 'three-nodes/Nodes.js';
 
 export class Vector2Editor extends BaseNode {
 
 	constructor() {
 
-		const node = new Vector2Node();
+		const node = new UniformNode( new Vector2() );
 
 		super( 'Vector 2', 2, node );
 

package/examples/jsm/node-editor/inputs/Vector3Editor.js

@@ -1,12 +1,13 @@
 import { NumberInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { Vector3Node } from '../../renderers/nodes/Nodes.js';
+import { Vector3 } from 'three';
+import { UniformNode } from 'three-nodes/Nodes.js';
 
 export class Vector3Editor extends BaseNode {
 
 	constructor() {
 
-		const node = new Vector3Node();
+		const node = new UniformNode( new Vector3() );
 
 		super( 'Vector 3', 3, node, 325 );
 

package/examples/jsm/node-editor/inputs/Vector4Editor.js

@@ -1,12 +1,13 @@
 import { NumberInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { Vector4Node } from '../../renderers/nodes/Nodes.js';
+import { Vector4 } from 'three';
+import { UniformNode } from 'three-nodes/Nodes.js';
 
 export class Vector4Editor extends BaseNode {
 
 	constructor() {
 
-		const node = new Vector4Node();
+		const node = new UniformNode( new Vector4() );
 
 		super( 'Vector 4', 4, node, 350 );
 
@@ -22,7 +23,7 @@ export class Vector4Editor extends BaseNode {
 		const fieldX = new NumberInput().setTagColor( 'red' ).onChange( onUpdate );
 		const fieldY = new NumberInput().setTagColor( 'green' ).onChange( onUpdate );
 		const fieldZ = new NumberInput().setTagColor( 'blue' ).onChange( onUpdate );
-		const fieldW = new NumberInput().setTagColor( 'white' ).onChange( onUpdate );
+		const fieldW = new NumberInput( 1 ).setTagColor( 'white' ).onChange( onUpdate );
 
 		this.add( new LabelElement( 'XYZW' )
 			.add( fieldX )

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

@@ -1,7 +1,7 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MeshBasicNodeMaterial } from '../../renderers/nodes/Nodes.js';
-import * as THREE from 'three';
+import { MeshBasicNodeMaterial } from 'three-nodes/Nodes.js';
+import { MathUtils } from 'three';
 
 export class BasicMaterialEditor extends BaseNode {
 
@@ -68,7 +68,7 @@ export class BasicMaterialEditor extends BaseNode {
 		// TODO: Fix on NodeMaterial System
 		material.customProgramCacheKey = () => {
 
-			return THREE.MathUtils.generateUUID();
+			return MathUtils.generateUUID();
 
 		};
 

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

@@ -1,18 +1,13 @@
-import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { ColorInput, ToggleInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { PointsNodeMaterial } from '../../renderers/nodes/Nodes.js';
+import { PointsNodeMaterial } from 'three-nodes/Nodes.js';
 import * as THREE from 'three';
 
 export class PointsMaterialEditor extends BaseNode {
 
 	constructor() {
 
-		const material = new PointsNodeMaterial( {
-			depthWrite: false,
-			transparent: true,
-			sizeAttenuation: true,
-			blending: THREE.AdditiveBlending
-		} );
+		const material = new PointsNodeMaterial();
 
 		super( 'Points Material', 1, material );
 
@@ -22,6 +17,7 @@ export class PointsMaterialEditor extends BaseNode {
 		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
 		const size = new LabelElement( 'size' ).setInput( 1 );
 		const position = new LabelElement( 'position' ).setInput( 3 );
+		const sizeAttenuation = new LabelElement( 'Size Attenuation' );
 
 		color.add( new ColorInput( material.color.getHex() ).onChange( ( input ) => {
 
@@ -37,20 +33,29 @@ export class PointsMaterialEditor extends BaseNode {
 
 		} ) );
 
+		sizeAttenuation.add( new ToggleInput( material.sizeAttenuation ).onClick( ( input ) => {
+
+			material.sizeAttenuation = input.getValue();
+			material.dispose();
+
+		} ) );
+
 		color.onConnect( () => this.update(), true );
 		opacity.onConnect( () => this.update(), true );
-		size.onConnect(() => this.update(), true );
-		position.onConnect(() => this.update(), true );
+		size.onConnect( () => this.update(), true );
+		position.onConnect( () => this.update(), true );
 
 		this.add( color )
 			.add( opacity )
 			.add( size )
-			.add( position );
+			.add( position )
+			.add( sizeAttenuation );
 
 		this.color = color;
 		this.opacity = opacity;
 		this.size = size;
 		this.position = position;
+		this.sizeAttenuation = sizeAttenuation;
 
 		this.material = material;
 

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

@@ -1,6 +1,6 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MeshStandardNodeMaterial } from '../../renderers/nodes/Nodes.js';
+import { MeshStandardNodeMaterial } from 'three-nodes/Nodes.js';
 import * as THREE from 'three';
 
 export class StandardMaterialEditor extends BaseNode {
@@ -17,6 +17,8 @@ export class StandardMaterialEditor extends BaseNode {
 		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
 		const metalness = new LabelElement( 'metalness' ).setInput( 1 );
 		const roughness = new LabelElement( 'roughness' ).setInput( 1 );
+		const emissive = new LabelElement( 'emissive' ).setInput( 3 );
+		const normal = new LabelElement( 'normal' ).setInput( 3 );
 		const position = new LabelElement( 'position' ).setInput( 3 );
 
 		color.add( new ColorInput( material.color.getHex() ).onChange( ( input ) => {
@@ -49,18 +51,24 @@ export class StandardMaterialEditor extends BaseNode {
 		opacity.onConnect( () => this.update(), true );
 		metalness.onConnect( () => this.update(), true );
 		roughness.onConnect( () => this.update(), true );
-		position.onConnect(() => this.update(), true );
+		emissive.onConnect( () => this.update(), true );
+		normal.onConnect( () => this.update(), true );
+		position.onConnect( () => this.update(), true );
 
 		this.add( color )
 			.add( opacity )
 			.add( metalness )
 			.add( roughness )
+			.add( emissive )
+			.add( normal )
 			.add( position );
 
 		this.color = color;
 		this.opacity = opacity;
 		this.metalness = metalness;
 		this.roughness = roughness;
+		this.emissive = emissive;
+		this.normal = normal;
 		this.position = position;
 
 		this.material = material;
@@ -71,7 +79,7 @@ export class StandardMaterialEditor extends BaseNode {
 
 	update() {
 
-		const { material, color, opacity, roughness, metalness, position } = this;
+		const { material, color, opacity, emissive, roughness, metalness, normal, position } = this;
 
 		color.setEnabledInputs( ! color.getLinkedObject() );
 		opacity.setEnabledInputs( ! opacity.getLinkedObject() );
@@ -79,11 +87,13 @@ export class StandardMaterialEditor extends BaseNode {
 		metalness.setEnabledInputs( ! metalness.getLinkedObject() );
 
 		material.colorNode = color.getLinkedObject();
-		material.opacityNode = opacity.getLinkedObject() || null;
+		material.opacityNode = opacity.getLinkedObject();
 		material.metalnessNode = metalness.getLinkedObject();
 		material.roughnessNode = roughness.getLinkedObject();
+		material.emissiveNode = emissive.getLinkedObject();
+		material.normalNode = normal.getLinkedObject();
 
-		material.positionNode = position.getLinkedObject() || null;
+		material.positionNode = position.getLinkedObject();
 
 		material.dispose();
 

package/examples/jsm/node-editor/math/AngleEditor.js

@@ -1,8 +1,9 @@
 import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+import { Vector3 } from 'three';
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const DEFAULT_VALUE = new Vector3Node();
+const DEFAULT_VALUE = new UniformNode( new Vector3() );
 
 export class AngleEditor extends BaseNode {
 

package/examples/jsm/node-editor/math/DotEditor.js

@@ -1,8 +1,8 @@
 import { LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
+const NULL_VALUE = new UniformNode( 0 );
 
 export class DotEditor extends BaseNode {
 

package/examples/jsm/node-editor/math/InvertEditor.js

@@ -1,8 +1,8 @@
 import { SelectInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const DEFAULT_VALUE = new FloatNode();
+const DEFAULT_VALUE = new UniformNode( 0 );
 
 export class InvertEditor extends BaseNode {
 
@@ -10,12 +10,12 @@ export class InvertEditor extends BaseNode {
 
 		const node = new MathNode( MathNode.INVERT, DEFAULT_VALUE );
 
-		super( 'Invert / Negate', 1, node );
+		super( 'Invert / Negate', 1, node, 175 );
 
 		const optionsField = new SelectInput( [
 			{ name: 'Invert ( 1 - Source )', value: MathNode.INVERT },
 			{ name: 'Negate ( - Source )', value: MathNode.NEGATE }
-		] ).onChange( () => {
+		], MathNode.INVERT ).onChange( () => {
 
 			node.method = optionsField.getValue();
 

package/examples/jsm/node-editor/math/LimiterEditor.js

@@ -1,25 +1,28 @@
-import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { SelectInput, LabelElement, Element, NumberInput } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
-
-const NULL_VALUE = new FloatNode();
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
 export class LimiterEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new UniformNode( 0 );
+
 		const node = new MathNode( MathNode.MIN, NULL_VALUE, NULL_VALUE );
 
 		super( 'Limiter', 1, node, 175 );
 
 		const methodInput = new SelectInput( [
 			{ name: 'Min', value: MathNode.MIN },
-			{ name: 'Max', value: MathNode.MAX }
+			{ name: 'Max', value: MathNode.MAX },
+			// { name: 'Clamp', value: MathNode.CLAMP }
+			{ name: 'Saturate', value: MathNode.SATURATE }
 		], MathNode.MIN );
 
 		methodInput.onChange( ( data ) => {
 
 			node.method = data.getValue();
+			bElement.setVisible( data.getValue() !== MathNode.SATURATE );
 
 			this.invalidate();
 
@@ -28,15 +31,25 @@ export class LimiterEditor extends BaseNode {
 		const aElement = new LabelElement( 'A' ).setInput( 1 );
 		const bElement = new LabelElement( 'B' ).setInput( 1 );
 
-		aElement.onConnect( () => {
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
 
-			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 

package/examples/jsm/node-editor/math/NormalizeEditor.js

@@ -1,8 +1,9 @@
 import { LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+import { Vector3 } from 'three';
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const DEFAULT_VALUE = new Vector3Node();
+const DEFAULT_VALUE = new UniformNode( new Vector3() );
 
 export class NormalizeEditor extends BaseNode {
 

package/examples/jsm/node-editor/math/OperatorEditor.js

@@ -1,13 +1,13 @@
-import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { Element, LabelElement, NumberInput, SelectInput } from '../../libs/flow.module.js';
+import { UniformNode, OperatorNode } from 'three-nodes/Nodes.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { OperatorNode, FloatNode } from '../../renderers/nodes/Nodes.js';
-
-const NULL_VALUE = new FloatNode();
 
 export class OperatorEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new UniformNode( 0 );
+
 		const node = new OperatorNode( '+', NULL_VALUE, NULL_VALUE );
 
 		super( 'Operator', 1, node, 150 );
@@ -30,18 +30,30 @@ export class OperatorEditor extends BaseNode {
 		const aElement = new LabelElement( 'A' ).setInput( 3 );
 		const bElement = new LabelElement( 'B' ).setInput( 3 );
 
-		aElement.onConnect( () => {
 
-			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
 
-			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
+
 		this.add( new Element().add( opInput ) )
 			.add( aElement )
 			.add( bElement );

package/examples/jsm/node-editor/math/PowerEditor.js

@@ -1,13 +1,12 @@
-import { LabelElement } from '../../libs/flow.module.js';
+import { LabelElement, NumberInput } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
-
-const NULL_VALUE = new FloatNode();
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
 export class PowerEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new UniformNode( 0 );
 		const node = new MathNode( MathNode.POW, NULL_VALUE, NULL_VALUE );
 
 		super( 'Power', 1, node, 175 );
@@ -15,15 +14,25 @@ export class PowerEditor extends BaseNode {
 		const aElement = new LabelElement( 'A' ).setInput( 1 );
 		const bElement = new LabelElement( 'B' ).setInput( 1 );
 
-		aElement.onConnect( () => {
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 

package/examples/jsm/node-editor/math/TrigonometryEditor.js

@@ -1,8 +1,9 @@
 import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+import { Vector3 } from 'three';
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const DEFAULT_VALUE = new Vector3Node();
+const DEFAULT_VALUE = new UniformNode( new Vector3() );
 
 export class TrigonometryEditor extends BaseNode {
 

package/examples/jsm/node-editor/procedural/CheckerEditor.js

@@ -1,14 +1,14 @@
 import { LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { CheckerNode, UVNode } from '../../renderers/nodes/Nodes.js';
+import { CheckerNode, UVNode } from 'three-nodes/Nodes.js';
 
-const DEFAULT_UV = new UVNode();
+const defaultUV = new UVNode();
 
 export class CheckerEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new CheckerNode( DEFAULT_UV );
+		const node = new CheckerNode( defaultUV );
 
 		super( 'Checker', 1, node, 200 );
 
@@ -16,7 +16,7 @@ export class CheckerEditor extends BaseNode {
 
 		field.onConnect( () => {
 
-			node.uvNode = field.getLinkedObject() || DEFAULT_UV;
+			node.uvNode = field.getLinkedObject() || defaultUV;
 
 		} );
 

package/examples/jsm/node-editor/utils/JoinEditor.js

@@ -1,8 +1,8 @@
 import { LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { JoinNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { JoinNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
+const NULL_VALUE = new UniformNode( 0 );
 
 export class JoinEditor extends BaseNode {
 

package/examples/jsm/node-editor/utils/OscillatorEditor.js

@@ -1,8 +1,8 @@
 import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { OscNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { OscNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
+const NULL_VALUE = new UniformNode( 0 );
 
 export class OscillatorEditor extends BaseNode {
 

package/examples/jsm/node-editor/utils/PreviewEditor.js

@@ -0,0 +1,166 @@
+import { OrbitControls } from 'three-addons/controls/OrbitControls.js';
+import { ViewHelper } from 'three-addons/helpers/ViewHelper.js';
+import { Element, LabelElement, SelectInput } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MeshBasicNodeMaterial, ConstNode } from 'three-nodes/Nodes.js';
+import { WebGLRenderer, PerspectiveCamera, Scene, Mesh, DoubleSide, SphereGeometry, BoxGeometry, PlaneGeometry, TorusKnotGeometry } from 'three';
+
+const nullValue = new ConstNode( 0 );
+
+const sceneDict = {};
+
+const getScene = ( name ) => {
+
+	let scene = sceneDict[ name ];
+
+	if ( scene === undefined ) {
+
+		scene = new Scene();
+
+		if ( name === 'box' ) {
+
+			const box = new Mesh( new BoxGeometry( 1.3, 1.3, 1.3 ) );
+			scene.add( box );
+
+		} else if ( name === 'sphere' ) {
+
+			const sphere = new Mesh( new SphereGeometry( 1, 32, 16 ) );
+			scene.add( sphere );
+
+		} else if ( name === 'plane' || name === 'sprite' ) {
+
+			const plane = new Mesh( new PlaneGeometry( 2, 2 ) );
+			scene.add( plane );
+
+
+		} else if ( name === 'torus' ) {
+
+			const torus = new Mesh( new TorusKnotGeometry( .7, .1, 100, 16 ) );
+			scene.add( torus );
+
+		}
+
+		sceneDict[ name ] = scene;
+
+	}
+
+	return scene;
+
+};
+
+export class PreviewEditor extends BaseNode {
+
+	constructor() {
+
+		const width = 300;
+		const height = 300;
+
+		super( 'Preview', 0, null, height );
+
+		const material = new MeshBasicNodeMaterial();
+		material.colorNode = nullValue;
+		material.side = DoubleSide;
+		material.transparent = true;
+
+		const previewElement = new Element();
+		previewElement.dom.style[ 'padding-top' ] = 0;
+		previewElement.dom.style[ 'padding-bottom' ] = 0;
+
+		const sceneInput = new SelectInput( [
+			{ name: 'Box', value: 'box' },
+			{ name: 'Sphere', value: 'sphere' },
+			{ name: 'Plane', value: 'plane' },
+			{ name: 'Sprite', value: 'sprite' },
+			{ name: 'Torus', value: 'torus' }
+		], 'box' );
+
+		const inputElement = new LabelElement( 'Input' ).setInput( 4 ).onConnect( () => {
+
+			material.colorNode = inputElement.getLinkedObject() || nullValue;
+			material.dispose();
+
+		}, true );
+
+		const canvas = document.createElement( 'canvas' );
+		canvas.style.position = 'absolute';
+		previewElement.dom.append( canvas );
+		previewElement.setHeight( height );
+
+		const renderer = new WebGLRenderer( {
+			canvas,
+			alpha: true
+		} );
+
+		renderer.autoClear = false;
+		renderer.setSize( width, height, true );
+		renderer.setPixelRatio( window.devicePixelRatio );
+
+		const camera = new PerspectiveCamera( 45, width / height, 0.1, 100 );
+		camera.aspect = width / height;
+		camera.updateProjectionMatrix();
+		camera.position.set( - 2, 2, 2 );
+		camera.lookAt( 0, 0, 0 );
+
+		const controls = new OrbitControls( camera, previewElement.dom );
+		controls.enableKeys = false;
+		controls.update();
+
+		const viewHelper = new ViewHelper( camera, previewElement.dom );
+
+		this.sceneInput = sceneInput;
+		this.viewHelper = viewHelper;
+		this.material = material;
+		this.camera = camera;
+		this.renderer = renderer;
+
+		this.add( inputElement )
+			.add( new LabelElement( 'Object' ).add( sceneInput ) )
+			.add( previewElement );
+
+	}
+
+	setEditor( editor ) {
+
+		super.setEditor( editor );
+
+		this.updateAnimationRequest();
+
+	}
+
+	updateAnimationRequest() {
+
+		if ( this.editor !== null ) {
+
+			requestAnimationFrame( () => this.update() );
+
+		}
+
+	}
+
+	update() {
+
+		const { viewHelper, material, renderer, camera, sceneInput } = this;
+
+		this.updateAnimationRequest();
+
+		const sceneName = sceneInput.getValue();
+
+		const scene = getScene( sceneName );
+		const mesh = scene.children[ 0 ];
+
+		mesh.material = material;
+
+		if ( sceneName === 'sprite' ) {
+
+			mesh.lookAt( camera.position );
+
+		}
+
+		renderer.clear();
+		renderer.render( scene, camera );
+
+		viewHelper.render( renderer );
+
+	}
+
+}