Three.js/DOC(一)シーンを作成する

4581 ワード
JavaScript canvas httml 5 WebGL three.js
Three.js/DOC 
Manual
シーンを作成
本節の目標はThree.jsは簡単な紹介をします.回転する立方体でシーンを設定することから始めます.例を以下に示す.
何が?js? 
この文章を読んでいるならjsにはある程度の理解があるので、簡単に説明しましょう.jsは何ですか.Three.jsはライブラリであり,WebGLの3 D効果をブラウザで容易に運用できる.元のWebGLでは単純な立方体が数百のJavascriptとシェーダコードの行になり、Threeになります.jsはわずかなコードしか必要ありません.
私たちが始める前に
Threeを使うjs、それを表示する場所が必要です.次のコードは、HTMLファイルをコンピュータに保存し、ブラウザで開きます.
まずブラウザはWEBGLをサポートし、最も重要なのはHTML 5(-o-)ハハハ、IE 6、7、8ハハハをサポートすることです.chromはwebglを開く
<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

これが全てです.以下のコードはすべて空のラベルに入れます.
シーンの作成
本当に表示できるようにjsは何をしますか?シーン、カメラ、レンダラーの3つが必要です.
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 );
document.body.appendChild( renderer.domElement );

これがどういうことなのか説明するのに少し時間を費やしましょう.これで、カメラ(camera)、レンダラー(renderer)のシーン(scene)を作成しました.Three.jsにはたくさんのカメラがあります.今から1つ使って、それから詳しく紹介して、PerspectiveCameraを使ってみましょう.PerspectiveCameraには4つのパラメータがあります.以下、簡単に紹介します.詳しくは今後のCamera部分を参照してください.パラメータ1.視野角、パラメータ2はアスペクト比です.このパラメータは、ほとんどいつも使用されている要素の幅を高さで割っています.そうしないと、古い映画のように画像が平らになります.パラメータ3は、カメラが許容する物体からの最も近い距離である.パラメータ4は、カメラが物体から許容する最も遠い距離である.デフォルトでは、カメラの上方向はY軸、右方向はX軸、奥方向はZ軸である.
PerspectiveCameraについて簡単に説明します.次にレンダラーについて簡単に紹介します.原文では、This is where the magic happens!レンダラーのインスタンスを作成し、幅と高さを設定します.ここではシーンと同じ長さと幅を設定し、windowに設定することもできます.innerWidth/2とwindow.innnerHeight/2は、このように設定すると中の画像が1/2になるのではなく、ぼやけてしまいます.(原文はそう書いてありますが、試してみると1/2サイズになっていて無言)
最後にrendererをbodyに追加すると、rendererは自動的にラベルを作成してに追加します.
では、次はシーンに立方体(cube)を入れましょう.
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;
立方体を作成するには、CubeGeometryが必要です.立方体のすべての点(頂点)と塗りつぶし(面)を含むオブジェクトです.今後、私たちはこれを深く議論します.
幾何学的形状に加えて、色を塗る材料が必要です.Three.jsはいくつかの材料を持っていて、私たちはここでMeshBasicMaterialを使っています.すべての材料には、プロパティを設定するオブジェクトが必要です.ここでは0 x 00 FF 00で表される色属性で、緑色です.この色の表示はCSSやPhotoshop(16進数の色)の表示と同じです.
3つ目はグリッドが必要ですメッシュはオブジェクトです.ジオメトリを挿入し、材料を適用してシーンに入れると、自由に移動できます.
デフォルトではsceneを呼び出すとadd()は、私たちが追加したものが座標(0,0,0)に追加されます.これにより、カメラと多次元データセットが重複します.このような状況を避けるためには、カメラを少し動かすだけでいいです.
シーンをレンダー(Render Scene)
上記のコードを前に作成したHTMLファイルにコピーすると、何も見えません.これは私たちがまだ実際に何もレンダリングしていないからです.このためには、このステップをレンダリングする必要があります.
function render() {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
}
render();

これにより、レンダーサイクルが作成され、レンダラーがシーンを毎秒60回描画する(FPS 60).なぜsetIntervalを使わないのかと聞かれるかもしれませんが、requestAnimationFrameはブラウザで他のページを閲覧すると、このページの効果はレンダリングを停止し、ブラウザの貴重な処理能力とパソコンの電力を無駄にしないように最適化することができます.setIntervalは堅苦しいので、何を見てもそのページが開いている限り、レンダリングは止まらない.
動く立方体
もし前に私の手順に従ってやったら、緑の立方体が見えます.今、ギャグのものをください.小さな立方体を動かす上のrender関数に次のコードを追加
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
これはフレーム毎(毎秒60回)に立方体を良好な回転アニメーションにする.
最終成果(ガガ)
おめでとう!これで、最初のThreeを完了しました.jsのアプリケーション.良いスタートがありましたね~完全なコードの下で提供します.それをプレイして、より良い理解を得ることができますよ~
<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="three.min.js"></script>
		<script>
			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);
			document.body.appendChild(renderer.domElement);

			var geometry = new THREE.CubeGeometry(1,1,1);
			var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
			var cube = new THREE.Mesh(geometry, material);
			scene.add(cube);

			camera.position.z = 5;

			var render = function () {
				requestAnimationFrame(render);

				cube.rotation.x += 0.1;
				cube.rotation.y += 0.1;

				renderer.render(scene, camera);
			};

			render();
		</script>
	</body>
</html>
three.js行ってきますよ.https://github.com/mrdoob/three.js/
HTMLの各バージョンDTDタイプの紹介とフォーマット
Object-Cは乱数と四捨五入により2桁の小数を保持してNSNumberを取得する