ソース掲示板

メンテナンス
対象スレッド	件名： Three.js( WebGL ) : クリックした場所のオブジェクトを総取りする名前： lightbox
処理選択
パスワード
件名
Three.js( WebGL ) : クリックした場所のオブジェクトを総取りする
名前
lightbox
@HTML
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min56.js"></script>
<div id="three_area" style='width:600px;height:500px;'></div>

<script type="text/javascript">
if( !( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
	document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
	document.getElementById("three_area").style.display = 'none';
}

var w = 600;
var h = 500;
var numx = 0;
var numy = 0;

var container;
var camera, scene, projector, renderer;

var texture,material;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	camera.position.set( 0, 300, 500 );

	scene = new THREE.Scene();

	var geometry = new THREE.CubeGeometry( 20, 20, 20 );

	for ( var i = 0; i < 1000; i ++ ) {

		var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, transparent: true,opacity: 0.5 } ) );
		object.position.x = Math.random() * 800 - 400;
		object.position.y = Math.random() * 800 - 400;
		object.position.z = Math.random() * 800 - 400;

		object.scale.x = Math.random() * 2 + 1;
		object.scale.y = Math.random() * 2 + 1;
		object.scale.z = Math.random() * 2 + 1;

		object.rotation.x = Math.random() * 2 * Math.PI;
		object.rotation.y = Math.random() * 2 * Math.PI;
		object.rotation.z = Math.random() * 2 * Math.PI;

		scene.add( object );

	}

	projector = new THREE.Projector();

	renderer = new THREE.WebGLRenderer();
	renderer.setSize( w, h );

	document.getElementById("three_area").appendChild( renderer.domElement );

	document.addEventListener( 'mousedown', onDocumentMouseDown, false );

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

		texture = new THREE.Texture( this );
		texture.needsUpdate = true;
		material = new THREE.MeshBasicMaterial({map: texture, transparent: true});
	};
	image.src = "http://lightbox.matrix.jp/imgpatio/smile.png";

	var parent = document.getElementById("three_area")
	while (parent) {
		numx += parent.offsetLeft;
		numy += parent.offsetTop;
		parent = parent.offsetParent;
	}


}

function onDocumentMouseDown( event ) {

	var top = document.documentElement.scrollTop + document.body.scrollTop

	event.preventDefault();

	var vector = new THREE.Vector3( (( event.clientX - numx ) / w ) * 2 - 1, - ( (event.clientY - (numy - top) ) / h ) * 2 + 1, 0.5 );
	projector.unprojectVector( vector, camera );

	var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

	var intersects = raycaster.intersectObjects( scene.children );


	if ( intersects.length > 0 ) {

		var mesh = null;

		for( var i = 0; i < intersects.length; i++ ) {

			mesh = new THREE.Mesh(new THREE.SphereGeometry(15, 20, 20), material);
			mesh.position = intersects[ i ].point;
			mesh.rotation.y = Math.random() * Math.PI * 2;
			scene.add(mesh);

		}

	}
}

function animate() {

	requestAnimationFrame( animate );
	render();

}

var radius = 600;
var theta = 0;

function render() {

	theta += 0.1;

	camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
	camera.lookAt( scene.position );

	renderer.render( scene, camera );

}

</script>
@HEND

@DIV
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min56.js"></script>
<div id="three_area" style='width:600px;height:500px;'></div>

<script type="text/javascript">
if( !( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
	document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
	document.getElementById("three_area").style.display = 'none';
}

var w = 600;
var h = 500;
var numx = 0;
var numy = 0;

var container;
var camera, scene, projector, renderer;

var texture,material;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	camera.position.set( 0, 300, 500 );

	scene = new THREE.Scene();

	var geometry = new THREE.CubeGeometry( 20, 20, 20 );

	for ( var i = 0; i < 1000; i ++ ) {

		var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, transparent: true,opacity: 0.5 } ) );
		object.position.x = Math.random() * 800 - 400;
		object.position.y = Math.random() * 800 - 400;
		object.position.z = Math.random() * 800 - 400;

		object.scale.x = Math.random() * 2 + 1;
		object.scale.y = Math.random() * 2 + 1;
		object.scale.z = Math.random() * 2 + 1;

		object.rotation.x = Math.random() * 2 * Math.PI;
		object.rotation.y = Math.random() * 2 * Math.PI;
		object.rotation.z = Math.random() * 2 * Math.PI;

		scene.add( object );

	}

	projector = new THREE.Projector();

	renderer = new THREE.WebGLRenderer();
	renderer.setSize( w, h );

	document.getElementById("three_area").appendChild( renderer.domElement );

	document.addEventListener( 'mousedown', onDocumentMouseDown, false );

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

		texture = new THREE.Texture( this );
		texture.needsUpdate = true;
		material = new THREE.MeshBasicMaterial({map: texture, transparent: true});
	};
	image.src = "http://lightbox.matrix.jp/imgpatio/smile.png";

	// WebGL のエリアがページ上のどの位置にあるかを計算する為の基本座標
	var parent = document.getElementById("three_area")
	while (parent) {
		numx += parent.offsetLeft;
		numy += parent.offsetTop;
		parent = parent.parentNode;
	}
}

function onDocumentMouseDown( event ) {

	var top = document.documentElement.scrollTop + document.body.scrollTop

	event.preventDefault();

	// 3D エリア上のクリックされた座標を作成
	var vector = new THREE.Vector3(
		(( event.clientX - numx ) / w ) * 2 - 1,
		 - ( (event.clientY - (numy - top) ) / h ) * 2 + 1,
		0.5 );

	// プロジェクターとカメラからクリックした位置にあるオブジェクトの一覧を取得する
	projector.unprojectVector( vector, camera );
	var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
	var intersects = raycaster.intersectObjects( scene.children );

	// 対象があった場合
	if ( intersects.length > 0 ) {

		var mesh = null;

		// 全ての対象オブジェクトの(最初の)接点に透過画像を使った球を置く
		for( var i = 0; i < intersects.length; i++ ) {

			mesh = new THREE.Mesh(new THREE.SphereGeometry(15, 20, 20), material);
			mesh.position = intersects[ i ].point;
			mesh.rotation.y = Math.random() * Math.PI * 2;
			scene.add(mesh);

		}

	}
}

function animate() {

	requestAnimationFrame( animate );
	render();

}

var radius = 600;
var theta = 0;

function render() {

	theta += 0.1;

	camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
	camera.lookAt( scene.position );

	renderer.render( scene, camera );

}

</script>
@END