Design Atlas
한국어
◫ Spatial UI & XR

World anchor

월드 앵커

A virtual object pinned to one point in real space that stays put no matter how the camera (the user) moves — the opposite of being stuck to the screen.

Also known as: Spatial anchorFixed-in-place object
···
js
import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0c16);
const camera = new THREE.PerspectiveCamera(52, 1, 0.1, 30);
scene.add(new THREE.HemisphereLight(0xaebfff, 0x0c0c14, 1.6));
const key = new THREE.DirectionalLight(0xffffff, 1.2); key.position.set(3, 5, 2); scene.add(key);
const grid = new THREE.GridHelper(8, 16, 0x4a5bd8, 0x22243a);
scene.add(grid);
const anchor = new THREE.Mesh(new THREE.OctahedronGeometry(0.6, 0), new THREE.MeshStandardMaterial({ color: 0xff7a59, roughness: 0.4 }));
anchor.position.y = 0.6;
scene.add(anchor);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const a = t * 0.00025;
  camera.position.set(Math.sin(a) * 5, 2.2, Math.cos(a) * 5);
  camera.lookAt(0, 0.4, 0);
  anchor.rotation.y = t * 0.0006;
  renderer.render(scene, camera);
});

A headset's screen holds two kinds of virtual elements at once: things that follow your head (head-locked — a battery indicator), and things pinned to one real-space coordinate that stay exactly there — a world anchor. A virtual sticky note left on a desk, a virtual painting hung on a wall: walk around them and they stay put.

This matters for immersion. Like a real object, a virtual one needs its position and angle to shift naturally with the viewer's perspective as they move — that reads as "it's really there." Follow the user instead, and it reads as a sticker glued to the screen, which breaks the illusion.

The demo orbits the camera slowly around a room while the floor grid and the object sitting on it never move — the same principle as the world staying fixed in place when you turn your head with a real headset on.

When to use

Use it for content that should feel like a real object — items placed in a room, location-based notifications. Status indicators that must always be in view go the other way, head-locked.