📝 기본 HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First WebXR VR</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <button id="vr-button">VR 모드 시작</button>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

🎨 JavaScript 코드 (app.js)

// Scene, Camera, Renderer 설정
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x505050);

const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
);
camera.position.set(0, 1.6, 3);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true; // WebXR 활성화! 이게 핵심 ⭐
document.body.appendChild(renderer.domElement);

// 간단한 큐브 만들기
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ 
    color: 0x00ff00,
    roughness: 0.7,
    metalness: 0.3
});
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 1.6, -2);
scene.add(cube);

// 조명 추가
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// VR 버튼 설정
const vrButton = document.getElementById('vr-button');
vrButton.addEventListener('click', () => {
    renderer.xr.getSession().then(session => {
        // VR 세션 시작
    }).catch(err => {
        console.error('VR 세션 시작 실패:', err);
    });
});

// 애니메이션 루프
renderer.setAnimationLoop(() => {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
});

// 윈도우 리사이즈 처리
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

🎯 WebXR 세션 제대로 시작하기

// VR 지원 여부 확인
if ('xr' in navigator) {
    navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
        if (supported) {
            const vrButton = document.getElementById('vr-button');
            vrButton.style.display = 'block';
            
            vrButton.addEventListener('click', async () => {
                try {
                    // VR 세션 요청
                    const session = await navigator.xr.requestSession('immersive-vr', {
                        requiredFeatures: ['local-floor'],
                        optionalFeatures: ['hand-tracking', 'layers']
                    });
                    
                    // 세션을 renderer에 연결
                    await renderer.xr.setSession(session);
                    
                    // 세션 종료 이벤트 처리
                    session.addEventListener('end', () => {
                        console.log('VR 세션 종료됨');
                    });
                    
                } catch (error) {
                    console.error('VR 세션 생성 실패:', error);
                }
            });
        } else {
            console.log('이 기기는 VR을 지원하지 않습니다 ㅠㅠ');
        }
    });
} else {
    console.log('WebXR을 지원하지 않는 브라우저입니다');
}

🕹️ 컨트롤러 입력 처리

// 컨트롤러 그룹 생성
const controllers = [];

for (let i = 0; i < 2; i++) {
    const controller = renderer.xr.getController(i);
    
    // 컨트롤러 이벤트 리스너
    controller.addEventListener('selectstart', onSelectStart);
    controller.addEventListener('selectend', onSelectEnd);
    controller.addEventListener('squeezestart', onSqueezeStart);
    controller.addEventListener('squeezeend', onSqueezeEnd);
    
    scene.add(controller);
    controllers.push(controller);
    
    // 컨트롤러 시각화 (레이저 포인터)
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute([0, 0, 0, 0, 0, -1], 3));
    const line = new THREE.Line(geometry);
    line.scale.z = 5;
    controller.add(line);
}

// 이벤트 핸들러 함수들
function onSelectStart(event) {
    const controller = event.target;
    console.log('트리거 버튼 눌림!');
    // 여기서 물체 선택, 발사 등의 로직 구현
}

function onSelectEnd(event) {
    console.log('트리거 버튼 뗌!');
}

function onSqueezeStart(event) {
    console.log('그립 버튼 눌림!');
    // 물체 잡기 등의 로직
}

function onSqueezeEnd(event) {
    console.log('그립 버튼 뗌!');
}

🏛️ VR 갤러리 기본 구조

class VRGallery {
    constructor() {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        
        this.init();
        this.createGallery();
        this.setupControllers();
        this.animate();
    }
    
    init() {
        // 렌더러 설정
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.xr.enabled = true;
        document.body.appendChild(this.renderer.domElement);
        
        // 카메라 위치
        this.camera.position.set(0, 1.6, 5);
        
        // 조명
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        this.scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(0, 10, 0);
        this.scene.add(directionalLight);
    }
    
