在三JS中可视化细粒度坐标

Question

我在three.js中可视化UTM / WGS84坐标。我的问题是轨迹的粒度非常精细，这意味着我看不出运动行为的任何差异。我正在寻找一种干净的方式来绘制一个时空立方体（X和Y是空间，Z是时间）但我无法弄清楚如何将轨迹数据投影到我可以实际看到的位置的场景中变化（我对那些有效的数据进行了标准化，但我宁愿选择一种更加花哨的方法）。我正在从存储在可变数据中的CSV加载轨迹信息。我有1500个这样的元组，有LAT，LON（EPSG 4326）和上升秒。正如你所看到的那样，机芯非常精细（我有一个移动超过四个足球场大小的物体的运动数据）

12.4309352,48.4640973,0
12.4301431,48.4655268,15
12.4288555,48.4658138,30
12.4266812,48.4653488,45
12.4245049,48.4648678,60
12.4228305,48.4639438,75
12.4217859,48.4625038,90
... ... ...

到目前为止，这是我的代码：

var data = $.csv.toArrays(csv);

var renderer,
scene,
camera,
controls

//using terrainSize was an experiment, it didn't change much

var terrainSize = 60;

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
renderer = new THREE.WebGLRenderer({ antialias: true });
document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex( 0xeeeeee, 1.0 );

scene = new THREE.Scene();

var material = new THREE.LineBasicMaterial({
  color: 0xff00cc,
  fog: true
});

var geometry = new THREE.Geometry();

var x = []
var y = []
var z = []

var count = 0;
for(var row in data) {
   count += parseInt(data[row][2]); 
   x.push(parseFloat(data[row][0]));
   y.push(parseFloat(data[row][1]));
   z.push(parseFloat(count));
}


//I normalize the seconds that everything is visible on the map

z_stretch = stretch_array(z,10,1)

function stretch_array(my_stretched_array, given_stretch, multiplier) {
   ratio = Math.max.apply(this, my_stretched_array) / given_stretch,
   l = my_stretched_array.length;

   for ( i = 0; i < l; i++ ) {
      my_stretched_array[i] =  my_stretched_array[i] / ratio;
   }                

   for ( i = 0; i < my_stretched_array.length; i++) {
      my_stretched_array[i] = multiplier * my_stretched_array[i];
   }
   return my_stretched_array;
}


//I zip the data back together

var data_stretched = []

for ( i = 0; i < data.length; i++ ) {
   data_stretched.push([x[i], y[i], z_stretch[i]]);
} 


//I tried using d3.js but I couldn't figure out how to stretch the data accordingly

var projection = d3.geo.transverseMercator()
   .translate([terrainSize / 2, terrainSize / 2])
   .scale(10)  
   .center([12.4309352,48.4640973]);    

//Looping through the data, translating it and adding each tuple to the geometry

for (var row in data_stretched) {
   var x = data_stretched[row][0]
   var y = data_stretched[row][2]
   var z = data_stretched[row][2]

   coord = translate(projection([y, x]));

   geometry.vertices.push(new THREE.Vector3(parseFloat(coord[0]), parseFloat(z),     parseFloat(coord[1])));
}


// Another experiment

function translate(point) {
   return [point[0] - (terrainSize / 2), (terrainSize / 2) - point[1]];
}

// Plotting the line

var line = new THREE.Line(geometry, material);
   scene.add( line );

// camera and control settings..

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, -terrainSize / 2, terrainSize / 2);

controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 0.2;
controls.panSpeed = 0.8;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

animate();

function animate() {
   requestAnimationFrame( animate );
   controls.update();
   renderer.render( scene, camera );
}

这就是我希望它看起来的样子（我只是拉伸了这个值，这有点难看......）

Answer 1

解决了，我不得不缩放坐标。

var projection = d3.geo.transverseMercator()
.translate([window.innerWidth, window.innerHeight])
.scale(30000000);