如何使用node.js將數據從html發送到three.js？

Question

我試圖將數據從html形式（例如，長度，寬度，立方體的高度）內的文本輸入字段發送到three.js視圖。 當我發送發布請求時（我目前也在使用快遞），我無法將數據放入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();

如您所知，我在這方面的經驗不是很豐富，因此如果代碼片段或建議編寫得盡可能簡單，將不勝感激。

Answer 1

您需要創建一個表單可以發布到node.js中的路由，除非您想自己編寫普通的NodeJS服務器，否則我將使用Hapi.js或Express.js。

讓我們將此路由稱為“ /三”並響應POST。

然后，您將能夠捕獲所有輸入並將它們傳遞到three.js並在POST的返回中返回結果。