ＳＱＬの窓 イラストAC フリー素材
<< Shadowbox : 宇多田ヒカル - Goodbye Hap… | TOP | r69 で再チェックしました / Three.js(r5… >>

2014年11月26日

Three.js(r69) : Lineメソッドで使用する頂点の配列を持つ Geometry オブジェクト

 
この記事を最初に書いた、2012-03-25 では、Three.js は r47 でした。現在 r69 になり、js ライブラリの参照単位や、クラスの仕様も変わり、座標の設定方法もかなり変わっていました。( 現在 THREE.Sprite を使用しており、ソース内にあるサンプルのマテリアルを使用できますが、昔は無かったので {} を変わりに使用して単純な線を引いています。引数に何も指定しないと、規定のマテリアルが使用されて、ソースコード上で未使用のマテリアルを引数にセットした状態と同じになります )

さらにいろいろテストしてみると、Vertex オブジェクトが無くなっている事がわかりました。r69 では、直接 Vector3 を geometry.vertices.push できるようです。

Vector3 によるデモ

Sprite によるデモ



※ リロードする毎にランダムに線を引きます

正直 3D に関する知識はたいして持ち合わせていないので、サンプルの動作からオリジナルソースの中を読んで自分なりに納得した内容を記述しているので、間違っているかもしれま
せん。

<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>
<script type="text/javascript">

container = document.createElement('div');
container.setAttribute("id", "container");
document.body.appendChild(container);

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1200;
camera.position.y = -200;

scene = new THREE.Scene();

scene.add( camera );

renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xffffff );
renderer.setSize( 700, 500 );
container.appendChild( renderer.domElement );

// **************************************
// Geometry は、描画に必要なデータ収納庫
// **************************************
var geometry = new THREE.Geometry();

// **************************************
// ライン用のマテリアル( ここでは未使用 )
// **************************************
var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial( {

	color: 0xffffff,
	program: function ( context ) {

		context.beginPath();
		context.arc( 0, 0, 0.5, 0, PI2, true );
		context.fill();

	}

} );


// 座標を4つ作成
for ( var i = 0; i < 4; i ++ ) {

	// 座標を作成
	particle = new THREE.Sprite( {} );
	particle.position.x = Math.random() * 2 - 1;
	particle.position.y = Math.random() * 2 - 1;
	particle.position.z = Math.random() * 2 - 1;
	particle.position.normalize();
	particle.position.multiplyScalar( Math.random() * 10 + 450 );
	particle.scale.x = particle.scale.y = 10;
	scene.add( particle );

	geometry.vertices.push( particle.position );

}

// **************************************
// geometry を使って順につなげる『線』を描画
// 線に対する属性として、色と不透明度と太さを設定
// **************************************
line = new THREE.Line(
	geometry, 
	new THREE.LineBasicMaterial( { color: 0x000000, opacity: 1.0, linewidth: 5 } ) 
);
scene.add( line );

renderer.render( scene, camera );


</script>
【Three.jsの最新記事】
posted by at 2014-11-26 22:52 | Three.js | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa