SQLの窓

2012年03月09日

Three.js の球体のテクスチャに透過部分のある画像を使って表示



この画像をテクスチャに使っています。
1) 輪郭線はありません( これは CSS で表示しています )
2) 口の中のみが透過です



実行ページ

<div id="container_three" style='background-color:#123456;margin:0 0 30px 30px;'></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/-nDPIczGYHkg/T1jJqItMfhI/AAAAAAAAE8Y/MhrGNFFN81g/s230/_img.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.SphereGeometry(150, 20, 20), material);
			mesh.rotation.x = 0;
			mesh.rotation.y = -90 * Math.PI / 180;
			scene.add(mesh);
			
			// 上の小
			mesh_r = new THREE.Mesh(new THREE.SphereGeometry(50, 20, 20), material);
			mesh_r.rotation.x = 0;
			mesh_r.rotation.y = 0;
			mesh_r.rotation.z = 0;
			mesh_r.position.x = 0;
			mesh_r.position.y = 200;
			mesh_r.position.z = 0;
			scene.add(mesh_r);

		};
		image.src = v_iamge_url;

		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-09 00:53 | Comment(0) | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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