Three.js是一個跨瀏覽器的使用JavaScript函式庫或API來在網頁瀏覽器中建立和展示3D電腦圖形的開源通用 3D 代碼庫。Three.js使用WebGL彩現圖形，也可通過外掛程式使用 WebGPU（實驗性）、SVG 和 CSS3D 彩現器。原始碼寄存在GitHub。
 | 此條目翻譯品質不佳。 (2022年9月22日) |
 Three.js作品樣例 | |
| 原作者 | Ricardo Cabello (Mr.doob) |
|---|---|
| 開發者 | Three.js Authors[1] |
| 首次釋出 | 2010年4月24日[2] |
| 目前版本 | r144（2022年8月31日） |
| 原始碼庫 | |
| 程式語言 | JavaScript |
| 類型 | JavaScript函式庫 |
| 特許條款 | MIT特許條款[1] |
| 網站 | threejs |
概述
Three.js允許使用JavaScript建立網頁中的GPU加速的3D動畫元素，而不是使用特定的瀏覽器外掛程式。[3][4]這歸功於WebGL的出現。[5]
進階的JavaScript函式庫例如Three.js或GLGE、SceneJS、PhiloGL或一定數量的其他函式庫使作者在瀏覽器中顯示複雜的3D電腦動畫而不需要使用傳統的獨立應用程式或外掛程式成為可能。[6]
歷史
Three.js由Ricardo Cabello在2010四月於GitHub首次釋出。[2]它的起源可以追溯到他在本世紀初演示場景的參與。代碼最初是在ActionScript，稍後2009年移植到JavaScript。在Cabello看來，轉移到JavaScript有兩個優點：每次執行前沒有編譯代碼和平台獨立性。隨着WebGL的到來，Paul Brunt增加彩現功能，這使Three.js的設計與繪製的代碼作為一個模組，而不是核心本身。[7]Cabello的貢獻包括API的設計、CanvasRenderer、 SVGRenderer並負責合併各種貢獻到該專案。
該專案的二號貢獻者Branislav Ulicny在2010年張貼在自己的網站一些WebGL演示後開始參與Three.js的開發工作。他希望Three.js中的WebGL彩現能力超過CanvasRenderer或SVGRenderer。[7]他的主要貢獻通常涉及素材、着色器和後處理。
稍後在 WebGL 1.0 在2011年引入火狐4後，Joshua Koo開始參與工作。他在2011年9月建立了他的第一個面向3D文字的Three.js樣本。[7] 目前該專案總共有650次貢獻。[7]
特性
Three.js包括以下特性：[8]
- 效果：浮雕，對眼和視差屏障。
- 場景：在執行時添加和刪除對象；霧
- 鏡頭：視角和正字法；控制器：軌跡球、FPS、路徑等
- 動畫：電樞，運動學，逆運動學，變形和關鍵幀
- 燈光：環境、方向、點和點光；陰影：投射和接收
- 材料：Lambert、海防、光滑陰影，紋理和更多
- 材質：訪問完整的OpenGL着色語言（GLSL）能力：鏡頭光暈，經過深入而廣泛的後置處理庫
- 對象：網格、粒子、精靈、線、帶、骨頭和更多-所有細節層次
- 幾何：平面，立方體，球體，圓環，3D文字等；修改器：車床，擠壓和管
- 數據載入器：二進制，圖像，JSON和場景
- 事業：全套時間和三維數學函數包括錐、矩陣、四元、UVs等
- 輸入輸出：three.js-compatible JSON檔案：Blender，openctm，FBX，Max，OBJ
- 支援：API文件正在建設中，公共討論區和維基全面運作
- 例子：超過150個檔案的編碼例子加字型，模型，紋理，聲音和其他支持檔案
- 除錯：Stats.js，[9] WebGL檢查員[10]，Three.js檢查員[11]
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>
參見
- Google Chrome實驗專案
- WebGL框架列表
- Verge3D
參考文獻
參考書目
外部連結
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
