Three.js
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/12/10 00:21 UTC 版)
 Three.jsの例のスクリーンショット | |
| 作者 | Ricardo Cabello (Mr.doob) |
|---|---|
| 開発元 | Three.js Authors[1] |
| 初版 | 2010年4月24日[2] |
| 最新版 |
146[3]  - 2022年10月27日 [±] |
| リポジトリ |
|
| プログラミング 言語 | JavaScript |
| サイズ | 409,474 KB, gzip: 98,706 KB[2] |
| サポート状況 | アクティブ |
| 種別 | JavaScriptライブラリ |
| ライセンス | MIT License[1] |
| 公式サイト |
threejs |
three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリおよびAPIである。
HTML5のcanvas要素、Scalable Vector Graphics、WebGLとの組み合わせが可能である。ソースコードはGitHubでホストされている。
WebGLというWeb標準技術の登場により[4]、商用のブラウザ拡張機能に頼らずに、HTMLファイル内に埋め込まれたJavaScriptを介して、GPUアクセラレーションによる動的表現を描画することが可能になった[5][6]。three.jsは、WebGLのAPIを簡略化するためのラッパである。
例
ライブラリは単一のJavaScriptファイルであり、以下のようにHTML内でローカルやリモートコピーにリンクすることで動作する。
<script src="js/three.min.js"></script>
以下のコードはdocument.body要素内に、画面上にカメラ、XY軸で回転する立方体、WebGL描画表示域を追加する。
<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>
脚注
- ^ a b “Three.js/license”. github.com/mrdoob. 2012年5月20日閲覧。
- ^ a b “Three.js/readme.md”. github.com/mrdoob. 2012年5月20日閲覧。
- ^ "Release 146"; 閲覧日: 2022年11月27日; 出版日: 2022年10月27日.
- ^ “Khronos Releases Final WebGL 1.0 Specification”. Khronos Group. (2011年3月3日) 2012年6月2日閲覧。
- ^ O3D
- ^ Unity
外部リンク
three.js
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/04/15 03:04 UTC 版)
WebGLだけでなく、CanvasやSVG、CSS3によるレンダリングにも対応している3Dエンジン。
※この「three.js」の解説は、「3Dライブラリ」の解説の一部です。
「three.js」を含む「3Dライブラリ」の記事については、「3Dライブラリ」の概要を参照ください。
ウィキペディア小見出し辞書の「three.js」の項目はプログラムで機械的に意味や本文を生成しているため、不適切な項目が含まれていることもあります。ご了承くださいませ。
お問い合わせ。
- three.jsのページへのリンク
