three.js

スリー.js

JavaScript 3D ライブラリ

プロジェクトの目的は、使いやすく、軽量で、クロスブラウザーに対応した汎用 3D ライブラリを作成することです。現在のビルドには WebGL レンダラーのみが含まれていますが、WebGPU (実験的)、SVG、CSS3D レンダラーもアドオンとして利用できます。

例 — ドキュメント — マニュアル — Wiki — 移行 — 質問 — フォーラム — Discord

使用法

このコードは、シーン、カメラ、幾何学的立方体を作成し、立方体をシーンに追加します。次に、シーンとカメラのWebGLレンダラーを作成し、そのビューポートをdocument.body要素に追加します。最後に、カメラのシーン内で立方体をアニメーション化します。

 import * as THREE from 'three' ;

const width = window . innerWidth , height = window . innerHeight ;

// init

const camera = new THREE . PerspectiveCamera ( 70 , width / height , 0.01 , 10 ) ;
camera . position . z = 1 ;

const scene = new THREE . Scene ( ) ;

const geometry = new THREE . BoxGeometry ( 0.2 , 0.2 , 0.2 ) ;
const material = new THREE . MeshNormalMaterial ( ) ;

const mesh = new THREE . Mesh ( geometry , material ) ;
scene . add ( mesh ) ;

const renderer = new THREE . WebGLRenderer ( { antialias : true } ) ;
renderer . setSize ( width , height ) ;
renderer . setAnimationLoop ( animate ) ;
document . body . appendChild ( renderer . domElement ) ;

// animation

function animate ( time ) {

	mesh . rotation . x = time / 2000 ;
	mesh . rotation . y = time / 1000 ;

	renderer . render ( scene , camera ) ;

}

すべてがうまくいけば、これが表示されるはずです。

このリポジトリのクローンを作成する

すべての履歴を含むリポジトリのクローンを作成すると、最大 2 GB のダウンロードが必要になります。履歴全体が必要ない場合は、 depthパラメータを使用してダウンロード サイズを大幅に削減できます。

git clone --depth=1 https://github.com/mrdoob/three.js.git

変更ログ

リリース