볼륨

Volume

평평한 창과 달리 3D 콘텐츠를 사방에서 돌려볼 수 있게 담는 부피(bounding box) 컨테이너.

다른 이름: visionOS Volume3D object container
···
js
import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(2.6, 1.8, 3.2);
camera.lookAt(0, 0, 0);
scene.add(new THREE.HemisphereLight(0xbfd4ff, 0x14141f, 1.6));
const key = new THREE.DirectionalLight(0xffffff, 1.4);
key.position.set(3, 4, 2);
scene.add(key);
const box = new THREE.LineSegments(
  new THREE.EdgesGeometry(new THREE.BoxGeometry(2.4, 2.4, 2.4)),
  new THREE.LineDashedMaterial({ color: 0x6c7bd8, dashSize: 0.12, gapSize: 0.1, transparent: true, opacity: 0.55 })
);
box.computeLineDistances();
scene.add(box);
const obj = new THREE.Mesh(
  new THREE.IcosahedronGeometry(0.85, 0),
  new THREE.MeshStandardMaterial({ color: 0xff7a59, metalness: 0.3, roughness: 0.35, flatShading: true })
);
scene.add(obj);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  obj.rotation.y = t * 0.00055;
  obj.rotation.x = Math.sin(t * 0.00035) * 0.3;
  renderer.render(scene, camera);
});

윈도우가 "평평한 콘텐츠가 든 유리판"이라면, 볼륨은 "진짜 부피가 있는 콘텐츠가 든 투명 상자"다. 안에 든 3D 모델은 사용자가 그 주위를 걸어 다니거나 손으로 돌려보며 실제 물체처럼 관찰할 수 있다. 제품 목업, 캐릭터, 지형 모델을 보여줄 때 쓴다.

볼륨에는 명확한 경계(가로·세로·높이)가 있다는 게 핵심이다. 그 경계를 넘어서는 콘텐츠는 잘려 보이므로, 콘텐츠 크기를 볼륨 안에 맞게 스케일해야 한다. 경계 자체는 보통 사용자에게 보이지 않고, 선택했을 때만 옅은 테두리로 힌트를 준다.

데모는 점선 경계 상자 안에서 3D 오브젝트가 천천히 자전한다 — 어느 쪽에서 봐도 다른 면이 보인다는 것이 윈도우(항상 정면만 보이는 2D 패널)와의 결정적 차이다.

언제 쓰나

콘텐츠가 실제로 3D여야 가치가 있을 때만 쓰세요. 버튼·텍스트처럼 원래 평평한 UI를 억지로 볼륨에 넣지 않습니다.