我需要从Postgres数据库中获取数据(数字坐标)(我认为.txt文件可以解析)，解析它，以便我只使用坐标的1/5，并以某种方式在JavaScript中导入/访问这些坐标(用于三.js库)。
我可以将SQL表数据放入文本文件中，虽然我没有大量的解析经验，但我认为我也可以完成这一部分(尽管我不确定如何在JavaScript中做到这一点，或者我是否可以在Java中通过一些更中间的步骤来做到这一点......？)，但主要问题是访问JavaScript中的数据。我希望你们都能帮助我充实实现目标的最佳过程。谢谢！
编辑： JavaScript 将位于 HTML 文档中，并且由于进入 Three.js 不必要的复杂原因，需要在无法访问数据库的情况下运行。
更新： 这是我到目前为止所做的。我是JavaScript和Three.js的新手。打开该文件会导致空白网页。
<!DOCTYPE html>
<html>
<head>
<title>Visual Human - Custom geometry</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/OrbitControls.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript">
//first, brute-force attempt 03/21/17 - 03/22/17 --ferrovax
var orbit;
function init() {
var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
camera.position.x = -80;
camera.position.y = 80;
camera.position.z = 80;
camera.lookAt(new THREE.Vector3(60, -60, 0));
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position = new THREE.Vector3(70, 170, 70);
spotLight.intensity = 0.7;
spotLight.target = bodyGeo;
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
orbit = new THREE.OrbitControls(camera, webGLRenderer.domElement);
var step = 0;
var body = new Map();
var bodyGeo = new THREE.Geometry();
parse();
scene.add(new THREE.Mesh(bodyGeo, cubeMaterial));
parse = function (){
$.ajax({
url:'output2.txt',
success: function (data){
for each (var entry in data.split('n')) {
var count = 0;
var nameKey;
var path = new d3.path();
var layerZ;
for each (var chunk in entry.split('s')) {
if (/[0-9]+/.test(chunk)) {
//chunk is the layer number
layerZ = parseInt(chunk);
} else if (/[^0-9]+/.test(chunk)) {
//chunk is the name, so check if it exists, make it if necessary
if (!body.has(chunk)) {
nameKey = chunk;
body.set(nameKey, path);
}
} else {
//chunk is the entire block of coordinates
for each (var coordinatePair in chunk.split(':')) {
if (count % 20 == 0) {
var xy = coordinatePair.split(',');
path.lineTo(xy[0], xy[1]);
}
count++;
}
}
}
path.closePath();
var shape = transformSVGPathExposed(path.toString());
var options = {
steps: 2,
amount: 200,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelSegments: 1
};
var outline = createMesh(new THREE.ExtrudeGeometry(shape, options));
outline.updateMatrix();
bodyGeo.merge(outline.geometry, outline.matrix);
}
}
});
}
var gui = new dat.GUI();
render();
function render() {
stats.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init
</script>
</body>
</html>有很多潜在的问题。基本上，我尝试使用坐标数据制作2D轮廓，然后将其拉伸并合并到整体3D模型中。我什至不使用我的 layerZ 变量，它应该确定每个拉伸的 2D 轮廓在 z 轴上相对于其他轮廓的位置(想象一下在空间中堆叠煎饼)。任何获得某种输出的建议将不胜感激。现在我想起来也可能是相机的位置......也欢迎就设置这一方面提出建议。
如果可以在Postgres中将数据放入单个表或视图中，则可以将其导出为CSV。获得数据的CSV版本后，您可以使用客户端CSV解析库(如jquery-csv)读取它。您可以先使用 AJAX 加载 CSV 数据，然后再将其传递到此库进行分析。