Three.js

Three.js

Three.js作品さくひん樣さま例れい
原作げんさく者しゃ	Ricardo Cabello (Mr.doob)
開發かいはつ者しゃ	Three.js Authors
首くび次じ釋しゃく出いずる	2010年ねん4月がつ24日にち​（2010-04-24）
目前もくぜん版本はんぽん	r144（2022年ねん8月がつ31日にち​（2022-08-31））
原始げんし碼庫	github.com/mrdoob/three.js
程ほど式しき語ご言げん	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（頁ぺーじ面めん存そん檔備份，存そん於網あみ際ぎわ網もう路ろ檔案館かん）