Question

我需要从Postgres数据库获取数据（数字坐标）（我认为.txt文件可以解析），解析它以便我只使用1/5的坐标，并以某种方式导入/访问JavaScript中的那些坐标（用于three.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变量，它应该确定z轴上每个挤出的2D轮廓相对于其他轮廓的位置（想象在空间中堆叠煎饼）。任何建议获得某种输出将不胜感激。它现在也可能是我想到的相机位置...也欢迎设置这方面的建议。

Answer 1

如果可以将数据放入Postgres中的单个表或视图中，那么you could export it as a CSV。获得CSV版数据后，可以使用client-side CSV parsing library like jquery-csv进行阅读。在将其传递给此库进行解析之前，您可以先use AJAX to load in the CSV data。

解析SQL输出坐标并在JavaScript 3D中访问它们的最佳方法是什么？

1 个答案: