2

Tengo un grupo de coordenadas en formato cartesiano, estoy tratando de mostrarlas en un plano pero al estar tan cerca me salen juntas.

Lo que he realizado es:

//Lista de coordenadas
var coords = [{x: 38.312994420265, z: -6.73293614518871 },
            { x: 38.3121606727708, z: -6.73414861996415 },
            { x: 38.31209393925, z: -6.73365394789821 },
            { x: 38.309765, z: -6.733786 },
            { x: 38.3098334832724, z: -6.73374153262405 },
            { x: 38.3101738571429, z: -6.73400842857143 },
            { x: 38.3098832732111, z: -673400942857143 },
            { x: 38.31065825, z: -6.73382525 },
            { x: 38.3121424443978, z: -6.73440437325536 },
            { x: 38.312321, z: -6.734591 },
            { x: 38.3135465825497, z: -6.73486983169236 }];

//Cargo la escena y le situo su centro en esas coordenadas
function CargarCamara() {
    scene = new THREE.Scene();
    scene.position.set(38.313,0,-6.735);
    //Generacion de camara
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 300, 500);
    camera.lookAt(scene.position);      

    //luces
    light = new THREE.PointLight(0xffffff, 1, 4000);
    light.position.set(50, 0, 0);
    light_two = new THREE.PointLight(0xffffff, 1, 4000);
    light_two.position.set(-100, 800, 800);
    lightAmbient = new THREE.AmbientLight(0x404040);
    scene.add(light, light_two, lightAmbient);
}

//seteo de los puntos
function Cubo() {
      
    const bola = new THREE.SphereGeometry(5);
    const meta = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const punto = new THREE.Mesh(bola, meta);

    for (let i = 0; i < (coords.length - 1); i++) {
        let aux = punto.clone();
        aux.position.set((coords[i].x - scene.position.x ), 10, (coords[i].z - scene.position.y ));
        coordenadas.add(aux);
    }   
    scene.add(coordenadas);
}

Dejo también un fiddle con el problema en ejecución.

¿Cómo se escalan esas coordenadas al tamaño de mi plano?

1
  • ¿Cual es tu pregunta?
    – Candid Moe
    Commented el 28 may. 2021 a las 8:56

1 respuesta 1

0

Para escalar las coordenadas y mostrarlo centrado debemos recorrer el array de coordenadas y encontrar el mínimo, será el punto central, lo que significa que si deseas que las coordenadas estén rodeando tu punto centra, tienes que calcular el centro, en mi caso, al querer centrar las coordenadas he usado la media de ellas:

const xs = coordsMaps.map(c => c.x);
const zs = coordsMaps.map(c => c.z);
//centro de coordenadas
const minX = 38.3125;
const minZ = -6.7345;
//escalar coordenadas
coordsMaps = coordsMaps.map(c => {
    return {
        x: (c.x - minX) * 110000,
        z: (c.z - minZ) * 110000
    };
});

Y para pintar las coordenadas:

const geometry = new THREE.IcosahedronGeometry(5, 5);
const material = new THREE.MeshPhongMaterial();

mesh = new THREE.InstancedMesh(geometry, material, coordsMaps.length);

const offset = (coordsMaps.length - 1) / 2;

const matrix = new THREE.Matrix4();
const color = new THREE.Color();

for (let i = 0; i < coordsMaps.length; i++) {
    matrix.setPosition(offset - coordsMaps[i].x, offset, offset - coordsMaps[i].z);
    mesh.setMatrixAt(i, matrix);
    mesh.setColorAt(i, color.setHex(0xff0000));
}
scene.add(mesh);

Codepen

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.