Three.js
![本頁使用了標題或全文手工轉換](http://images.weserv.nl/?url=//upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Zh_conversion_icon_m.svg/35px-Zh_conversion_icon_m.svg.png)
此條目翻譯品質不佳。 (2022年9月22日) |
![]() Three.js作品樣例 | |
原作者 | Ricardo Cabello (Mr.doob) |
---|---|
開發者 | Three.js Authors[1] |
首次釋出 | 2010年4月24日[2] |
目前版本 | |
原始碼庫 | |
程式語言 | JavaScript |
類型 | JavaScript函式庫 |
特許條款 | MIT特許條款[1] |
網站 | threejs |
Three.js是一個跨瀏覽器的使用JavaScript函式庫或API來在網頁瀏覽器中建立和展示3D電腦圖形的開源通用 3D 代碼庫。Three.js使用WebGL彩現圖形,也可通過外掛程式使用 WebGPU(實驗性)、SVG 和 CSS3D 彩現器。原始碼寄存在GitHub。
概述
Three.js允許使用JavaScript建立網頁中的GPU加速的3D動畫元素,而不是使用特定的瀏覽器外掛程式。[5][6]這歸功於WebGL的出現。[7]
進階的JavaScript函式庫例如Three.js或GLGE、SceneJS、PhiloGL或一定數量的其他函式庫使作者在瀏覽器中顯示複雜的3D電腦動畫而不需要使用傳統的獨立應用程式或外掛程式成為可能。[8]
歷史
Three.js由Ricardo Cabello在2010四月於GitHub首次釋出。[2]它的起源可以追溯到他在本世紀初演示場景的參與。代碼最初是在ActionScript,稍後2009年移植到JavaScript。在Cabello看來,轉移到JavaScript有兩個優點:每次執行前沒有編譯代碼和平台獨立性。隨着WebGL的到來,Paul Brunt增加彩現功能,這使Three.js的設計與繪製的代碼作為一個模組,而不是核心本身。[9]Cabello的貢獻包括API的設計、CanvasRenderer、 SVGRenderer並負責合併各種貢獻到該專案。
該專案的二號貢獻者Branislav Ulicny在2010年張貼在自己的網站一些WebGL演示後開始參與Three.js的開發工作。他希望Three.js中的WebGL彩現能力超過CanvasRenderer或SVGRenderer。[9]他的主要貢獻通常涉及素材、着色器和後處理。
稍後在 WebGL 1.0 在2011年引入火狐4後,Joshua Koo開始參與工作。他在2011年9月建立了他的第一個面向3D文字的Three.js樣本。[9] 目前該專案總共有650次貢獻。[9]
特性
Three.js包括以下特性:[10]
- 效果:浮雕,對眼和視差屏障。
- 場景:在執行時添加和刪除對象;霧
- 鏡頭:視角和正字法;控制器:軌跡球、FPS、路徑等
- 動畫:電樞,運動學,逆運動學,變形和關鍵幀
- 燈光:環境、方向、點和點光;陰影:投射和接收
- 材料:Lambert、海防、光滑陰影,紋理和更多
- 材質:訪問完整的OpenGL着色語言(GLSL)能力:鏡頭光暈,經過深入而廣泛的後置處理庫
- 對象:網格、粒子、精靈、線、帶、骨頭和更多-所有細節層次
- 幾何:平面,立方體,球體,圓環,3D文字等;修改器:車床,擠壓和管
- 數據載入器:二進制,圖像,JSON和場景
- 事業:全套時間和三維數學函數包括錐、矩陣、四元、UVs等
- 輸入輸出:three.js-compatible JSON檔案:Blender,openctm,FBX,Max,OBJ
- 支援:API文件正在建設中,公共討論區和維基全面運作
- 例子:超過150個檔案的編碼例子加字型,模型,紋理,聲音和其他支持檔案
- 除錯:Stats.js,[11] WebGL檢查員[12],Three.js檢查員[13]
Three.js在所有支援WebGL 1.0的瀏覽器皆可執行。
使用
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>
參見
參考文獻
- ^ 1.0 1.1 1.2 Three.js/license. github.com/mrdoob. [20 May 2012]. (原始內容存檔於2017-05-07).
- ^ 2.0 2.1 First commit. github.com/mrdoob. [20 May 2012]. (原始內容存檔於2010-04-30).
- ^ https://registry.npmjs.com/three; 檢索日期: 2023年4月9日.
- ^ Release 161. 2024年1月31日 [2024年2月20日].
- ^ O3D
- ^ Unity (game engine)
- ^ Khronos Releases Final WebGL 1.0 Specification. Khronos Group. March 3, 2011 [2 June 2012]. (原始內容存檔於2016-11-08).
- ^ Crossley, Rob. Study: Average dev costs as high as $28m. Intent Media Ltd. 11 January 2010 [2 June 2012]. (原始內容存檔於2010-01-13).
- ^ 9.0 9.1 9.2 9.3 Three.js White Paper. Github.com. 2012-05-21 [2013-05-09]. (原始內容存檔於2019-02-18).
- ^ mrdoob. Features mrdoob/three.js Wiki GitHub. Github.com. 2012-11-26 [2013-05-09]. (原始內容存檔於2014-06-01).
- ^ Stats.js. Github.com. [2013-05-09]. (原始內容存檔於2013-05-12).
- ^ WebGL Inspector. Benvanik.github.com. [2013-05-09]. (原始內容存檔於2010-11-24).
- ^ Three.js Inspector Labs. Zz85.github.com. [2013-05-09]. (原始內容存檔於2013-01-30).
參考書目
- 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(頁面存檔備份,存於互聯網檔案館)
|