在ThreeJS中可视化细粒度坐标

Question

我正在three.js中可视化UTM/WGS84 84坐标。我的问题是轨迹的粒度非常细，这意味着我看不到运动行为的任何区别。我正在寻找一种清晰的方法来绘制一个时空-立方体(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);