three.jsドキュメント翻訳---最初のシーンscene

5782 ワード
three.js
私の英语のレベルは限られていて、个人の趣味に限ってこのドキュメントを翻訳して、各位のネットユーザーがレンガをたたいて指导することを歓迎して、本翻訳は雕刻を経ていないで、感じだけで第1稿を作り出して、これは第1稿ではないことを肯定することができて、もしthreeを理解する必要があるならば.jsのHTML 5 3 Dクラスライブラリの資料ドキュメントはgitでダウンロードできます.アドレスはhttps://github.com/mrdoob/three.jsです.
 
1.シーンを作成する(scene)
この節の目的はThree.jsの簡単な紹介.回転立方体のシーンを作成します.もしあなたがまだ分からないならば、私たちはあなたの参考にするために1つの例を提供します;
 
Three.jsは何ですか.
 
もしあなたがこの文章を読んでいたら、あなたは前にThree.jsには何ができるか知っていますが、簡単に紹介しましょう.
Three.jsはライブラリであり、WebGL-3 Dがブラウザで簡単に表示されます.たとえば、元の生態系のWebGL構文を使用して立方体を記述します.Javascriptとシェーダコードを数百行書く必要がありますが、
 
three.jsでは、このクラスライブラリが関数をカプセル化しているので、小さな部分でこの効果を達成することができます.
(1)開始前
学習を開始する前に、次のコードを保存して実行することができます.
************************ 
<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>

 
************************
追加したコードはscriptラベルに入っています
 
(2)シーンを作成する(scene)
treeを使用できるようにする.jsは効果を示すために、シーン(scene)、視点(camera)、レンダラー(renderer)の作成、
******************************** 
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 );

 
 
********************************
このコードを見てみましょう.シーン、視点、レンダラーを構築しました.クラスライブラリにはいくつかの異なる視点camerasがあります.後の章で説明します.その中の1つのクラスで
 
perspectiveCameraは私たちのcameraの視点として、その最初の属性は視点で、2番目は幅比です.多くの場合、要素の幅を高さで割っています.最後の2つのプロパティはnearとfarがページを切り取る属です.
 
性は、オブジェクトがこのfar値よりも視点から離れている場合、またはnear値よりも小さい場合に表示されない可能性がありますが、心配する必要はありません.他の値を使用してより良い表示効果を得ることもできます.
 
次に示すのは、奇跡的な場所です.また、レンダラーインスタンスを作成するだけでなく、アプリケーションのサイズを設定し、ブラウザの幅と高さを使用してゲーム画面の幅と高さを埋めます.
 
しかし、性能が緊張しているゲームでは、高さと幅の1/2など、小さな値を設定する必要があります.解像度の一部を減らす必要がありますが、これはあなたのゲームがウィンドウの半分しか埋められないことを意味していません.ただ、ぼやけているように見えます.
 
;
次に、要素がシーンでレンダリングされるHTMLに要素を示します.
 
はい、私たちはすべて準備ができています.では、私たちの立方体はどこにありますか.彼を追加しましょう
*************************** 
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というオブジェクトがすべての点(vertices)と面(fill)を含む必要があります.後述する章でさらに詳しく説明します.
ジオメトリのほかにマテリアルの色が必要です.jsはいくつかの材質を備えていますが、ここではMeshBasicMaterialを使用しています.すべての材質は
1つのオブジェクトのプロパティに適用し、簡単にするために色のプロパティ0 x 00 ff 00で緑を表すだけで、同じ方法でcssやphotoshopでも使用します.
3つ目は、メッシュMeshが必要です.1つのメッシュオブジェクトは、マテリアルを含むシーンのジオメトリであり、移動することができます.
デフォルトではsceneを呼び出します.add()メソッドでは、coordinates(0,0,0)座標に追加されます.これにより、カメラcameraと立方体が互いに覆われる可能性があります.
このような状況が発生した場合、cameraの視点を移動する必要があります.
 
(3)シーンのレンダリング
前のコードをコピーすると、何もレンダリングされていないため、renderループレンダリングを呼び出す必要があります.
****************** 
function render() {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
}
render();

 
*******************
 
シーンをレンダリングするためのループ(毎分60回)が作成されます.ブラウズ側のWebゲームを書くのが初めてなら、setInterval関数を使わない理由を聞くかもしれません.
この関数も実現できますが、requestAnimationFrameを使用すると多くのメリットがあります.しかし、最も重要なのは、ユーザーが別のブラウザ「タブ」にナビゲートした場合、CUP処理能力や関連リソースを無駄にしないため、リソースの占有を停止することです.
立方体アニメーション
前のHTMLファイルに上のコードを挿入すると、緑の箱が見えます.立方体を動かします.
render関数のrender呼び出しに次のコードを追加
****************** 
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

 
******************
 
彼はフレームごとに1分60回運転し、きれいな回転立方体アニメーションを生成します.通常、ゲームやアプリケーションを実現するためにrenderレンダリングループを使用する必要があります.
移動を変えるなどの動作をします.もちろん、他の関数を呼び出すこともできます.
 
実行結果
おめでとうございます.最初のtrheeを完成することができます.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>

 
********************************
 
 
 
 
 
Pythonで辞書のサブセットを取得する方法
HDU 1556---ツリー配列|セグメントツリー|*