월드 앵커

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);
});