在ThreeJS中可視化細粒度坐標

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);