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

2014年03月02日

Google ドライブに Three.js の JSONLoder のサンプルを作成しました

▼ Google ドライブ環境の前提条件はこちらから
Google ドライブに HTML を置いて WEBページが作れる詳細 / Drive Notepad / Neutron Drive( FTPが使えるファイラ )

短縮サービスで URL 取得したので以下のようになっています

http://gdriv.es/three/WebGL_JSONLoader.htm



確認事項

● 外部の JavaScript は、外部も https でないとエラーになります。
● 日本語は UTF-8 ですが、Google のドライブビュアーでは化けます
● Three.js は r66 を使っています。どのバージョンからかは確認していませんが、表示エリアの背景色は、レンダラーで指定します( renderer.setClearColor( 0xffffff ); )
● 古いコードがエラーになっていた、JSONLoder の load メソッド内の対応として function ( geometry, mt ) として、マテリアルを追加して内部で利用しました。このあたりは処理の違いで必ずしも必要あるかどうかは解りませんが、このサンプルではデータも相当古くて、上下反転して正しく表示させました。

最終調整は、Neutron Drive で行いましたが、とても便利でした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebGL : JSONLoader のサンプル ( Three.js r66 )</title>
<style>

* {
    font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif
}

body {
	margin: 0;
	background-color: #c0c0c0;
}

.top {
	background: url(http://winofsql.jp/image/top_1.png) repeat-x 0px 0px;
	border: 0px solid red;
	height: 22px;
	margin-bottom:3px;
	color:white;
	padding: 2px 0 2px 5px;
}

#container_three {
    margin-left:20px;    
}

#container_three canvas {
    border:solid 1px #000000;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

    
</style>

<script src="https://secure624.sakura.ne.jp/fire30.winofsql.jp/three.min66.js"></script>
</head>
<body>
<div class="top"></div>

<div id="container_three"></div>

<div style='padding:20px 0px 0px 50px;'><br />
素材 Credit : <a href="http://www.geocities.jp/lab_no2/index.html" target="_blank" style='color:navy;'>光陰像型</a><br />
<img src="https://lh4.googleusercontent.com/-l9OgYV58Um0/T1Tgp2I8wnI/AAAAAAAAE7I/ntYKTmra3Xw/s200/_img.png" style="border: solid 0px #000000;margin-top:3px;" /><br />
</div>

<script>

	var container, stats;
	var camera, scene, renderer;
	var mesh;
	var mouseX = 0, mouseY = 0;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	init();
	animate();

	function init() {

		container = document.getElementById( 'container_three' );

		scene = new THREE.Scene();
		scene.position.y = 200;

		var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
		directionalLight.position.set( 0, 200, 650 ).normalize();
		scene.add( directionalLight );

		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.set( 0, -200, 650 );
		scene.add( camera );

		loader = new THREE.JSONLoader();
		loader.load('kabotya2.js', function ( geometry, mt ) {

			mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( mt ));

			mesh.scale.x = 150;
			mesh.scale.y = 150;
			mesh.scale.z = 150;
			scene.add( mesh );

		}, '' );

		renderer = new THREE.WebGLRenderer( );
		renderer.setClearColor( 0xffffff );  // 背景色
		renderer.setSize( 800, 700 );

		container.appendChild( renderer.domElement );

		document.addEventListener( 'mousemove', onDocumentMouseMove, false );

	}

	function onDocumentMouseMove( event ) {

		mouseX = ( event.clientX - windowHalfX );
		mouseY = ( event.clientY - windowHalfY );

	}

	function animate() {

		requestAnimationFrame( animate );

		render();

	}

	function render() {

		camera.position.x += ( mouseX - camera.position.x ) * 0.05+15;
		camera.position.y += ( - mouseY - camera.position.y + 400 ) * 0.05;
		camera.lookAt( scene.position );

		if ( mesh ) {
			mesh.rotation.y -= 0.01;
		}

		renderer.render( scene, camera );

	}

</script>

</html>



【Googleの最新記事】
posted by at 2014-03-02 18:11 | Google | このブログの読者になる | 更新情報をチェックする


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