14. Vectores en tres dimensiones

14.1 Del plano al espacio

En dos dimensiones usamos los ejes x e y. Para describir el espacio agregamos un tercer eje z, perpendicular a ambos. Un vector tridimensional queda determinado por tres componentes:

Según la aplicación, z puede representar altura, profundidad u otra dirección. La convención debe declararse: distintos motores gráficos usan ejes y orientaciones diferentes.

14.2 Sistema cartesiano 3D

Un sistema tridimensional contiene un origen O, tres ejes perpendiculares y una escala. La base estándar está formada por:

Cualquier vector se escribe v_xi + v_yj + v_zk. Los signos indican sentidos sobre los tres ejes.

14.3 Orientación y regla de la mano derecha

En un sistema de mano derecha, si los dedos giran desde +x hacia +y, el pulgar apunta hacia +z. Esta convención relaciona el orden de los ejes y será esencial para interpretar el producto vectorial.

Una figura en pantalla no puede mostrar tres direcciones mutuamente perpendiculares sin usar perspectiva o proyección. Por eso el aspecto visual depende de la cámara, aunque los ejes del modelo sigan siendo ortogonales.

14.4 Puntos y vectores 3D

Un punto P = (2, −1, 5) m expresa una posición respecto del origen. Un vector con el mismo triple representa una orientación y un tamaño. Como en 2D, debemos conservar la diferencia semántica en nombres y estructuras.

El vector desde A hasta B se calcula:

function vectorEntre3D(a, b) {
  return { x: b.x - a.x, y: b.y - a.y, z: b.z - a.z };
}

console.log(vectorEntre3D({ x: 1, y: 2, z: -1 }, { x: 5, y: -2, z: 6 }));

14.5 Suma, resta y escalado

const sumar3D = (a, b) => ({ x: a.x + b.x, y: a.y + b.y, z: a.z + b.z });
const escalar3D = (v, k) => ({ x: k * v.x, y: k * v.y, z: k * v.z });

const a = { x: 2, y: -1, z: 4 };
const b = { x: -3, y: 5, z: 1 };
console.log(sumar3D(a, b), escalar3D(a, 2));

14.6 Módulo y distancia

El teorema de Pitágoras se extiende a tres componentes:

La distancia entre A y B es |B − A|. Math.hypot(v.x, v.y, v.z) calcula el módulo de forma directa.

function distancia3D(a, b) {
  return Math.hypot(b.x - a.x, b.y - a.y, b.z - a.z);
}

console.log(distancia3D({ x: 1, y: 2, z: 3 }, { x: 4, y: 6, z: 15 }));

14.7 Normalización

Dividimos las tres componentes por el módulo:

El vector nulo continúa siendo un caso no normalizable. El resultado unitario puede representar una dirección espacial independiente de la distancia o rapidez.

function normalizar3D(v) {
  const m = Math.hypot(v.x, v.y, v.z);
  return m === 0 ? null : { x: v.x / m, y: v.y / m, z: v.z / m };
}

console.log(normalizar3D({ x: 2, y: -3, z: 6 }));

14.8 Producto escalar y ángulo

El producto escalar incorpora la tercera componente:

La fórmula del ángulo y el criterio de ortogonalidad se mantienen. Por ejemplo, (1, 0, 0) y (0, 0, 1) son perpendiculares porque su producto es cero.

14.9 Planos coordenados y casos 2D

Si z = 0, el vector pertenece al plano xy y recuperamos el caso bidimensional. Del mismo modo, y = 0 define el plano xz y x = 0 define yz.

14.10 Octantes

Los tres planos coordenados dividen el espacio en ocho regiones llamadas octantes. El signo de (x, y, z) identifica en cuál se encuentra un punto o hacia cuál apunta un vector.

La numeración de los octantes no posee una convención tan universal como la de los cuadrantes, por lo que resulta más claro informar el patrón de signos, por ejemplo (+, −, +).

14.11 Representar 3D en una pantalla 2D

Canvas es bidimensional. Para visualizar 3D debemos transformar un punto del mundo mediante una cámara y proyectarlo sobre la pantalla. Una proyección ortográfica sencilla descarta la profundidad después de rotar la escena.

La proyección modifica la apariencia, no las componentes almacenadas del vector físico.

14.12 Rotar la vista, no el vector

En una visualización interactiva podemos mantener fijo el vector y rotar la cámara. Para ello aplicamos rotaciones temporales solo al dibujar. Los datos originales continúan en el sistema del mundo.

Esto evita que arrastrar la vista altere accidentalmente el estado físico. Las rotaciones matemáticas y cambios de base se estudiarán más adelante.

14.13 Laboratorio tridimensional

Modificá las tres componentes y rotá la vista con los controles o arrastrando el Canvas. Las líneas discontinuas muestran las proyecciones del extremo sobre los planos coordenados.

14.14 Representación en JavaScript

Un objeto con propiedades nombradas resulta legible. Para cálculos genéricos o integración con bibliotecas gráficas también son habituales los arreglos y arreglos tipados.

function sumar3D(a, b) {
  return { x: a.x + b.x, y: a.y + b.y, z: a.z + b.z };
}
function productoEscalar3D(a, b) {
  return a.x * b.x + a.y * b.y + a.z * b.z;
}

const posicion = { x: 2, y: 1, z: -4 };
const desplazamiento = { x: 3, y: -2, z: 5 };
console.log(sumar3D(posicion, desplazamiento));
console.log(productoEscalar3D(desplazamiento, { x: 0, y: 1, z: 0 }));

14.15 Errores frecuentes

• Olvidar la componente z en una operación.
• Mezclar convenciones de ejes entre sistemas o bibliotecas.
• Confundir profundidad de cámara con el eje z del mundo.
• Calcular una distancia 3D mediante una fórmula 2D.
• Normalizar sin detectar el vector nulo.
• Interpretar la proyección visual como las componentes reales.
• Modificar el vector del modelo al intentar rotar solamente la vista.

14.16 Ejercicio integrador

Un dron pasa de A = (−2, 1, 3) m a B = (4, 5, −5) m.

1. Calculá el desplazamiento AB.
2. Obtené la distancia entre A y B.
3. Normalizá el desplazamiento.
4. Construí una velocidad de 12 m/s en esa dirección.
5. Calculá el producto escalar de la velocidad con k = (0, 0, 1) e interpretá el signo.

const A = { x: -2, y: 1, z: 3 };
const B = { x: 4, y: 5, z: -5 };
const d = { x: B.x - A.x, y: B.y - A.y, z: B.z - A.z };
const distancia = Math.hypot(d.x, d.y, d.z);
const u = { x: d.x / distancia, y: d.y / distancia, z: d.z / distancia };
const rapidez = 12;
const velocidad = { x: rapidez * u.x, y: rapidez * u.y, z: rapidez * u.z };
const componenteZ = velocidad.z;

console.log({ d, distancia, u, velocidad, componenteZ });

14.17 Ideas para recordar

• Un vector 3D posee componentes x, y y z.
• La base estándar está formada por i, j y k.
• Las operaciones 2D se extienden incorporando la tercera componente.
• El módulo y la distancia utilizan los tres cuadrados.
• La normalización produce una dirección unitaria espacial.
• El producto escalar conserva su interpretación geométrica.
• Una pantalla 2D necesita proyectar la escena 3D.
• Rotar la vista no debe modificar el vector físico almacenado.

En el próximo tema estudiaremos el producto vectorial, la orientación y la regla de la mano derecha.