SQLの窓 イラストAC フリー素材

2014年08月08日

Three.js : マテリアルで設定される overdraw: true は、セグメントの境界である白い線を消す機能です

Material.js に、コメントで説明があります。

Overdrawn pixels (typically between 0 and 1) for fixing antialiasing gaps in CanvasRenderer

CanvasRenderer でアンチエイリアシングのギャップを修正するためのフラグだそうです。他のソフトでも同様のものがあったので、その内容は以下のように書かれています。

antialiasing gaps(アンチエイリアスによる隙間)を埋めるために立体表面を広げるか。広げる場合true。それ以外の場合false。
内容は『よりよい描画』のようですし、サンプルではだいたい true のようなので、セットしておくと良いと思います。 ▼ 以下をクリックするとセグメント(5x5)の境界である線を見る事ができます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://winofsql.jp/WinOfSql.ico" />
<style>
body {
	margin: 0;
	overflow: hidden;
}
</style>
</head>
<body>

<div id="container_three"></div>
<script src="three.min_68.js"></script>
<script>

	var v_offset = 0;
	var v_width = window.innerWidth;
	var v_height = window.innerHeight;
	var v_action = 0.05;
	var v_comera_v = 200;
	var v_iamge_url = "image/f1.jpg"
	var v_iamge_url2 = "image/b1.jpg";

	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() {

		// *****************************
		// Three.js を実行するコンテナ
		// *****************************
		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;

			// 立体表面を広げ無い(overdraw: false)
			// テクスチャを使った標準材料
			material = new THREE.MeshBasicMaterial({map: texture, overdraw: false });

			// 平面の表 ( 300 x 300 / セグメントの数 5 x 5 )
			mesh = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 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});

			// 平面の裏 ( 300 x 300 / セグメントの数 5 x 5 )
			mesh_r = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 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 );
		// 背景色
		renderer.setClearColor( 0x404040 );

		// コンテナに、描画オブジェクトの本体を登録
		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>

</body>
</html>



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

メールアドレス:

ホームページアドレス:

コメント:

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


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