Playground: Fix imports. (#28987)

playground/NodeEditor.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import * as Nodes from 'three/nodes';
+import * as Nodes from 'three/tsl';
 import { Canvas, CircleMenu, ButtonInput, StringInput, ContextMenu, Tips, Search, Loader, Node, TreeViewNode, TreeViewInput, Element } from 'flow';
 import { FileEditor } from './editors/FileEditor.js';
 import { exportJSON } from './NodeEditorUtils.js';
@@ -58,6 +58,7 @@ export class NodeEditor extends THREE.EventDispatcher {
 		this._initExamplesContext();
 		this._initShortcuts();
 		this._initParams();
+
 	}
 
 	setSize( width, height ) {
@@ -282,7 +283,7 @@ export class NodeEditor extends THREE.EventDispatcher {
 			this.splitscreen = ! this.splitscreen;
 			splitscreenButton.setIcon( this.splitscreen ? 'ti ti-layout-sidebar-right-collapse' : 'ti ti-layout-sidebar-right-expand' );
 
-		});
+		} );
 
 		menuButton.onClick( () => this.nodesContext.open() );
 		examplesButton.onClick( () => this.examplesContext.open() );

playground/NodeEditorUtils.js

@@ -1,5 +1,5 @@
 import { StringInput, NumberInput, ColorInput, Element, LabelElement } from 'flow';
