用戶:Yhy9630/沙盒/3

Three.js

Three.js作品樣例
原作者	Ricardo Cabello (Mr.doob)
開發者	Three.js Authors
首次發佈	2010年4月24日​（2010-04-24）
當前版本	r83（2016年12月15日​（2016-12-15））
程式語言	JavaScript
類型	JavaScript函數庫
許可協議	MIT
網站	threejs.org

Three.js是一個跨瀏覽器的腳本，使用JavaScript函數庫或API來在網頁瀏覽器中創建和展示動畫的三維計算機圖形。Three.js使用WebGL。原始碼託管在GitHub。

概述

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

高級的JavaScript函數庫例如Three.js或GLGE、SceneJS、PhiloGL或一定數量的其他函數庫使作者在瀏覽器中顯示複雜的三維計算機動畫而不需要使用傳統的獨立應用程式或插件成為可能。

歷史

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框架列表

參考書目

• Dirksen, Jos. Learning Three.js: The JavaScript 3D Library for WebGL. UK: Packt Publishing. 2013. ISBN 9781782166283. 
• 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. 

外部連結

• 官方網站
• 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