    createGallery() {
        // 바닥 만들기
        const floorGeometry = new THREE.PlaneGeometry(20, 20);
        const floorMaterial = new THREE.MeshStandardMaterial({ 
            color: 0x808080,
            roughness: 0.8
        });
        const floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.rotation.x = -Math.PI / 2;
        this.scene.add(floor);
        
        // 벽 만들기
        this.createWalls();
        
        // 그림 배치
        this.createArtworks();
    }
    
    createWalls() {
        const wallMaterial = new THREE.MeshStandardMaterial({ 
            color: 0xf5f5f5,
            roughness: 0.9
        });
        
        // 뒷벽
        const backWall = new THREE.Mesh(
            new THREE.BoxGeometry(20, 5, 0.2),
            wallMaterial
        );
        backWall.position.set(0, 2.5, -10);
        this.scene.add(backWall);
        
        // 좌우 벽
        const sideWall1 = new THREE.Mesh(
            new THREE.BoxGeometry(0.2, 5, 20),
            wallMaterial
        );
        sideWall1.position.set(-10, 2.5, 0);
        this.scene.add(sideWall1);
        
        const sideWall2 = sideWall1.clone();
        sideWall2.position.set(10, 2.5, 0);
        this.scene.add(sideWall2);
    }
    
    createArtworks() {
        this.artworks = [];
        
        const artworkData = [
            { title: '추상화 1', color: 0xff6b6b, position: [-6, 2, -9.8] },
            { title: '풍경화', color: 0x4ecdc4, position: [0, 2, -9.8] },
            { title: '초상화', color: 0xffe66d, position: [6, 2, -9.8] }
        ];
        
        artworkData.forEach(data => {
            // 액자
            const frameGeometry = new THREE.BoxGeometry(2.2, 2.2, 0.1);
            const frameMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513 });
            const frame = new THREE.Mesh(frameGeometry, frameMaterial);
            
            // 그림
            const artGeometry = new THREE.PlaneGeometry(2, 2);
            const artMaterial = new THREE.MeshStandardMaterial({ color: data.color });
            const artwork = new THREE.Mesh(artGeometry, artMaterial);
            artwork.position.z = 0.06;
            
            frame.add(artwork);
            frame.position.set(...data.position);
            frame.userData = { title: data.title, isArtwork: true };
            
            this.scene.add(frame);
            this.artworks.push(frame);
        });
    }
    
    setupControllers() {
        this.raycaster = new THREE.Raycaster();
        this.tempMatrix = new THREE.Matrix4();
        
        for (let i = 0; i < 2; i++) {
            const controller = this.renderer.xr.getController(i);
            controller.addEventListener('selectstart', this.onSelect.bind(this));
            this.scene.add(controller);
            
            // 레이저 포인터
            const geometry = new THREE.BufferGeometry();
            geometry.setAttribute('position', new THREE.Float32BufferAttribute([0, 0, 0, 0, 0, -1], 3));
            const line = new THREE.Line(geometry);
            line.scale.z = 10;
            controller.add(line);
        }
    }
    
    onSelect(event) {
        const controller = event.target;
        
        this.tempMatrix.identity().extractRotation(controller.matrixWorld);
        this.raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
        this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(this.tempMatrix);
        
        const intersects = this.raycaster.intersectObjects(this.artworks, true);
        
        if (intersects.length > 0) {
            const selected = intersects[0].object.parent;
            if (selected.userData.isArtwork) {
                console.log('선택된 작품:', selected.userData.title);
                this.showArtworkInfo(selected);
            }
        }
    }
    
    showArtworkInfo(artwork) {
        // 작품 정보 패널 표시 (간단한 예시)
        artwork.scale.set(1.1, 1.1, 1.1);
        setTimeout(() => {
            artwork.scale.set(1, 1, 1);
        }, 200);
    }
    
    animate() {
        this.renderer.setAnimationLoop(() => {
            this.renderer.render(this.scene, this.camera);
        });
    }
}

