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

Question

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

注意:我不想为此使用 GUI。我稍后打算将表单数据保存并从数据库加载到数据库。

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

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

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

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

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

您可能会说，我在这方面不是很有经验，因此如果代码片段或建议尽可能简单，我将不胜感激。

Answer 1

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

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

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