如何使用node.js将数据从html发送到three.js？

Question

我正在尝试将数据从 html 表单内的文本输入字段（例如立方体的长度、宽度、高度）发送到 three.js 视图。当我发送一个 post 请求（我目前也在使用 express）时，我无法将数据放入 three.js 视图中。

注意：我不想为此使用 GUI。我稍后打算从/向数据库保存和加载表单数据。

我可以成功地从 html 代码中获取three.js。但是，如果这样做，我无法将输入字段数据导入场景。我尝试使用 ejs 解决此问题，但未成功。

我很难找到任何可以关注的好资源或做过类似事情的人。

最好我想要一个使用 node.js 和 express 的解决方案，但我现在并不挑剔。也许 Browserify 或类似的东西可以用来解决这类问题？

我目前正在尝试从 app.post(...){}; 运行 three.js 代码。 但是我缺少“视图”和“文档”，但这似乎是个坏主意。

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();

正如您可能知道的那样，我在这方面的经验不是很丰富，因此如果 code-sn-ps 或建议尽可能简单地编写，我将不胜感激。

Answer 1

您需要在 node.js 中创建表单可以发布到的路由，除非您想自己编写普通的 NodeJS 服务器，否则我会使用 Hapi.js 或 Express.js。

让我们将此路由称为“/three”并响应 POST。

然后您将能够捕获所有输入并将它们传递到 three.js 并在 POST 的返回中返回结果。