Three.js를 사용하여 도형을 시각화

Three.js를 사용하여 도형을 시각화하는 코드를 제공하겠습니다. 아래는 **2D 및 3D 도형(삼각형, 사각형, 원, 육면체, 구, 원기둥)**을 Three.js로 렌더링하는 코드입니다.

기능

• 2D 도형: 삼각형, 사각형, 원
• 3D 도형: 정육면체, 구, 원기둥
• Three.js를 사용하여 WebGL로 렌더링

---

코드

아래는 Three.js를 사용하여 웹에서 실행할 수 있는 코드입니다.

    
    
        // 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();
        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 shapes = [];

        // 삼각형 (2D)
        const triangleShape = new THREE.Shape();
        triangleShape.moveTo(0, 0);
        triangleShape.lineTo(1, 0);
        triangleShape.lineTo(0.5, Math.sqrt(3) / 2);
        triangleShape.lineTo(0, 0);

        const triangleGeometry = new THREE.ShapeGeometry(triangleShape);
        const triangleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
        const triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial);
        triangleMesh.position.set(-2, 2, 0);
        shapes.push(triangleMesh);

        // 사각형 (2D)
        const squareGeometry = new THREE.PlaneGeometry(1, 1);
        const squareMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
        const squareMesh = new THREE.Mesh(squareGeometry, squareMaterial);
        squareMesh.position.set(0, 2, 0);
        shapes.push(squareMesh);

        // 원 (2D)
        const circleGeometry = new THREE.CircleGeometry(0.5, 32);
        const circleMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide });
        const circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
        circleMesh.position.set(2, 2, 0);
        shapes.push(circleMesh);

        // 정육면체 (3D)
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xffcc00 });
        const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cubeMesh.position.set(-2, -1, 0);
        shapes.push(cubeMesh);

        // 구 (3D)
        const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
        const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x00cccc });
        const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphereMesh.position.set(0, -1, 0);
        shapes.push(sphereMesh);

        // 원기둥 (3D)
        const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
        const cylinderMaterial = new THREE.MeshStandardMaterial({ color: 0xcc00cc });
        const cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
        cylinderMesh.position.set(2, -1, 0);
        shapes.push(cylinderMesh);

        // 장면에 도형 추가
        shapes.forEach(shape => scene.add(shape));

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

        // 애니메이션 루프
        function animate() {
            requestAnimationFrame(animate);

            // 회전 애니메이션 추가
            cubeMesh.rotation.x += 0.01;
            cubeMesh.rotation.y += 0.01;
            sphereMesh.rotation.y += 0.02;
            cylinderMesh.rotation.x += 0.02;

            renderer.render(scene, camera);
        }

        animate();

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

---

설명

• 2D 도형
  • 삼각형, 사각형, 원을 ShapeGeometry 및 PlaneGeometry, CircleGeometry를 활용하여 구현
  • MeshBasicMaterial을 사용하여 조명 없이 색상을 적용
• 3D 도형
  • 정육면체(BoxGeometry), 구(SphereGeometry), 원기둥(CylinderGeometry)
  • MeshStandardMaterial을 적용하여 조명을 반영
  • PointLight를 추가하여 3D 도형이 조명에 영향을 받도록 설정
• 애니메이션
  • requestAnimationFrame(animate)를 사용하여 정육면체, 구, 원기둥이 회전하도록 애니메이션 추가
• 반응형
  • window.addEventListener('resize', ...)로 창 크기 변화에 대응

---

사용 방법

1. 위 코드를 HTML 파일로 저장 (shapes.html 등).
2. 브라우저에서 실행하면 Three.js로 렌더링된 도형들을 볼 수 있음.
3. 마우스로 확대/축소 및 회전 가능.

---