Three.js

Three.js
Three.js 예제의 화면 캡처
원저자Ricardo Cabello (Mr.doob)
개발자Three.js 개발자들[1]
발표일2010년 4월 24일(14년 전)(2010-04-24)[2]
안정화 버전
r140 / 2022년 4월 30일(2년 전)(2022-04-30)[3]
저장소
  • github.com/mrdoob/three.js 위키데이터에서 편집하기
프로그래밍 언어자바스크립트
종류자바스크립트 라이브러리
라이선스MIT[1]
상태개발 중
웹사이트threejs.org

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

개요

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

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

역사

Three.js는 2010년 4월 Ricardo Cabello가 깃허브에 처음 발표하였다.[2] 이 라이브러리의 기원은 개발자 자신이 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 );
    }

같이 보기

각주

  1. ↑ 가 나 “Three.js/license”. github.com/mrdoob. 2012년 5월 20일에 확인함. 
  2. ↑ 가 나 “First commit”. github.com/mrdoob. 2012년 5월 20일에 확인함. 
  3. ↑ “Releases · mrdoob/three.js · GitHub”. 《github.com》. 2021년 3월 11일에 확인함. 
  4. ↑ O3D
  5. ↑ 유니티 (게임 엔진)
  6. ↑ “Khronos Releases Final WebGL 1.0 Specification”. 《Khronos Group》. 2011년 3월 3일. 2012년 6월 2일에 확인함. 
  7. ↑ Crossley, Rob (2010년 1월 11일). “Study: Average dev costs as high as $28m”. Intent Media Ltd. 2010년 1월 13일에 원본 문서에서 보존된 문서. 2012년 6월 2일에 확인함. 

참고 자료

  • Dirksen, Jos (2013). 《Learning Three.js: The JavaScript 3D Library for WebGL》. UK: Packt Publishing. ISBN 9781782166283. 
  • Parisi, Tony (2012). 《Webgl Up and Running》. Sebastopol: Oreilly & Associates Inc. ISBN 9781449323578. 
  • Seidelin, Jacob (2012). 《HTML5 games : creating fun with HTML5, CSS3, and WebGL》. Chichester, West Sussex, U.K: John Wiley & Sons. 412–414쪽. ISBN 1119975085.  - "Three.js can make game development easier by taking care of low-level details"
  • Williams, James (2012). 《Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL》. Upper Saddle River, NJ: Addison-Wesley. 117–120, 123–131, 136, 140–142쪽. ISBN 0321767365. 
  • Raasch, Jon (2011). 《Smashing WebKit》. Chichester: Wiley. 181, 182, 216쪽. ISBN 1119999138. 
  • Williams, James (2013). 《Three.js By Example》. Vancouver, Canada: Leanpub. 

외부 링크

위키미디어 공용에 관련된
미디어 분류가 있습니다.
Three.js
  • Three.js 위키데이터에서 편집하기 - 공식 웹사이트
  • v
  • t
  • e
일반
소프트웨어
패키지
  • 오디오
  • 생물정보학
  • 코덱
  • 협업
  • 형상 관리
  • 장치 드라이버
    • 그래픽스
    • 무선
  • 지구물리학
  • 의료
  • 수학
  • 운영 체제
  • 프로그래밍 언어
  • 라우팅
  • 통계
  • 텔레비전
  • 비디오 게임
  • 웹 애플리케이션
  • 워드 프로세서
  • 안드로이드 앱
  • iOS 앱
  • 상용
  • 상표 등록됨
  • 과거 사유
  • 과거 오픈 소스
공동체
사용권
종류 및 표준
문제
관련 주제
  • 분류 분류