📐 3D Positions

Lesson 4 · Lección 4 · Posiciones en el Espacio 3D

Every object in a 3D scene has a position: how far left/right, up/down, and forward/backward it sits. In this lesson you'll master the three-axis coordinate system that Three.js uses.

Cada objeto en una escena 3D tiene una posición: qué tan lejos está en tres direcciones. X, Y, Z — ¡como un mapa en 3D!

1

The Three Axes · Los Tres Ejes

In Three.js, every position is a point in 3D space described by three numbers:

X+ X− Z+ Y+ Y− (0,0,0) (1.8,0,0)
🗺

Think of X/Z as a map (north/south, east/west) and Y as elevation. Our pedestals sit on the floor (Y=0) and grow upward.
Piensa en X/Z como un mapa y Y como elevación.

2

PEDESTAL_POSITIONS in the Code

Open docs/js/visualization.js and find this object. Each entry is [X, Z] — we omit Y because all pedestals start at ground level: 

const PEDESTAL_POSITIONS = {
  // Spanish group: LEFT side (negative X)
  spanish_bilingual_pcp:   [-1.8,  0.0],
  spanish_limited_english: [-4.0,  1.2],
  spanish_total:           [-6.2,  0.0],

  // Chinese group: RIGHT side (positive X)
  chinese_bilingual_pcp:   [ 1.8,  0.0],
  chinese_limited_english: [ 4.0,  1.2],
  chinese_total:           [ 6.2,  0.0],
};

The two language groups face each other across the center. The _total bars are pushed furthest out (±6.2) and _limited_english bars are slightly forward (Z=1.2) to create depth.

KeyXZSide
spanish_total−6.20.0Far left
spanish_limited_english−4.01.2Left + forward
spanish_bilingual_pcp−1.80.0Near left
chinese_bilingual_pcp+1.80.0Near right
chinese_limited_english+4.01.2Right + forward
chinese_total+6.20.0Far right
3

Position Builder · Constructor de Posición

Use these inputs to see what position code would look like:

my_language_total: [ 3.0, 0.5 ],
💡

Keep X between −10 and +10 to stay within the camera's view. Use Z between −2 and +3 for natural depth staging.

4

Display Names · Nombres a Mostrar

Right next to PEDESTAL_POSITIONS you'll find DISPLAY_NAMES — these are the labels that float above each pedestal in the scene: 

const DISPLAY_NAMES = {
  spanish_total:           'Habla Español',
  spanish_limited_english: 'Español Limitado',
  spanish_bilingual_pcp:   'Bilingüe PCP',
  chinese_total:           '说中文',
  chinese_limited_english: '中文限',
  chinese_bilingual_pcp:   '双语 PCP',
};

Notice the labels are already multilingual — Spanish and Chinese characters appear right in the JavaScript string. UTF-8 encoding (from Lesson 1!) makes this work perfectly.

🛠 Try It · Inténtalo

Open visualization.js. Find spanish_total in PEDESTAL_POSITIONS and change its X from -6.2 to -3.0. Save, refresh — watch the Spanish total bar move closer to the center!

Cambia el valor X de spanish_total de -6.2 a -3.0. ¡Guarda y observa cómo se mueve la barra!

← Lesson 3 Lesson 5: Scene & Lights →