Three.js

Three.js

Three.js作品樣例 Three.js作品樣例
原作者	Ricardo Cabello (Mr.doob)
開發者	Three.js Authors
首次釋出	2010年4月24日​（2010-04-24）
目前版本
原始碼庫	{{URL|example.com|可选的显示文本}}
程式語言	JavaScript
引擎
類型	JavaScript函式庫
授權條款	MIT授權條款
網站	threejs.org

Three.js是一個跨瀏覽器的使用JavaScript函式庫或API來在網頁瀏覽器中建立和展示3D電腦圖形的開源通用 3D 代碼庫。Three.js使用WebGL渲染圖形，也可通過外掛程式使用 WebGPU（實驗性）、SVG 和 CSS3D 渲染器。原始碼代管在GitHub。

概述

Three.js允許使用JavaScript建立網頁中的GPU加速的3D動畫元素，而不是使用特定的瀏覽器外掛程式。這歸功於WebGL的出現。

進階的JavaScript函式庫例如Three.js或GLGE、SceneJS、PhiloGL或一定數量的其他函式庫使作者在瀏覽器中顯示複雜的3D電腦動畫而不需要使用傳統的獨立應用程式或外掛程式成為可能。

歷史

Three.js由Ricardo Cabello在2010四月於GitHub首次釋出。它的起源可以追溯到他在本世紀初演示場景的參與。代碼最初是在ActionScript，稍後2009年移植到JavaScript。在Cabello看來，轉移到JavaScript有兩個優點：每次執行前沒有編譯代碼和平台獨立性。隨著WebGL的到來，Paul Brunt增加渲染功能，這使Three.js的設計與繪製的代碼作為一個模組，而不是核心本身。Cabello的貢獻包括API的設計、CanvasRenderer、 SVGRenderer並負責合併各種貢獻到該專案。

該專案的二號貢獻者Branislav Ulicny在2010年張貼在自己的網站一些WebGL演示後開始參與Three.js的開發工作。他希望Three.js中的WebGL渲染能力超過CanvasRenderer或SVGRenderer。他的主要貢獻通常涉及素材、著色器和後處理。

稍後在 WebGL 1.0 在2011年引入火狐4後，Joshua Koo開始參與工作。他在2011年9月建立了他的第一個面向3D文字的Three.js樣本。 目前該專案總共有650次貢獻。

特性

Three.js包括以下特性：

• 效果：浮雕，對眼和視差屏障。
• 場景：在執行時添加和刪除對象；霧
• 鏡頭：視角和正字法；控制器：軌跡球、FPS、路徑等
• 動畫：電樞，運動學，逆運動學，變形和關鍵訊框
• 燈光：環境、方向、點和點光；陰影：投射和接收
• 材料：Lambert、海防、光滑陰影，紋理和更多
• 材質：訪問完整的OpenGL著色語言（GLSL）能力：鏡頭光暈，經過深入而廣泛的後置處理庫
• 對象：網格、粒子、精靈、線、帶、骨頭和更多-所有細節層次
• 幾何：平面，立方體，球體，圓環，3D文字等；修改器：車床，擠壓和管
• 資料載入器：二進制，圖像，JSON和場景
• 事業：全套時間和三維數學函式包括錐、矩陣、四元、UVs等
• 輸入輸出：three.js-compatible JSON檔案：Blender，openctm，FBX，Max，OBJ
• 支援：API文件正在建設中，公共論壇和維基全面運作
• 例子：超過150個檔案的編碼例子加字體，模型，紋理，聲音和其他支持檔案
• 除錯：Stats.js， WebGL檢查員，Three.js檢查員

Three.js在所有支援WebGL 1.0的瀏覽器皆可執行。

Three.js依據MIT公用授權條款釋出。

使用

Three.js函式庫是一個獨立的JavaScript檔案。它在網頁中可以通過連結至本地或遠端副本而連結在該頁面中：

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

以下代碼創造了一個場景，並添加攝錄影機和一個攝錄影機和一個立方體到場景中，且建立一個WebGL渲染並添加視圖到document.body元素中。一旦被載入，這個立方體將以它的X軸線和Y軸線旋轉。

<script>

    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 );
    }

</script>

參見

• Google Chrome實驗專案
• WebGL框架列表
• Verge3D

參考書目

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

• Williams, James. Three.js By Example. Vancouver, Canada: Leanpub. 2013 [2017-06-06]. （原始內容存檔於2018-08-19）. 

外部連結

• 官方網站
• Three.js source（頁面存檔備份，存於網際網路檔案館） in GitHub
• AlteredQualia（頁面存檔備份，存於網際網路檔案館）
• Stemkoski Three.js Examples（頁面存檔備份，存於網際網路檔案館）
• 1-2-three: graphic simulation by example（頁面存檔備份，存於網際網路檔案館）
• Learning Three.js（頁面存檔備份，存於網際網路檔案館）
• kepo-ing Zz85
• Learning WebGL* WebGL Review Site（頁面存檔備份，存於網際網路檔案館）