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

2014年11月29日

r69 で再チェックしました / Three.js(r53) で追加された LineDashedMaterial のサンプルを簡素化して解りやすくしました



中央に点線でキューブが回るだけのサンプルですが、LineDashedMaterial の確認だけならこれで十分です。

cube ファンクションで 12 個の 線が作成されていますが、一つの線に Vector3 座標を二つ使って線を引いています。THREE.LinePieces を使っているので、二点のペアをを繋げるので連鎖はしません。デフォルトの THREE.LineStrip を使うと、点が連鎖して描画されるので、一筆書きになります。

このサンプルでは正確に立方体を作成する為に、『二点のペア』を使っているので、同一座標がある事に注意して下さい。

r53 では WebGL、r56 で Canvas

※ WebGL では、	geometryCube.computeLineDistances(); でキューブのデータを完成させる必要があります。また、{ antialias: true } を WebGLRenderer の引数に渡さないと、ラインの表示の乱れが大きいです

更新履歴にそうあります。このサンプルコードは r56 で動作しますし、r53 〜 r55 までなら、WebGLRenderer で動作するはずです。ですが、いずれにしても点線が動作するのは Google Chrome か Firefox だけなので注意して下さい。 IE11 で動作していました。

canvas でのデモ

WebGL でのデモ
( three69.min.js のみで動作します )

▼ CanvasRenderer
※ 利便性の為に、jQuery を使用しています。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/three69.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/Projector.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/CanvasRenderer.js"></script>

<div id="three_canvas_container"></div>

<script type="text/javascript">
var WIDTH = 600;
var HEIGHT = 600;
var renderer, scene, camera, stats;
var object;

$("#three_canvas_container")
	.css({
		width: WIDTH+"px",
		height: HEIGHT+"px"
	});


init();		// 仕様作成
animate();	// アニメーション開始

// ***********************************
// 描画仕様作成
// ***********************************
function init() {

	// 遠近法カメラ作成
	camera = new THREE.PerspectiveCamera(
		// 視野の上下角度
		40,
		// カメラビューのアスペクト比
		WIDTH / HEIGHT,
		// 表示可能な一番近い距離
		1,
		// 表示可能な一番遠い距離
		200
	);

	// 座標におけるカメラの位置
	camera.position.z = 150;

	// シーン作成	
	scene = new THREE.Scene();

	// 一辺 50 のキューブの座標を作成	
	var geometryCube = cube( 50 );

	// ラインでキューブを作成	
	object = new THREE.Line(
		geometryCube,
		// 点線の仕様を決定
		new THREE.LineDashedMaterial( {
			color: 0xffaa00,
			dashSize: 3,
			gapSize: 1,
			linewidth: 2
		} ),
		// 二つの座標をペアとして使用する
		THREE.LinePieces
	);

	// シーンにオブジェクト(ラインで作成したキューブ)を追加	
	scene.add( object );

	// Canvas で描画します	
	renderer = new THREE.CanvasRenderer( );
	// 描画サイズの設定
	renderer.setSize( WIDTH, HEIGHT );
	// 描画領域の色を設定します
	renderer.setClearColor( 0x404040 );

	// 描画対象とする three_canvas_container に Three.js の
	// 描画システムを実装	
	var container = $( '#three_canvas_container' )[0];
	container.appendChild( renderer.domElement );

}

// ***********************************
// ラインによるキューブ作成
// ***********************************
function cube( size ) {
	
	var h = size * 0.5;
	
	var geometry = new THREE.Geometry();
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );

	return geometry;

}


// ***********************************
// アニメーション用繰り返し処理
// ***********************************
function animate() {

	// アニメーション用のこの関数の再呼び出しの予約
	requestAnimationFrame( animate );

	// 描画
	render();

}

// ***********************************
// 実際の描画
// ***********************************
function render() {

	// アニメーション用の時間間隔
	var time = Date.now() * 0.001;

	// x 軸で回転
	object.rotation.x = 0.25 * time;
//	object.rotation.y = 0.25 * time;

	// 描画実行
	renderer.render( scene, camera );

}
</script>


【Three.jsの最新記事】
posted by at 2014-11-29 00:34 | Three.js | このブログの読者になる | 更新情報をチェックする