Three.js

1 min read
In 12 languages

All data from the card 10

원저자: Ricardo Cabello (Mr.doob)
개발자: Three.js 개발자들
발표일: 2010년 4월 24일
안정화 버전: 187 / 2026년 10월 30일
저장소: github.com/mrdoob/three.js
프로그래밍 언어: 자바스크립트
종류: 자바스크립트 라이브러리
라이선스: MIT
상태: 개발 중
웹사이트: threejs.org

Three.js는 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 자바스크립트 라이브러리이자 API이다. 오픈 소스 프로젝트로 깃허브에서 공개되어 있다.

개요

Three.js는 특정 웹 브라우저나 플러그인에 의존하지 않고 자바스크립트 언어를 사용하여 웹 컨텐츠의 한 부분으로서 그래픽 처리 장치(GPU)에서 가속되는 3차원 컨텐츠를 만들 수 있도록 해 준다. 이는 WebGL의 출현으로 인하여 가능하게 되었다.

Three.js, GLGE, SceneJS, PhiloGL, Babylon.js 와 같은 상위 계층의 라이브러리들은 전통적인 독립형 애플리케이션이나 플러그인을 이용한 개발에 비해 적은 노력으로 브라우저에서 실행 가능한 복잡한 3D 컴퓨터 애니메이션을 컨텐츠를 표현할 수 있게 되었다.

역사

Three.js는 2010년 4월 Ricardo Cabello가 깃허브에 처음 발표하였다. 이 라이브러리의 기원은 개발자 자신이 2000년대 초 데모씬에 참여한 시기로 거슬러 올라간다. 이 코드는 액션스크립트로 처음 개발되었다가 2009년 자바스크립트로 이식되었다.

사용법

Three.js 라이브러리는 한개의 자바스크립트 파일이다. 로컬이나 원격 사본에 연결함으로써 웹 페이지 안에 포함시킬 수 있다.

<script src="js/three.min.js"></script>

다음의 예제 코드는 씬을 하나 만들고 카메라 하나와 큐브 하나를 해당 씬에 추가하고 WebGL 렌더러를 만들고 document.body 요소에 뷰포트를 추가한다. 로드되면 큐브는 X축과 Y축 주변을 회전한다.

    var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );
    }