I am facing an issue where the solutions provided do not seem to work for me as I am new to Three.js.
In my scene, I have several objects such as a map with each region represented by a separate object positioned on a plane. Here is an image of my setup: . Now, I would like to bring all these objects to a single coordinate, for example at 0,0,0, and have them grouped together. However, when I try setting municipios[i].position.set(0,0,0), they all end up in the same position. How can I ensure that they remain in their actual positions on the Cartesian plane?
Below is a snippet of the code I am currently working with:
for(i in $scope.datosMunicipio){
Geometria[i]=new THREE.Geometry();
array_extrude[i]=new Array();
for (var a in vector_lat[i]){
if(a!=0){
if(vector_lat[i][a]==vector_lat[i][a-1]) {
continue;
}
}
Vector[i]=new THREE.Vector3((vector_long[i][a]+75.5)*10,((vector_lat[i][a])-5.5)*10,0);
Geometria[i].vertices.push(Vector[i]);
array_extrude[i].push(Vector[i]);
}
forma_figura[i]=new THREE.Shape(array_extrude[i]);
extrude_geometria[i]=new THREE.ExtrudeGeometry(forma_figura[i],datos_extrusion); // lento
materialFront[i] = new THREE.MeshBasicMaterial( { color: "#FF0000",name:$scope.datosMunicipio[i].nombre} );
municipios[i] = new THREE.Mesh( extrude_geometria[i], materialFront[i] );
The data loaded from the database assigns each municipios[i] object to a specific region in its own position. The coordinates correspond to Google Maps data, longitude and latitude respectively, falling within the range of 5.5 to -75. Each region has its individual 0,0,0 position. How can I group them all to share one common 0,0,0 position?