{{위키데이터 속성 추적}}
{{소프트웨어 정보
| name = Three.js
| logo = Three.js Icon.svg
| screenshot = File:Three.js-code-example.jpg
| caption = Three.js 예제의 화면 캡처
| author = Ricardo Cabello (Mr.doob)
| developer = Three.js 개발자들<ref name="license">{{웹 인용|url= https://github.com/mrdoob/three.js/blob/master/LICENSE|title=Three.js/license|publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
| released = {{시작 날짜와 나이|2010|04|24}}<ref name="firstcommit">{{웹 인용|url= https://github.com/mrdoob/three.js/commit/a90c4e107ff6e3b148458c96965e876f9441b147|title=First commit |publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
| latest release version = r140
| latest release date = {{시작 날짜와 나이|2022|04|30}}<ref>
{{웹 인용
|url = https://github.com/mrdoob/three.js/releases
|title = Releases · mrdoob/three.js · GitHub
|access-date = 11 March 2021
|website = github.com
}}</ref>
| programming language = [[자바스크립트]]
| status = 개발 중
| genre = [[자바스크립트 라이브러리]]
| license = [[MIT 허가서|MIT]]<ref name="license" />
| website = {{URL|https://threejs.org/}}
}}
'''Three.js'''는 [[웹 브라우저]]에서 [[3차원 컴퓨터 그래픽스|3차원 컴퓨터 그래픽스]] 애니메이션 응용을 만들고 표현하기 위해 사용되는 [[자바스크립트 라이브러리]]이자 [[API]]이다. 오픈 소스 프로젝트로 [[깃허브]]에서 공개되어 있다.

== 개요 ==
Three.js는 특정 웹 브라우저나 플러그인에 의존하지 않고 [[자바스크립트]] 언어를 사용하여 웹 컨텐츠의 한 부분으로서 [[그래픽 처리 장치]](GPU)에서 가속되는 3차원 컨텐츠를 만들 수 있도록 해 준다.<ref>[[O3D]]</ref><ref>[[유니티 (게임 엔진)]]</ref> 이는 [[WebGL]]의 출현으로 인하여 가능하게 되었다.<ref>{{뉴스 인용|title=Khronos Releases Final WebGL 1.0 Specification|url=http://www.khronos.org/news/press/khronos-releases-final-webgl-1.0-specification|accessdate=2 June 2012|newspaper=Khronos Group|date=March 3, 2011}}</ref>

Three.js, [[GLGE]], SceneJS, PhiloGL, Babylon.js 와 같은 상위 계층의 라이브러리들은 전통적인 독립형 애플리케이션이나 플러그인을 이용한 개발에 비해 적은 노력으로 브라우저에서 실행 가능한 복잡한 3D 컴퓨터 애니메이션을 컨텐츠를 표현할 수 있게 되었다.<ref>{{웹 인용|last=Crossley|first=Rob|title=Study: Average dev costs as high as $28m|url=http://www.develop-online.net/news/33625/Study-Average-dev-cost-as-high-as-28m|archive-url=https://web.archive.org/web/20100113144801/http://www.develop-online.net/news/33625/Study-Average-dev-cost-as-high-as-28m|url-status=dead|archive-date=13 January 2010|publisher=Intent Media Ltd|accessdate=2 June 2012|date=11 January 2010}}</ref>

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

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

<syntaxhighlight lang="html"><script src="js/three.min.js"></script></syntaxhighlight>

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

<syntaxhighlight lang=javascript>
    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 );
    }
</syntaxhighlight>

== 같이 보기 ==
* [[구글 크롬 실험실]]
* [[자바스크립트 프레임워크]]
* [[자바스크립트 라이브러리]]
== 각주 ==
{{각주}}

== 참고 자료 ==
{{참고 자료 시작}}
* {{서적 인용| last = Dirksen | first = Jos | title = Learning Three.js: The JavaScript 3D Library for WebGL | publisher = Packt Publishing | location = UK | year = 2013 | isbn = 9781782166283 | url=http://www.packtpub.com/learning-three-js-javascript-3d-library-for-webgl/book }}
* {{서적 인용| last = Parisi | first = Tony | title = Webgl Up and Running | url = https://archive.org/details/webgluprunning0000pari | publisher = Oreilly & Associates Inc | location = Sebastopol | year = 2012 | isbn = 9781449323578 }}
* {{서적 인용| last = Seidelin | first = Jacob | title = HTML5 games : creating fun with HTML5, CSS3, and WebGL | url = https://archive.org/details/html5gamescreati0000seid_k2m5 | publisher = John Wiley & Sons | location = Chichester, West Sussex, U.K | pages = [https://archive.org/details/html5gamescreati0000seid_k2m5/page/412 412]–414 | year = 2012 | isbn = 1119975085 }} - "Three.js can make game development easier by taking care of low-level details"
* {{서적 인용| last = Williams | first = James | title = Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL | url = https://archive.org/details/learninghtmlgame00will | publisher = Addison-Wesley | location = Upper Saddle River, NJ | year = 2012 | pages = [https://archive.org/details/learninghtmlgame00will/page/n135 117]–120, 123–131, 136, 140–142 |isbn = 0321767365 }}
* {{서적 인용| last = Raasch | first = Jon | title = Smashing WebKit | publisher = Wiley | location = Chichester | pages = 181, 182, 216 | year = 2011 | isbn = 1119999138 }}
{{참고 자료 끝}}
* {{서적 인용| last = Williams | first = James | title = Three.js By Example | publisher = Leanpub | location = Vancouver, Canada | year = 2013 | url=https://leanpub.com/threejsbyexample }}

== 외부 링크 ==
{{위키공용분류|Three.js}}
* {{공식 웹사이트}}

{{FLOSS}}

{{기본정렬:Three.js}}

[[분류:2010년 소프트웨어]]
[[분류:크로스 플랫폼 소프트웨어]]
[[분류:그래픽 라이브러리]]
[[분류:자바스크립트 라이브러리]]
[[분류:MIT 라이선스 소프트웨어]]
[[분류:WebGL]]