Three.jsはWebGLを簡単に扱えるようにしたJavascriptライブラリで、ブラウザで3Dオブジェクトをぐりぐり動かせる。とりあえず3Dオブジェクトを表示してみるところまでやってみる。バージョンはr74を使用。
１．Three.jsをThree.jsのサイトからダウンロード。
２．ダウンロードしたファイルを解凍し、three.js-master\build\three.min.jsを適当なフォルダにコピーしておく。ここではjsというフォルダを作成してそこにコピー。
３．htmlファイルを用意する。また、three.min.jsを読み込むようにしておく。
４．Three.js関連のコードを<body>と</body>との間に記述する。最低限必要なのは、シーン、カメラ、レンダラー、オブジェクトの作成とレンダリング。
５．以下のような立法体が表示される。
１．Three.jsをThree.jsのサイトからダウンロード。
２．ダウンロードしたファイルを解凍し、three.js-master\build\three.min.jsを適当なフォルダにコピーしておく。ここではjsというフォルダを作成してそこにコピー。
３．htmlファイルを用意する。また、three.min.jsを読み込むようにしておく。
４．Three.js関連のコードを<body>と</body>との間に記述する。最低限必要なのは、シーン、カメラ、レンダラー、オブジェクトの作成とレンダリング。
// シーンの作成
var scene = new THREE.Scene();
// カメラの作成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// レンダラーの作成
var renderer = new THREE.WebGLRenderer();
// レンダラーが描画するキャンバスサイズの設定
renderer.setSize( window.innerWidth, window.innerHeight );
// キャンバスをDOMツリーに追加
document.body.appendChild( renderer.domElement );
// ジオメトリーの作成
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// マテリアルの作成
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// オブジェクトの作成
var cube = new THREE.Mesh( geometry, material );
// オブジェクトをシーンに追加
scene.add( cube );
// カメラ位置調整
// 初期状態ではオブジェクトもカメラもともに原点にあるので、どちらかの位置を変えないとカメラに何も映らない
camera.position.z = 5;
camera.position.x = 0.5;
camera.position.y = 0.5;
// シーンのレンダリング
function render() {
renderer.render( scene, camera );
}
render();
５．以下のような立法体が表示される。
0 件のコメント:
コメントを投稿