Three.js에서 주전자(Teapot) 모델을 렌더링

Three.js에서 주전자(Teapot) 모델을 렌더링하는 예제를 제공합니다. Three.js 자체에는 기본적인 주전자 모델이 없지만, Three.js에서 지원하는 TeapotGeometry를 사용하거나, 외부 .glb 또는 .obj 모델을 로드하는 방식으로 구현할 수 있습니다.

---

📌 방법 1: TeapotGeometry 사용 (외부 라이브러리 필요)

Three.js의 TeapotGeometry는 기본 라이브러리에 포함되지 않으므로, **three/examples/jsm/geometries/TeapotGeometry.js**를 불러와야 합니다.

    
    
        import { TeapotGeometry } from '<a href=https://threejs.org/examples/jsm/geometries/TeapotGeometry.js';>https://threejs.org/examples/jsm/geometries/TeapotGeometry.js';</a>

        // Three.js 기본 설정
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 조명 추가
        const light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(5, 5, 5);
        scene.add(light);

        // 주전자 모델 생성
        const teapotGeometry = new TeapotGeometry(1);
        const teapotMaterial = new THREE.MeshStandardMaterial({ color: 0xff5733, metalness: 0.5, roughness: 0.2 });
        const teapotMesh = new THREE.Mesh(teapotGeometry, teapotMaterial);
        scene.add(teapotMesh);

        // 카메라 위치
        camera.position.z = 5;

        // 애니메이션 루프
        function animate() {
            requestAnimationFrame(animate);
            teapotMesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        animate();

        // 반응형 설정
        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });

    

---

📌 방법 2: .glb 또는 .obj 주전자 모델 불러오기

주전자 모델(teapot.glb)을 직접 불러오는 방법도 가능합니다. 이 경우, Three.js의 GLTFLoader 또는 OBJLoader를 사용합니다.

    
    
        import { GLTFLoader } from '<a href=https://threejs.org/examples/jsm/loaders/GLTFLoader.js';>https://threejs.org/examples/jsm/loaders/GLTFLoader.js';</a>

        // Three.js 기본 설정
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 조명 추가
        const light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(5, 5, 5);
        scene.add(light);

        // 주전자 모델 로드
        const loader = new GLTFLoader();
        loader.load('path/to/teapot.glb', function (gltf) {
            const teapot = gltf.scene;
            teapot.scale.set(1, 1, 1);
            teapot.position.set(0, 0, 0);
            scene.add(teapot);
        });

        // 카메라 위치
        camera.position.z = 5;

        // 애니메이션 루프
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        animate();

        // 반응형 설정
        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });

    

---

🚀 주요 차이점

방법 장점 단점

TeapotGeometry 사용	Three.js 내부에서 직접 생성 가능	추가 라이브러리 필요
GLTF/OBJ 모델 로드	세부 디테일이 높은 주전자 모델 가능	외부 모델 파일 필요

---

💡 결론

• 빠르게 테스트하려면 TeapotGeometry 사용이 간편합니다.
• 실제 프로젝트에서 사용하려면 .glb 또는 .obj 모델을 로드하는 방식이 더 나은 선택입니다.

이제 원하는 방법을 선택하여 사용하면 됩니다! 추가 요청이 있으면 말씀해주세요. 🚀