-import { string, float, vec2, vec3, vec4, color } from 'three/nodes';
+import { string, float, vec2, vec3, vec4, color } from 'three/tsl';
 import { setInputAestheticsFromType, setOutputAestheticsFromType } from './DataTypeLib.js';
 
 export function exportJSON( object, name ) {

playground/editors/BasicMaterialEditor.js

@@ -1,6 +1,6 @@
 import { ColorInput, SliderInput, LabelElement } from 'flow';
 import { MaterialEditor } from './MaterialEditor.js';
-import { MeshBasicNodeMaterial } from 'three/nodes';
+import { MeshBasicNodeMaterial } from 'three/tsl';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 
 export class BasicMaterialEditor extends MaterialEditor {

playground/editors/ColorEditor.js

@@ -1,7 +1,7 @@
 import { ColorInput, StringInput, NumberInput, LabelElement, Element } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
 import { Color } from 'three';
-import { UniformNode } from 'three/nodes';
+import { UniformNode } from 'three/tsl';
 
 export class ColorEditor extends BaseNodeEditor {
 

playground/editors/CustomNodeEditor.js

@@ -1,7 +1,7 @@
 import { LabelElement } from 'flow';
 import { Color, Vector2, Vector3, Vector4 } from 'three';
-import * as Nodes from 'three/nodes';
-import { uniform } from 'three/nodes';
+import * as Nodes from 'three/tsl';
+import { uniform } from 'three/tsl';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
 import { createInputLib } from '../NodeEditorUtils.js';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';

playground/editors/FileEditor.js

@@ -1,6 +1,6 @@
 import { StringInput, Element } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { arrayBuffer, NodeUtils } from 'three/nodes';
+import { arrayBuffer, NodeUtils } from 'three/tsl';
 
 export class FileEditor extends BaseNodeEditor {
 

playground/editors/JavaScriptEditor.js

@@ -1,6 +1,6 @@
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
 import { CodeEditorElement } from '../elements/CodeEditorElement.js';
-import { js } from 'three/nodes';
+import { js } from 'three/tsl';
 
 export class JavaScriptEditor extends BaseNodeEditor {
 

playground/editors/JoinEditor.js

@@ -1,6 +1,6 @@
 import { LabelElement } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { JoinNode, UniformNode, float } from 'three/nodes';
+import { JoinNode, UniformNode, float } from 'three/tsl';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 
 const NULL_VALUE = new UniformNode( 0 );

playground/editors/NodePrototypeEditor.js

@@ -1,6 +1,6 @@
 import { JavaScriptEditor } from './JavaScriptEditor.js';
 import { ScriptableEditor } from './ScriptableEditor.js';
-import { scriptable } from 'three/nodes';
+import { scriptable } from 'three/tsl';
 
 const defaultCode = `// Addition Node Example
 // Enjoy! :)

playground/editors/PointsMaterialEditor.js

@@ -1,6 +1,6 @@
 import { ColorInput, ToggleInput, SliderInput, LabelElement } from 'flow';
 import { MaterialEditor } from './MaterialEditor.js';
-import { PointsNodeMaterial } from 'three/nodes';
+import { PointsNodeMaterial } from 'three/tsl';
 import * as THREE from 'three';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 

playground/editors/PreviewEditor.js

@@ -2,9 +2,8 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { ViewHelper } from 'three/addons/helpers/ViewHelper.js';
 import { Element, LabelElement, SelectInput } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { MeshBasicNodeMaterial, vec4 } from 'three/nodes';
-import { PerspectiveCamera, Scene, Mesh, DoubleSide, SphereGeometry, BoxGeometry, PlaneGeometry, TorusKnotGeometry } from 'three';
-import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+import { MeshBasicNodeMaterial, vec4 } from 'three/tsl';
+import { PerspectiveCamera, Scene, Mesh, DoubleSide, SphereGeometry, BoxGeometry, PlaneGeometry, TorusKnotGeometry, WebGPURenderer } from 'three';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 
 const sceneDict = {};

playground/editors/ScriptableEditor.js

@@ -1,7 +1,7 @@
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
 import { CodeEditorElement } from '../elements/CodeEditorElement.js';
 import { disposeScene, createElementFromJSON, isGPUNode, onValidType } from '../NodeEditorUtils.js';
-import { global, scriptable, js, scriptableValue } from 'three/nodes';
+import { global, scriptable, js, scriptableValue } from 'three/tsl';
 import { getColorFromType, setInputAestheticsFromType, setOutputAestheticsFromType } from '../DataTypeLib.js';
 
 const defaultTitle = 'Scriptable';

playground/editors/SliderEditor.js

@@ -1,6 +1,6 @@
 import { ButtonInput, SliderInput, NumberInput, LabelElement, Element } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { float } from 'three/nodes';
+import { float } from 'three/tsl';
 
 export class SliderEditor extends BaseNodeEditor {
 

playground/editors/SplitEditor.js

@@ -1,6 +1,6 @@
 import { LabelElement } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { nodeObject, float } from 'three/nodes';
+import { nodeObject, float } from 'three/tsl';
 import { setInputAestheticsFromType, setOutputAestheticsFromType } from '../DataTypeLib.js';
 
 export class SplitEditor extends BaseNodeEditor {

playground/editors/StandardMaterialEditor.js

@@ -1,6 +1,6 @@
 import { ColorInput, SliderInput, LabelElement } from 'flow';
 import { MaterialEditor } from './MaterialEditor.js';
-import { MeshStandardNodeMaterial } from 'three/nodes';
+import { MeshStandardNodeMaterial } from 'three/tsl';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 
 export class StandardMaterialEditor extends MaterialEditor {

playground/editors/SwizzleEditor.js

@@ -1,7 +1,7 @@
 import { LabelElement } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
 import { createElementFromJSON } from '../NodeEditorUtils.js';
-import { split, float } from 'three/nodes';
+import { split, float } from 'three/tsl';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 
 export class SwizzleEditor extends BaseNodeEditor {

playground/editors/TextureEditor.js

@@ -1,7 +1,7 @@
 import { LabelElement, ToggleInput, SelectInput } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
 import { onValidNode, onValidType } from '../NodeEditorUtils.js';
-import { texture, uv } from 'three/nodes';
+import { texture, uv } from 'three/tsl';
 import { Texture, TextureLoader, RepeatWrapping, ClampToEdgeWrapping, MirroredRepeatWrapping } from 'three';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 

playground/editors/TimerEditor.js

@@ -1,6 +1,6 @@
 import { NumberInput, LabelElement, Element, ButtonInput } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { timerLocal } from 'three/nodes';
+import { timerLocal } from 'three/tsl';
 
 export class TimerEditor extends BaseNodeEditor {
 

playground/editors/UVEditor.js

@@ -1,6 +1,6 @@
 import { SelectInput, LabelElement } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { uv } from 'three/nodes';
+import { uv } from 'three/tsl';
 
 export class UVEditor extends BaseNodeEditor {
 

playground/index.html

@@ -97,9 +97,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "../examples/jsm/",
-					"three/nodes": "../examples/jsm/nodes/Nodes.js",
 					"flow": "./libs/flow.module.js"
 				}
 			}
@@ -109,8 +109,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { NodeEditor } from './NodeEditor.js';
@@ -136,7 +134,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setAnimationLoop( animate );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.toneMapping = THREE.LinearToneMapping;