SQLの窓

2012年03月08日

Three.js(Canvas) : 2平面(それぞれ裏表としてテクスチャ)、MeshBasicMaterial に overdraw: true をセットする意味と、Texture オブジェクトを onload で作成

Three.js(Canvas) : 2平面(それぞれ裏表としてテクスチャ)の実行ページ

セグメント THREE.PlaneGeometry(350, 400, 5, 5) のように、第3、4引数は画面を分割する セグメントの数で、この数が多いほど表現が正確になります。 ※ 平面の場合は遠近によるテクスチャの歪みが減少 ※ 球面の場合は、より細かに表現 このセグメントの境界の表示が overdraw: true で消えました。false や 未設定で は、薄く白いラインが表示されます。これを、領域を拡大して消しているようです。 テクスチャのロード サンプルでは、全くそのような記述が無いのですが、本来 Image オブシェクトの ロードが完了しないと問題が出ると思います(大きい画像では間に合わない可能性)。 しかし、ソースコードの中を見てもその処理に見合った記述が無かったので、自前 で書いています。 関連する記事 Canvas を使って 3D データを描画する JavaScript ライブラリ『Three.js』 のバグ対応( Firefox、IE9、Opera で正しくテクスチャが適用されない ) Three.js で、別ドメインのテクスチャ画像を取得する場合は、php で Access-Control-Allow-Origin: * を返します ※ Google+(Picasa)に画像を置くと、他ドメインですがロードできます
<div id="container_three"></div>
<script src="http://winofsql.jp/js/three/Three.js"></script>
<script type="text/javascript">

	var v_offset = 0;
	var v_width = 700;
	var v_height = 500;
	var v_action = 0.05;
	var v_comera_v = 200;
	var v_iamge_url = 'https://lh5.googleusercontent.com/-qTCVOjIQB_s/Tvc0W4CCvBI/AAAAAAAAED4/i132mw8S30o/s300/v4gsword12_23_f3.png';
	var v_iamge_url2  ='https://lh6.googleusercontent.com/-RZRlwasRBvU/TkgD69DK2dI/AAAAAAAADec/35ka_hIu0XY/s300/0814_1.png';

	var container;
	var camera, scene, renderer;
	var mesh,mesh_r;
	var mouseX = 0, mouseY = 0;
        var material,texture;
        var material2,texture2;

	init();
	animate();

	function init() {

		container = document.getElementById( 'container_three' );

		scene = new THREE.Scene();
		scene.position.y = v_offset;

		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.set( 0, v_comera_v, 650 );
		scene.add( camera );

		var image = new Image()
		image.onload = function () {

			texture = new THREE.Texture( this );
			texture.needsUpdate = true;
			material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});

		        // 平面表
		        mesh = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material);
			mesh.rotation.x = 0;
			mesh.rotation.y = 0;
			scene.add(mesh);
			
		};
		image.src = v_iamge_url;

		var image2 = new Image()
		image2.onload = function () {

			texture2 = new THREE.Texture( this );
			texture2.needsUpdate = true;
			material2 = new THREE.MeshBasicMaterial({map: texture2, overdraw: true});

		        // 平面裏
			mesh_r = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material2);
			mesh_r.rotation.x = 0;
			mesh_r.rotation.y = 180 * Math.PI / 180; // 180°( * Math.PI / 180 が固定 )
			scene.add(mesh_r);
			
		};
		image2.src = v_iamge_url2;


		renderer = new THREE.CanvasRenderer();
		renderer.setSize( v_width, v_height );

		container.appendChild( renderer.domElement );

		document.addEventListener( 'mousemove', onDocumentMouseMove, false );

	}

	function onDocumentMouseMove( event ) {

		mouseX = event.clientX;
		mouseY = event.clientY;

	}

	function animate() {

		requestAnimationFrame( animate );

		render();

	}

	function render() {

		camera.position.x += ( mouseX - camera.position.x - v_width / 2 ) * v_action;
		camera.position.y += ( - mouseY - camera.position.y + (v_offset + v_comera_v +(container.offsetTop-window.pageYOffset))  ) * v_action;
		camera.lookAt( scene.position );

		if ( mesh && mesh_r ) {
			mesh.rotation.y -= 0.005;
			mesh_r.rotation.y -= 0.005;
		}

		renderer.render( scene, camera );


	}


</script>



posted by at 2012-03-08 21:59 | Comment(0) | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX