How to send data from html to three.js using node.js?

Question

I'm trying to send data from text input fields inside of a html-form (say length, width, height of a cube) to a three.js view. When I send a post request (I'm also currently using express) I cannot get the data into the three.js view.

Note: I do not want to use GUI for this. I later intend to save and load the form data from/to a database.

I can successfully get three.js working from the html code. However, if I do this, I'm not able to get the input fields data into the scene.I've tried using ejs to get around this problem, but unsuccessfully.

I'm having a hard time finding any good resources to follow or someone who has done something similar.

Preferably I'd like a solution using node.js and express, but I'm not picky at this point. Maybe Browserify or something similar could be used for this type of problem?

What I'm currently trying is to run the three.js code from the app.post(...){};. But I'm missing both a "view" and "document" but this seems like a bad idea.

var THREE = require('three')

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();

//An alternative to get the three.js part cover less only
//the element with id "container"
  //container = document.getElementById('container');
  //container.appendChild( renderer.domElement );
  //document.body.appendChild( container );

renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( data.sizeX, data.sizeY, data.sizeZ );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
  requestAnimationFrame( animate );
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render( scene, camera );
};

animate();

As you can probably tell, I'm not very experienced in this area and would therefore appreciate if code-snippets or advice is written as simple as possible.

Answer 1

You need to create a route that your form can post to in node.js I would use Hapi.js or Express.js, unless you want to write the vanilla NodeJS server yourself.

Lets call this route "/three" and responds to a POST.

You would then be able to capture all your inputs and pass them onto three.js and return the result in the return of the POST.