Skip to content

Home

Jump to bottom
bandinopla edited this page Apr 11, 2025 · 5 revisions

[!] Work in progress | Alpha state

Visual node editor, inspired by Blender's shader editor, is a tool to visually build Three.js materials using Three.js-Shading-Language. The socket proximity detection was inspired by Kennedy Richard's Nodezator's node editor

It is currently in development, and hoping to welcome developers from the comunity to jump in and add new nodes. Credit will be given to everyone!

How does it work?

When you use the app: You create the nodes and the output will be a javascript file that will contain the nodes you created + the node setup in a comment, in case you want to edit the nodes after saving. In your real life project you will import the materials from this js, that will export an array of the materials. You will do something like...

import { materials } from "./your-saved-file.js";
const material1 = materials[0]; //<-- this is a THREE.Material

Overview

Concepts / Building blocks

  • Node : they live in src/nodes they are the objects in charge of defining a node and whatever that node does. A Node is not a 1:1 recreation of a TSL node, a node can do a bunch of things, even use many nodes at the same time and build complex structures in TSL.
  • Property : Nodes are a bag filled with properties. They live in src/properties and each property is in charge of one aspect of the node.
  • Outlet: the input or output socket of a node. A node can have many of both. An outlet is a property that handles the connection between the outside and the node.
  • Component: The most basic UI unit. A button, a TextLabel, etc...
  • Script: Since this exports a javascript, a src/export/Script object is created the moment of the export and each node will be asked to "write" on this script whatever it needs to function. Then this script is covnerted to a string and downloaded as the .js file. The layout info is stored in this file as a comment.
  • ThreeScene: object in charge of the preview scene running in the background that allows us to see how the material will look.
Clone this wiki locally