These are the steps I followed with success:

install node.js 0.6.x (http://nodejs.org/)
install npm (https://github.com/isaacs/npm)
install coffeescript (http://jashkenas.github.com/coffee-script/)
install jade globally: sudo npm install -g jade
cd in ThreeNodes
npm install -d
cd in ThreeNodes

_node server.js_

this one gave me an error:
Error: Can't find module '...\ThreeNodes.js\src\scripts\server\server'

There is a file in the server directory called server.coffee
I can compile and watch it with
coffee -o src/ -cw src/
but it just took to another error.

What am I missing here?

Are these not implemented yet? Can't figure out how to get a texture linked. Screenshot please. Also a shadow demo would be nice.

"Live demo: http://idflood.github.com/ThreeNodes.js/" should be http://idflood.github.**io**/ThreeNodes.js/"

More extensible and will make the whole feel more like a real application. It will also be possible to create an "example" menu with many subitems.

I ran:
node server.js build

It seemed to work fine until it got to "Starting to Optimize the javascripts..."

Error Output:

/root/threenodes/ThreeNodes.js/node_modules/requirejs/bin/r.js:14153
                throw new Error(errorMsg);
                      ^
Error: TypeError: Object function () {
            //A version of a require function that passes a moduleName
            //value for items that may need to
            //look up paths relative to the moduleName
            var args = aps.call(arguments, 0), lastArg;
            if (enableBuildCallback &&
                    isFunction((lastArg = args[args.length - 1]))) {
                lastArg.__requireJsBuild = true;
            }
            args.push(relMap);
            return func.apply(null, args);
        } has no method 'nameToUrl'
In module tree:
    threenodes/App
      order

    at Object.load (eval at <anonymous> (/root/threenodes/ThreeNodes.js/node_modules/requirejs/bin/r.js:13687:38))

I have done everything in the "how to install" and everything seems to went very well, but when I try to run localhost:3000 by chrome, this is what I get.

It's not showing properly. What can I do to fix that?

This is mainly to do with the fact that threenodes is not up to date with threejs anymore. Many things have changes, like WebGLRenderer attributes, way you update vertices in a geometry. There are many subtle differences. Try running the following:

add CubeGeometry
add Mesh
add Scene
add WebGLRenderer
connect out of CubeGeometry to geometry in of Mesh
connect out of Mesh to children in of Scene
connect out of Scene to scene of WebGLRenderer

due to sensible defaults you have coded into all of these blocks, you should be able to see a red wire-frame cube, this doesn't happen though.

I got this error node server.js and realized that Connect is also a dependency

node.js:134
throw e; // process.nextTick error, or 'error' event on first tick
^
TypeError: Object # has no method 'static'
at Object. (/Users/mackoo/dev/checkouts3d/ThreeNodes.js/server.js:41:13)
at Module._compile (module.js:402:26)
at Object..js (module.js:408:10)
at Module.load (module.js:334:31)
at Function._load (module.js:293:12)
at Array. (module.js:421:10)
at EventEmitter._tickCallback (node.js:126:26)

My fix was to run "npm install connect"

Error: Forbidden
    at SendStream.error (i:\JavaScript\three.js\ThreeNodes.js\node_modules\express\node_modules\send\lib\send.js:142:16)
    at SendStream.pipe (i:\JavaScript\three.js\ThreeNodes.js\node_modules\express\node_modules\send\lib\send.js:307:52)
    at Object.static (i:\JavaScript\three.js\ThreeNodes.js\node_modules\express\node_modules\connect\lib\middleware\static.js:78:8)
    at next (i:\JavaScript\three.js\ThreeNodes.js\node_modules\express\node_modules\connect\lib\proto.js:190:15)
    at module.exports (i:\JavaScript\three.js\ThreeNodes.js\node_modules\stylus\lib\middleware.js:181:46)
    at i:\JavaScript\three.js\ThreeNodes.js\node_modules\stylus\lib\middleware.js:215:20
    at Object.oncomplete (fs.js:297:15)

Have no idea why. It is Win7. No write protection. Fresh version.

Have you considered implementing a threaded scheduler for your blocks to allow multiple "process" cycles to happen concurrently? This would potentially give you several times the current performance.

node.js on windows 7 64bit
build process is successful but when invoking command node server.js the following error is thrown:

Error: Use CoffeeScript.register() or require the coffee-script/register module
to require .coffee.md files.
at Object._base.(anonymous function) [as .coffee](C:UserslaurenceDesktopT
hreeNodesnode_modulescoffee-scriptlibcoffee-scriptcoffee-script.js:195:17)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\Users\laurence\Desktop\ThreeNodes\server.js:9:3)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3

This would be nice so that you can better document what's going on.

This is looking really good! Any chance of getting a live link sometime soon?

Also, just wondering why it depends on node.js...? Wouldn't it be better if it was a standalone html5/javascript app? That way you could even host it at github pages.

I am following the instructions regarding compilation:

npm install -d
grunt build

That result in error:

C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/resolver.rb:369:in resolve': Could not find gem 'compass (= 1.0.0.alpha.19) x86-mingw32' in the gems available on this machine. (Bundler::GemNotFoun from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/resolver.rb:167:instart'
from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/resolver.rb:129:in resolve' from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/definition.rb:193:inresolve'
from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/definition.rb:132:in specs' from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/definition.rb:177:inspecs_for'
from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/definition.rb:166:in requested_specs' from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/environment.rb:18:inrequested_specs'
from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/runtime.rb:13:in setup' from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler.rb:122:insetup'
from C:/Ruby22/lib/ruby/gems/2.2.0/gems/bundler-1.8.5/lib/bundler/setup.rb:18:in <top (required)>' from c:/Ruby22/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:inrequire'
from c:/Ruby22/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'

Any idea how to proceed from this point?

It might be nice to be able to group entities and make the whole a new first-class citizen in the list at the right. If people can work with composed blocks they can make very complicated things fast.

When I follow the instructions in the Readme.md and solution posted in Issue #37, the package can be correctly installed, but there are still errors telling me either
"there's no createServer function of the express object" or
"app does not have use method". How to resolve these issues?

Quite often I encounter this error in Chrome when clicking on some of the properties on the node. Not sure why, and I end up refreshing the page..

have you considered switching to
https://github.com/squarefeet/ShaderParticleEngine ?
or something else that is more performant than SPARKS in its current state
I've observed that in the current state threenodes can't handle more than 2k or so particles without noticeable drop in frame rate. Compare that to 60FPS on ShaderParticleEngine demo with 360k particles. This is not criticism to threenodes, simply a fact of life when dealing with a single-threaded nature of javascript. Highest count of animated particles using pure JS solution i've seen at interactive rates was about 20k using webworkers (updates happen at a different rate than rendering actually).

Would it be difficult to implement a javascript code exporter? It could be useful for embedding scene information into another, and allow the code to be further tweak modified by hand.

Btw, looks like lots of nice progress coming along :D

How can I implement that exported code into html? Should I load it in three.js as ordinary JSON file (exported f.e. from Blender or three.js/editor)?

I just throw them in, ignore them if you wish to. OpenID access would be nice, this would make it possible to have people store their own schemes.

so http://idflood.github.com/ThreeNodes.js/
just under "vvvv "clone" in javascript/webgl "

it would be make easier to find

Keep up the good work! If you have time, this is another feature request. For now all processing "happens in the browser". It would be cool to be able to address a backend server that executes commands when a person clicks "Execute". The dataprocessing part is then separated from the GUI part.

This means that on the server the node.js server requires from a backend server the following API:

• getlist (which returns possible nodes with their port names)
• start node
• connect port a on node 1 and b on node 2
• run node (individually or all at once)

This would allow someone to design the control flow of anything which would be still valid after the browser has closed. Think of a node which searches for "picture Obama" with output to an "email" node which sends the picture subsequently. Everything becomes really operational.

I was watching the new Unreal Engine and came back to see how threenodes was doing ; while playing around with some examples, I wondered wat was the default value of an input field of a node.

I dwelved in the amazing code and hacked this feature whilst learning coffee.
It is untested so it does not deserve a PR but you can see it in the Network graph.

Enjoy the video, it has some very interesting features in it !

When I use the slider to scale down to about 75% percent and drag the node somewhere else it will snap to another position. The problem occurs in both firefox and chrome.

It is very easy to select text in the node graph by mistake. An easy way to disable this is with css:
-moz-user-select: none;
-webkit-user-select: none;

It's me again.

I'm working on customizing the ThreeNodes system for a major Fortune 50 company.

I was wondering what it would take to give the nodes some rules about what other nodes it can connect to.

So, for instance. We don't want a "number" node being connected to a "string" node.

Can you provide any insight into how we could possibly get that working?

Thanks.

PS. Still want to use it in a game, but have been sidetracked...

It will become possible to load an example by default, without worrying about popup blocker and it may also facilitate the future "viewer".

Hey,

it's been awhile since I took a look. I pulled down and was trying to run the latest version, but noticed that you removed the index.html file from the public folder that let you test it without compiling the whole thing with node.js. Do you think you could add that bit back? It made it so easy to test and play with.

Thanks,
Chance

I've never got this finished, but it clearly is the most important feature missing right now I think.

I've the idea to implement a specific xml file format. Then later there would be the possibility to add support for various other formats like the vvvv projects files and others.

Hi, thanks for this fantastic project.

I am looking into the feature where I can control the camera with mouse, such as this:
http://www.guoshihui.net/webglcontrol/control.html

I tried by several ways, the closest attempt is to edit the WebglBase.coffee file like the following:
http://jsfiddle.net/SyYDQ/

But there is one important line missing, that's
@controls.addEventListener "change", render

If I add this, it will say "render" is not defined, but I am a bit loss which render function to call. Can you give me some hints on this issue? Many thanks!

OS: Windows 7 Enterprise SP1
Architecture: 64-bit
Node: v8.1.2
npm: 5.0.3
ruby: 2.4.1p111 (2017-03-22 revision 58053) [x64-mingw32]
python: 2.7.13
grunt-cli: v1.2.0
compass: 1.0.3 (Polaris)

I followed the steps mentioned in Development Setup but I'm getting errors.

The steps mentiond in the above link are incomplete. While installing compass, we first need to install ruby. Then upon npm install -d, the console throws some node-gyp errors. Even grunt build is not working, throws some node-sass errors (I tried npm install -g node-sass too).

I tried npm install node-gyp -g but then there are some other errors.

Here are some relevant console logs: (###: path hidden for privacy reasons)

gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe` fail
ed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (###\AppData\Roaming\npm\nod
e_modules\npm\node_modules\node-gyp\lib\build.js:258:23)
gyp ERR! stack     at emitTwo (events.js:125:13)
gyp ERR! stack     at ChildProcess.emit (events.js:213:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_proces
s.js:197:12)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "###\\AppData
\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "re
build"
gyp ERR! cwd ###\node_modules\weak
gyp ERR! node -v v8.1.3
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
npm info lifecycle [email protected]~install: Failed to exec install script
npm WARN [email protected] No license field.
npm WARN The package grunt-contrib-clean is included as both a dev and productio
n dependency.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     ###\AppData\Roaming\npm-cache\_logs\2017-07-11T09_00_08_3
15Z-debug.log

>> Local Npm module "grunt-contrib-requirejs" not found. Is it installed?
Loading "sass.js" tasks...ERROR
>> Error: Missing binding ###\node_modules\node-sass\vendor\
win32-x64-57\binding.node
>> Node Sass could not find a binding for your current environment: Windows 64-b
it with Node.js 8.x
>>
>> Found bindings for the following environments:
>>   - Windows 64-bit with Node.js 6.x
>>
>> This usually happens because your environment has changed since running `npm
install`.
>> Run `npm rebuild node-sass --force` to build the binding for your current env
ironment.
Warning: Task "sass" not found. Use --force to continue.

Aborted due to warnings.

It would be helpful if someone could provide concrete steps to install ThreeNodes.js development setup in the Windows environment.

Cc: @idflood

Trackball Camera
Orthographic Camera
Text Geometry
Canvas Renderer
Shadows
Hotkeys
Expressions in Inputs
Bevels
Camera Switching
Export Scene to Three.js code
Hide UI
Full Screen (Can do F11)
IOS/Android Touch Support
Colorized Nodes
Boolean Objects
Physics
Thumbnails on nodes

I'm sure I'll think of more.

I cannot change the node name by double clicking. For some reason I do get to see the input field but than it breaks. Happens in firefox. Not tested in chrome yet.

When you are dragging a line from one point to another and move your mouse to the edge of the window it will break.

http://pastebin.com/raw.php?i=wFv6RvxE

All that appears when I open http://localhost:8042 is "Cannot GET /"

I have done some changes on UI.coffee (and on the templates too) to disable some features on Sidebar and Timeline. And everytime I add an Node to container this appears (browser console):

Uncaught ReferenceError: anim is not defined Node.js:315

And I can't add other Node from the same type, eg: add "Number" can't add again impossible do drag&drop.

I have looked into the code and the line that throws the error is res = anim("nid-" + @get("nid"), @fields.inputs) from models/Node.coffee:

createAnimContainer: () =>
      res = anim("nid-" + @get("nid"), @fields.inputs)
      # enable track animation only for number/boolean
      for f of @fields.inputs
        field = @fields.inputs[f]
        if field.is_animation_property() == false
          @disable_property_anim(field)
      return res

Where is the anim(..)function? I can't find anywhere...

Thanks for the help :)

First of all, this problem/question could be a little noob or even stupid, and I apologize for that, If it's the case you could delete the issue and send me an e-mail.

So, the problem it's that after I have done some changes on files .styl and .jade to make changes on my version of ThreeNodes.js, it still appear some CSS options (style="..." to be more precise) that I can't change. For example:

<ul class="menubar ui-layout-north ui-menubar ui-widget-header ui-helper-clearfix ui-layout-pane ui-layout-pane-north" id="main-menu-bar" role="menubar" style="position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; z-index: 0; height: 22px; display: block; visibility: visible;">
  <li class="ui-menubar-item" role="presentation">
    <a href="#File" class="ui-button ui-widget ui-button-text-only ui-menubar-link" role="menuitem" aria-haspopup="true"><span class="ui-button-text">File</span></a>
    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-menu-0" role="menu" tabindex="0" style="display: none;" aria-hidden="true" aria-expanded="false">
      <li class="ui-menu-item" role="presentation"><a data-event="ClearWorkspace" href="#NewFile" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-0-0">New</a></li>
      <li class="ui-menu-item" role="presentation"><a data-event="OpenFile" href="#OpenFile" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-0-1">Open</a></li>
      <li class="ui-menu-item" role="presentation"><a data-event="SaveFile" href="#SaveFile" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-0-2">Save</a></li>
      <li class="ui-menu-item" role="presentation"><a data-event="ExportCode" href="#ExportCode" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-0-3">Export to code</a></li>
      <li class="ui-menu-item" role="presentation"><a data-eventdata="exported-image.png" data-event="ExportImage" href="#ExportImage" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-0-4">Export image</a></li>
    </ul>
  </li>
  <li class="ui-menubar-item" role="presentation">
    <a href="#Edit" tabindex="-1" class="ui-button ui-widget ui-button-text-only ui-menubar-link" role="menuitem" aria-haspopup="true"><span class="ui-button-text">Edit</span></a>
    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-menu-1" role="menu" tabindex="0" style="display: none;" aria-hidden="true" aria-expanded="false">
      <li class="ui-menu-item" role="presentation"><a data-event="GroupSelectedNodes" href="#GroupSelectedNodes" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-1-0">Group selected nodes</a></li>
      <li class="ui-menu-item" role="presentation"><a data-event="RmoveSelectedNodes" href="#RmoveSelectedNodes" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-1-1">Remove selected node(s)</a></li>
      <li class="ui-menu-item" role="presentation"><a data-event="RebuildAllShaders" href="#RebuildAllShaders" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-1-2">Rebuild all shaders</a></li>
    </ul>
  </li>
  <li class="ui-menubar-item" role="presentation">
    <a href="#View" tabindex="-1" class="ui-button ui-widget ui-button-text-only ui-menubar-link" role="menuitem" aria-haspopup="true"><span class="ui-button-text">View</span></a>
    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-menu-2" role="menu" tabindex="0" style="display: none;" aria-hidden="true" aria-expanded="false">
      <li class="ui-menu-item" role="presentation"><a data-event="ToggleAttributes" href="#Attributes" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-2-0">Attributes</a></li>
      <li class="ui-menu-item" role="presentation"><a data-event="ToggleLibrary" href="#Library" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-2-1">Library</a></li>
      <li class="ui-menu-item" role="presentation"><a data-event="ToggleTimeline" href="#Timeline" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-2-2">Timeline</a></li>
    </ul>
  </li>
  <li class="expanded ui-menubar-item" role="presentation">
    <a href="#about" class="ui-button ui-widget ui-button-text-only ui-menubar-link" role="menuitem" aria-haspopup="true"><span class="ui-button-text">About</span></a>
    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-menu-3" role="menu" tabindex="0" style="display: none; top: 31px; left: 167px;" aria-expanded="false" aria-activedescendant="ui-menu-3-0" aria-hidden="true">
      <li class="ui-menu-item" role="presentation"><a target="_blank" href="https://github.com/idflood/ThreeNodes.js" class="ui-corner-all" tabindex="-1" role="menuitem" id="ui-menu-3-0">Github page</a></li>
    </ul>
  </li>
</ul>

As you can see, on the first <ul> element there is very attributes, focus on style attribute, where and how I can change this?

style="position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; z-index: 0; height: 22px; display: block; visibility: visible;"

Does not appear on index.jade, neither boot.coffee, neither App.coffee, neither UI.coffee, neither screen.styl, neither base.styl, , neither layout.styl, neither menubar.styl, etc...
I have search almost on entire project directory, this CSS added after all this configurations, can't be changed 😕.. it appears ridiculous question, but seriously I can't find where I change this HTML&CSS attributes.

Thank you for you help in advance.

This project is fantastic very excited to work with it. Does anyone know if any examples exist for adding your own nodes or functions? I have a RESTful API that I want to integrate with this but some of the concepts in the project are new to me. If someone could post an example that would be great!

Hi
I've seen the last commit is quite old.. more or less one year ago. In the dev branch even older. Why have you stopped the dev of this super-cool project?

Hi,

I am a newbie in Node.js / ThreeNodes.js, and would like some help to better understand how you use the "require" in ThreeNodes.js. As I understand it, the ThreeNodes.js RequireJS uses to manage the dependencies of the projects, and when I read about RequireJS, uses this syntax:

  define (['module1', 'module2'], function (module1, module2) {... doSomething () ...});

NOTE: Javascript Syntax

When I examine a class (in ThreeNodes.js) that extends ThreeNodes.NodeBase, notice that the "define" is already in some dependencies, and ThreeNodes works without problems.

But if I put the following block:

    define [
        'use! Underscore'
        'use! Backbone'
        'order! threenodes / models / Node'
        'order! threenodes / utils / Utils'
        'cs! soap' # OR 'order! soap'
    ] (_, Backbone, Utils, Soap) ->
        "use strict"
        $ = JQuery
    ... 

NOTE: CoffeeScript syntax

When I open the page in the browser gives error for missing the "script / soap.js" or as it appears on the console of the browser "not loaded".

I have also tried (and we should say, that did not work):

    soap = require "soap"
    ...

NOTE: CoffeeScript syntax

That said, which indicated the way to "require" the modules installed by NPM?

From now on, thank you for your help!

Didn't seem to work on Node.js 0.8.x – parts of the build step (such as Docs generation) fail and throw. Didn't find 'em posted online anywhere.

This is a great demo, but I'm looking at ways to extend it, and to trigger events and node propagation from indirect user interaction.

Any advice, or am I missing something?

This looks like a great tool, and we'd love to use it on my project at work.

These issues need to be fixed first:

move sidebar system tab in a new menu topbar: #5
webgl - popup optional, default render inside node: #4