3D Interactive

 

3D 인터랙티브

 

사용자가 3D 환경과 상호작용할 수 있는 기술

 

 

일반적인 3D 모델
단순 시각적 표현

 

3D인터랙티브 환경

마우스, 키보드, 터치 등 다양한 입력 방식으로 3D 객체 조작 가능

 

3D 사이트 예시

Muhammad Bilal Khan - WebGL Developer

 

 

 

Three.js

JavaScript 기반의 Web 3D 라이브러리

• 다양한 형태의 3D 객체, 조명, 카메라, 재질, 텍스처 등을 기본 지원
• 커뮤니티가 활발하여 레퍼런스 자료 다수, 학습 및 문제 해결 용이

 

 

Three.js 기본 코드 예제

import * as THREE from 'three';

function createScene() {
    // 렌더러 생성
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    // 씬 생성
    const scene = new THREE.Scene();
    
    // 카메라 생성
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 3D 박스 추가 (렌더링 확인용)
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

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

createScene();

 

 

 

 

R3F(React Three Fiber)

 

React와 Three.js를 연결(Wrapping)하는 라이브러리

• React의 직관적인 UI 작성법을 3D 그래픽에 적용가능
• Scene, Camera, Renderer 등의 설정을 간편화
• 3D 객체를 재사용 가능한 컴포넌트로 만들기 용이, 대규모 프로젝트에서 코드 유지 관리와 협업 수월

 

R3F 기본 코드 예제

import { Canvas } from '@react-three/fiber';

function App() {
    return (
        <Canvas>
            {/* 여기에 3D 오브젝트 추가 */}
        </Canvas>
    );
}

export default App;

 

 

Three.js vs. R3F

	Three.js (JavaScript 기반)	R3F(React 방식)
코드 스타일	절차적 (Imperative)	선언적 (Declarative)
설정 방식	Scene, Camera, Renderer 등을 직접 설정	<Canvas> 내부에서 JSX처럼 작성
코드 길이	상대적으로 길고 복잡함	짧고 직관적임
컴포넌트화	직접 재사용하기 어려움	React 컴포넌트 방식으로 쉽게 재사용
생태계	Three.js 커뮤니티 중심	React 개발자들도 활용 가능

→ React 프로젝트에서 3D를 활용하고 싶다면 R3F

→ 순수 JavaScript 환경에서는 Three.js 단독으로도 3D 기능 구현 가능