// 갤러리 시작
const gallery = new VRGallery();

💡 실전 최적화 코드

// 1. Geometry Instancing으로 같은 객체 여러 개 효율적으로 렌더링
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

const instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);
const matrix = new THREE.Matrix4();

for (let i = 0; i < 1000; i++) {
    matrix.setPosition(
        Math.random() * 100 - 50,
        Math.random() * 100 - 50,
        Math.random() * 100 - 50
    );
    instancedMesh.setMatrixAt(i, matrix);
}
scene.add(instancedMesh);

// 2. Frustum Culling (카메라 시야 밖 객체 렌더링 안 함)
renderer.setAnimationLoop(() => {
    // Three.js는 기본적으로 Frustum Culling을 하지만
    // 수동으로 제어하고 싶다면:
    scene.traverse((object) => {
        if (object.isMesh) {
            object.frustumCulled = true; // 기본값이지만 명시적으로
        }
    });
    
    renderer.render(scene, camera);
});

// 3. LOD (Level of Detail) 시스템
const lod = new THREE.LOD();

// 가까이 있을 때 - 고품질
const highDetail = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    material
);
lod.addLevel(highDetail, 0);

// 중간 거리 - 중품질
const mediumDetail = new THREE.Mesh(
    new THREE.SphereGeometry(1, 16, 16),
    material
);
lod.addLevel(mediumDetail, 10);

// 멀리 있을 때 - 저품질
const lowDetail = new THREE.Mesh(
    new THREE.SphereGeometry(1, 8, 8),
    material
);
lod.addLevel(lowDetail, 20);

scene.add(lod);

// 4. 텍스처 압축 및 밉맵
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg', (tex) => {
    tex.minFilter = THREE.LinearMipMapLinearFilter;
    tex.magFilter = THREE.LinearFilter;
    tex.generateMipmaps = true;
    tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
});

// 5. 그림자 최적화
const light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadow.mapSize.width = 1024; // 2048은 너무 무거움
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 50;

🚀 A-Frame 기본 예제

<!DOCTYPE html>
<html>
<head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>
<body>
    <a-scene>
        <!-- 하늘 -->
        <a-sky color="#87CEEB"></a-sky>
        
        <!-- 바닥 -->
        <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
        
        <!-- 박스 -->
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        
        <!-- 구 -->
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
        
        <!-- 원기둥 -->
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        
        <!-- 조명 -->
        <a-light type="ambient" color="#BBB"></a-light>
        <a-light type="directional" color="#FFF" intensity="0.6" position="-0.5 1 1"></a-light>
        
        <!-- 카메라 -->
        <a-entity camera look-controls wasd-controls position="0 1.6 0"></a-entity>
    </a-scene>
</body>
</html>

🎮 A-Frame 인터랙션 추가하기

<!-- 클릭 가능한 박스 -->
<a-box 
    position="0 1.5 -3" 
    color="#4CC3D9"
    animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"
    event-set__click="color: #FF0000"
    class="clickable">
</a-box>

<!-- 커서 (시선 기반 인터랙션) -->
<a-entity camera look-controls>
    <a-cursor
        color="#FF0000"
        fuse="true"
        fuse-timeout="1500">
    </a-cursor>
</a-entity>

<!-- JavaScript로 더 복잡한 인터랙션 -->
<script>
AFRAME.registerComponent('clickable', {
    init: function() {
        this.el.addEventListener('click', () => {
            console.log('박스 클릭됨!');
            this.el.setAttribute('scale', '1.5 1.5 1.5');
            
            setTimeout(() => {
                this.el.setAttribute('scale', '1 1 1');
            }, 500);
        });
    }
});
</script>

📱 플랫폼 감지 및 적응형 렌더링

