I need to get data (numerical coordinates) from a Postgres database (I am thinking a .txt file would be fine for parsing), parse it so that I only use 1/5 of the coordinates, and somehow import/access those coordinates in JavaScript (for use with the three.js library).
I can get the SQL table Data into a text file, and while I don't have a ton of parsing experience I think I can do that part too (although I am not sure how to do it in JavaScript or if I could do it in Java with some more intermediate steps...?), but the main problem is accessing the data in JavaScript. I was hoping you all could help me flesh out the best process for accomplishing my goal. Thanks!
Edit: The JavaScript will be inside an HTML document and for reasons that are unnecessarily complicated to go into the Three.js stuff needs to run without access to the database.
Update: Here is what I have done so far. I am new to JavaScript and Three.js. Opening the file results in a blank webpage.
<!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>There are a lot of potential issues. Basically I am trying to use coordinate data to make 2D outlines and then extrude and merge these into an overall 3D model. I don't even use my layerZ variable, which is supposed to determine where on the z-axis each extruded 2D outline is relative to the others (imagine stacking pancakes in space). Any advice to get some sort of output would be greatly appreciated. It also could be the camera placement now that I think about it... Advice on setting that aspect up would be welcome as well.
