NodeEditor: Node-based for native objects

[sunag]

Introduction

After many attempts to create an API to define a NodeMaterial from editor to some specific Mesh I created a system so that any Three.js object could be used as Node/*Editor and that NodeEditor could recognize and handle conflicts through the API.

This way we can bring all the native elements of Three.js: Geometry, Camera, Animations, etc

https://raw.githack.com/sunag/three.js/dev-scene-apply/examples/?q=playground#webgl_materials_nodes_playground

Errors viewer

Cable color by Node type

ContextMenu opens on Top or Right

If it detects that it has reached the edge of the screen.

Node creator input / Search

Use this tool to create a new Node or to bring a Mesh from Three.js Scene to NodeEditor

This contribution is funded by Google via Igalia.

[sunag]

It is too an step to we can be a JSNodeBuilder to create CPU codes in JS using NodeEditor.

[looeee]

I'm having trouble adding any nodes - when I type a node then click on the node name nothing happens.

[sunag]

Hmm.. I will fix this, you can press enter too

[looeee]

Great, seems to be working again now. This is a lot of fun to play with :)

Is there a reason why Color doesn't accept inputs? I wanted to try hooking: timer -> sin -> color.r, for example.

[sunag]

@looeee Still I need to add JoinNode and SplitNode for NodeEditor. I must add this next week

[mrdoob]

I guess we should rename this from webgl_materials_nodes_playground to webgl_nodes_playground at this point? 😅

[sunag]

@looeee I add SplitNode and JoinNode to Editor.

[mrdoob]

Thanks!

[jo-chemla]

Quick note: I often stumble on this issue and then spend some time trying to find the url of threejs node-material editor, which isn't really advertised. It is called playground and is available here, hope it is useful to anyone including my future self!

https://threejs.org/playground/

[mrdoob]

The link is back 👋 d3646a4

[jo-chemla]

Thanks, did not know it was there in the first place!