// 플랫폼 감지
function detectVRPlatform() {
    return new Promise((resolve) => {
        if ('xr' in navigator) {
            navigator.xr.isSessionSupported('immersive-vr').then(supported => {
                if (supported) {
                    // VR 헤드셋 사용 가능
                    resolve('vr-headset');
                } else {
                    // 모바일 브라우저
                    resolve('mobile');
                }
            });
        } else {
            // WebXR 미지원
            resolve('desktop');
        }
    });
}

// 플랫폼에 따른 설정 조정
async function setupScene() {
    const platform = await detectVRPlatform();
    
    let renderSettings = {};
    
    switch(platform) {
        case 'vr-headset':
            renderSettings = {
                pixelRatio: window.devicePixelRatio,
                antialias: true,
                shadowMapEnabled: true,
                maxLights: 5
            };
            break;
            
        case 'mobile':
            renderSettings = {
                pixelRatio: Math.min(window.devicePixelRatio, 2), // 성능 고려
                antialias: false, // 모바일에서는 끄기
                shadowMapEnabled: false,
                maxLights: 2
            };
            break;
            
        default:
            renderSettings = {
                pixelRatio: window.devicePixelRatio,
                antialias: true,
                shadowMapEnabled: true,
                maxLights: 3
            };
    }
    
    // 렌더러 설정 적용
    renderer.setPixelRatio(renderSettings.pixelRatio);
    renderer.shadowMap.enabled = renderSettings.shadowMapEnabled;
    
    console.log(`플랫폼: ${platform}, 설정 적용됨`);
}

// 성능 모니터링 및 동적 품질 조정
class AdaptiveQuality {
    constructor(renderer) {
        this.renderer = renderer;
        this.targetFPS = 60;
        this.currentQuality = 'high';
        this.frameCount = 0;
        this.lastTime = performance.now();
    }
    
    update() {
        this.frameCount++;
        const currentTime = performance.now();
        
        if (currentTime - this.lastTime >= 1000) {
            const fps = this.frameCount;
            this.frameCount = 0;
            this.lastTime = currentTime;
            
            // FPS에 따라 품질 조정
            if (fps < 50 && this.currentQuality === 'high') {
                this.downgradeQuality();
            } else if (fps > 55 && this.currentQuality === 'low') {
                this.upgradeQuality();
            }
        }
    }
    
    downgradeQuality() {
        console.log('성능 저하 감지, 품질 낮춤');
        this.currentQuality = 'low';
        this.renderer.setPixelRatio(1);
        // 추가 최적화...
    }
    
    upgradeQuality() {
        console.log('성능 여유 있음, 품질 높임');
        this.currentQuality = 'high';
        this.renderer.setPixelRatio(window.devicePixelRatio);
    }
}

const qualityManager = new AdaptiveQuality(renderer);

renderer.setAnimationLoop(() => {
    qualityManager.update();
    renderer.render(scene, camera);
});

🎁 유용한 에셋 사이트

// 무료 3D 모델
- Sketchfab (https://sketchfab.com) - 방대한 3D 모델 라이브러리
- Poly Haven (https://polyhaven.com) - 고품질 무료 에셋
- Mixamo (https://www.mixamo.com) - 캐릭터 & 애니메이션

// 텍스처
- Poly Haven Textures - PBR 텍스처 무료
- Texture Haven - 고해상도 텍스처
- CC0 Textures - 완전 무료 라이선스

// 사운드
- Freesound (https://freesound.org)
- Zapsplat (https://www.zapsplat.com)
- BBC Sound Effects (무료!)

// 모델 최적화
- gltf-pipeline - GLTF 파일 압축
- Draco - 3D 메시 압축
- Basis Universal - 텍스처 압축

🚀 Vercel 배포 예제

// 1. package.json 설정
{
  "name": "my-webxr-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "three": "^0.150.0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

// 2. vercel.json 설정
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}

// 3. 터미널에서 배포
// npm install -g vercel
// vercel login
// vercel --prod

// 끝! 자동으로 HTTPS URL 생성됨 🎉