preview node to modify the background's scene + nodes checks compatibility before connecting + setting up background scene to expose modifiable properties

Author: bandinopla

src/Editor.ts

@@ -282,7 +282,8 @@ export class Editor {
                     this.availableOutlets = outlets.filter( outlet=>{
 
                         return (outlet.isInput!=this.selectedOutlet!.isInput ) 
-                                && !outlet.connectedTo
+                                //&& !outlet.connectedTo
+                                && this.selectedOutlet!.isCompatible( outlet )
                                 && ( outlet.owner !== this.selectedOutlet!.owner )
                                 ; // TODO: check for outlet TYPE compatibility 
                     });

src/ThreeScene.ts

@@ -6,6 +6,11 @@ export class ThreeScene {
     readonly renderer:THREE.WebGLRenderer;
     readonly objHolder:THREE.Object3D;
     private clock:THREE.Clock;
+    readonly ambientLight:THREE.AmbientLight;
+    private objs:THREE.Mesh[]=[]
+    readonly pointLight:THREE.PointLight;
+    private mouse:THREE.Vector2 = new THREE.Vector2();
+    rotationSpeed = 1;
 
     constructor() {
         this.scene = new THREE.Scene();
@@ -18,26 +23,70 @@ export class ThreeScene {
         this.objHolder = new THREE.Object3D();
         this.clock = new THREE.Clock();
 
+        this.ambientLight = new THREE.AmbientLight(0xffffff,0.1);
+        this.pointLight = new THREE.PointLight(0xffffff,5,15);
+
+        window.addEventListener('mousemove', (event) => {
+            // Normalize mouse coordinates to [-1, 1]
+            this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+        });
+
         this.buildScene()
     }
 
     protected buildScene() {
         const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-        const material = new THREE.MeshBasicMaterial( { color: 0x000000 } );
+        const material = new THREE.MeshStandardMaterial( { color: 0xcccccc } );
         const cube = new THREE.Mesh( geometry, material ); 
 
         this.objHolder.add(cube);
         this.scene.add( this.objHolder )
 
-        this.camera.position.z = 5;
+        this.camera.position.z = 4;
         this.camera.position.x = -4;
+
+        this.scene.add( this.ambientLight );
+        this.objs.push( cube );
+
+        const dirLight = new THREE.DirectionalLight()
+        this.scene.add( dirLight );
+
+        this.scene.add( this.pointLight );
+
+        this.pointLight.intensity = 3
+        this.pointLight.position.z = 3
+    }
+
+    private updateLightPosition() {
+        // Create a Vector3 with normalized mouse coordinates
+        const vector = new THREE.Vector3(this.mouse.x, this.mouse.y, 0.5); // Z = 0.5 in NDC (midway in the frustum)
+    
+        // Unproject the vector to world space using the camera
+        vector.unproject(this.camera);
+    
+        // Calculate the direction from the camera to the unprojected point
+        const dir = vector.sub(this.camera.position).normalize();
+    
+        // We want the light to be at a fixed Z in world space (e.g., Z = 2)
+        const fixedZ = 2;
+    
+        // Calculate the distance from the camera to the plane at fixedZ
+        const distance = (fixedZ - this.camera.position.z) / dir.z;
+    
+        // Calculate the world position at the fixed Z plane
+        const pos = this.camera.position.clone().add(dir.multiplyScalar(distance));
+    
+        // Update the light's position
+        this.pointLight.position.set(pos.x, pos.y, fixedZ);
     }
 
     render() {
 
         const delta = this.clock.getDelta()
-        this.objHolder.rotateY(delta)
-        this.objHolder.rotateX(delta)
+        this.updateLightPosition();
+        this.objHolder.rotateY(delta*this.rotationSpeed)
+        this.objHolder.rotateX(delta*this.rotationSpeed)
         this.renderer.render( this.scene, this.camera );
     }
 }

src/core/IOutlet.ts

@@ -13,4 +13,6 @@ export interface IOutlet {
     get owner():Node
     get size():OutletSize; // the output will be vec1 to 4 always... or in case of materials, we can say 5.
     get color():FillStyle
+
+    isCompatible( other:IOutlet ):boolean
 }

src/core/isOutlet.ts

@@ -1,10 +1,19 @@
-import { IOutlet } from "./IOutlet";
+import { Node } from "../nodes/Node";
+import { IOutlet, OutletSize } from "./IOutlet";
 
-export function isOutlet( obj:any ): obj is IOutlet {
-    return (
-        typeof obj === 'object' &&
-        obj !== null &&
-        'isInput' in obj &&
-        typeof obj.isInput === 'boolean' 
-      );
+function isOutletSize(value: unknown): value is OutletSize {
+    return typeof value === 'number' && [1, 2, 3, 4, 5].includes(value);
+}
+
+
+// Type guard for IOutlet
+export function isOutlet(obj: unknown): obj is IOutlet {
+    return typeof obj === 'object' && obj !== null &&
+    'isInput' in obj && typeof obj.isInput === 'boolean' && 
+    'globalX' in obj && typeof obj.globalX === 'number' && 
+    'globalY' in obj && typeof obj.globalY === 'number' &&  
+    'owner' in obj && obj.owner instanceof Node &&
+    'size' in obj && isOutletSize(obj.size) &&
+    'color' in obj 
+    && 'isCompatible' in obj && typeof obj.isCompatible == 'function'
 }

src/main.ts

@@ -1,6 +1,7 @@
 
 import { Editor } from './Editor';  
 import { UVNode } from './nodes/attribute/UVNode';
+import { ScenePreviewNode } from './nodes/preview/ScenePreview';
 import { MeshStandardNode } from './nodes/shader/MeshStandardNode';
 import { ImageTextureNode } from './nodes/texture/ImageTextureNode'; 
 import './style.css' 
@@ -27,6 +28,11 @@ win4.x =500;
 win4.y = 200;
 editor.add( win4 );
 
+let win5 = new ScenePreviewNode( editor.scene );
+win5.x =600;
+win5.y = 200;
+editor.add( win5 );
+
 editor.start();
 
 

src/nodes/Node.ts

@@ -9,6 +9,7 @@ import { LayoutElement } from "../layout/LayoutElement";
 export class Node extends LayoutElement { 
 
     editor!:Editor;
+    canBeDeleted = true;
 
     x = 0
     y = 0

src/nodes/preview/ScenePreview.ts

@@ -0,0 +1,19 @@
+ 
+import { Theme } from "../../colors/Theme";
+import { DraggableValue } from "../../components/DraggableValue";
+import { MaterialProperty } from "../../properties/MaterialProperty";
+import { WinNode } from "../WinNode";
+import { ThreeScene } from "../../ThreeScene";
+
+export class ScenePreviewNode extends WinNode {
+    constructor( protected scene:ThreeScene ) {
+ 
+        super("Scene Preview", Theme.config.groupOutput, [
+            new DraggableValue("Ambient light", true, 0, 10, 0.1),
+            new DraggableValue("Rotation speed", true, 0, 2, 0.1),
+            new MaterialProperty(".material [ 0 ] ")
+        ]);
+
+        this.canBeDeleted = false;
+    }
+}

src/properties/MaterialProperty.ts

@@ -0,0 +1,14 @@
+import { TextLabel } from "../components/TextLabel";
+import { Row } from "../layout/Layout";
+import { Input } from "./Input";
+
+export class MaterialProperty extends Input {
+    constructor( name:string ) {
+        super(5); 
+
+        this.layout = new Row([
+            new TextLabel( name ),  
+        ] ); 
+        this.xPadding = 10
+    } 
+}

src/properties/OutletProperty.ts

@@ -34,6 +34,10 @@ export class OutletProperty extends LayoutElement implements IOutlet
         ][ size ]
     }
 
+    isCompatible(other: IOutlet): boolean {
+        return this.size == 5 || other.size==5? this.size==other.size : true
+    }
+
     connectedTo?: IOutlet | undefined;
 
     get owner(): Node {