生活を良くします - 怠惰なプログラミング

読者です 読者をやめる 読者になる 読者になる

生活を良くします-怠惰なプログラミング

外資系でエンジニアをやっています。便利なサービスや商品、プログラミングで作ったものなどを紹介していきます

はてなブログ カスタマイズ three.jsをブログ中に埋め込む : 3D地球儀を表示

プログラミング デバッグ ブログ

↓特定のスマホやブラウザでは見れないかも















はてなブログ内でthree.jsを使用

three.jsでできること

写真に写っているのは全て実際にあるサイトです。出典に書いてあるURLを飛ぶと見に行けますが、どれもすごく綺麗で動きます。

どれもthree.jsを使って作られているサイトで見ているだけでも楽しいですが、勉強にもなります。
f:id:what_a_day:20161212013906p:plain
出典:three.js - Javascript 3D library


特にこのFord社のwebサイトはすごいです。実際にクリックやドラッグ、スクロールで車を見るアングルを変えたり、ズームできたりします。

さらに、色を変えたりもできてすぐに反映されるので直接店頭に行って悩む必要がないんですよね。エンジン音も聞けますし。
f:id:what_a_day:20161212014539p:plain
出典:Mustang Customizer

three.jsを使うとこういうサイトが作れる可能性もなくはないということです。

厳しそうですが。

three.jsをはてなブログで使うには

three.js - Javascript 3D libraryからダウンロードできます。


※このURLを押すとダウンロードが始まります。
https://github.com/mrdoob/three.js/archive/master.zip

これで基本的に必要になるファイルは揃いました。

外部ファイルを読み込む

three.jsファイル等がダウンロードできたら、それを別のサーバーに設置します。

はてなブログでは画像以外に綺麗な方法でファイルを置ける機能がないので考えました。

具体的な設定方法はこちらに書いてあります。
www.what-a-day.net

これでthree.jsやjavascriptのファイルが大量に発生しても外部から読み込ませるだけで良いので管理も開発もしやすいです。

もちろん、この外部読み込みはCSSファイルや通常のjavascriptなどに対しても使用可能です。

はてなブログのデザインCSSがぐちゃぐちゃになっている人、どこに何が置いてあるのかわからなくなっている人は使ってみるといいと思います。

はてなブログは、デザインCSS内で文字列検索ができないのでめちゃくちゃ不便に思えます。他の機能は便利なのにここだけは残念。

javascript、three.jsなどをはてなブログで使用するとき、記事作成時のエディタがかなり弱いので.jsファイルを直接書き込んだりしていると目も当てられない悲惨な状況になります。ぜひ外部読み込みで済ませましょう。

考えられうるエラー

外部読み込みのファイルの指定先などを間違えるとこういうエラーが出ます。

Chromeから「要素を検証」を行うとエラーメッセージが読めます。

ファイルのパスが間違っているだけなことがほとんどですので実際にURLで検索してみて本当にファイルになっているかを確認してみてください。

 Refused to execute script from 'three.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

three.jsのサンプルプログラム

このままソースをコピペしてindex.htmlとでもしておいてsafariやchromeにファイルをドラッグ&ドロップすると回転するキューブが出てきます。

<html>
	<head>
		<title>My first Three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script type ="text/javascript" src="https://thisisjustfortesting.github.io/test.io/demo/vendor/three.js/build/three.min.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			var render = function () {
				requestAnimationFrame( render );

				cube.rotation.x += 0.1;
				cube.rotation.y += 0.1;

				renderer.render(scene, camera);
			};

			render();
		</script>
	</body>
</html>



ブログに埋め込む用コード
一応、動くのが確認できています。このまま貼り付けでいけると思います。

<div id="Canvas" style="height: 200px; width: 200px; background-color: #FFF;"></div>

<script type ="text/javascript" src="https://thisisjustfortesting.github.io/test.io/demo/vendor/three.js/build/three.min.js"></script>
		<script type="text/javascript">
var Width2 = Canvas.clientWidth;
var Height2 =Canvas.clientHeight;  
			var Canvas = document.getElementById("Canvas");

			var scene2 = new THREE.Scene();
			var camera2 = new THREE.PerspectiveCamera( 75,Height2 /Width2, 0.1, 1000 );

			var renderer2 = new THREE.WebGLRenderer();
			renderer2.setSize( Width2, Height2 );
			Canvas.appendChild( renderer2.domElement );

			var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
			var material2 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry2, material2 );
			scene2.add( cube );

			camera2.position.z = 5;

			var render = function () {
				requestAnimationFrame( render );

				cube.rotation.x += 0.1;
				cube.rotation.y += 0.1;

				renderer2.render(scene2, camera2);
			};

			render();
</script>

3D地球儀の作成

サンプルを改良した

たぶん頑張ればもっと綺麗な丸に近くなるけどそれなら作り直した方が早そうとさえ思ってしまった。
f:id:what_a_day:20161212091449p:plain

<div id="Canvas" style="height: 200px; width: 200px; background-color: #FFF;"></div>

<script type ="text/javascript" src="https://thisisjustfortesting.github.io/test.io/demo/vendor/three.js/build/three.min.js"></script>
<script type ="text/javascript" src="https://thisisjustfortesting.github.io/test.io/demo/bower_components/threex.planets/threex.planets.js"></script>
		<script type="text/javascript">
var Width2 = Canvas.clientWidth;
var Height2 =Canvas.clientHeight;  
			var Canvas = document.getElementById("Canvas");

			var scene2 = new THREE.Scene();
			var camera2 = new THREE.PerspectiveCamera( 45, Width2 / Height2, 1, 1000 );

			var renderer2 = new THREE.WebGLRenderer();
			renderer2.setSize( Width2, Height2 );
			Canvas.appendChild( renderer2.domElement );

			var geometry2 = new THREE.SphereGeometry(0.8);
			var material2 = new THREE.MeshBasicMaterial( {
                                   map : THREE.ImageUtils.loadTexture('https://thisisjustfortesting.github.io/test.io/demo/bower_components/images/08.jpg')
                         } );

			var cube = new THREE.Mesh( geometry2, material2 );
			scene2.add( cube );


			camera2.position.z = 5;
var render = function () {
				requestAnimationFrame( render );

				renderer2.render(scene2, camera2);
			};

			render();


</script>

他のextensionを使うことに

learningthreejs.com

このサイトを参考にして作成しました。

かなり詳しく書いてありました。うまく描く方法とかコツなども書いてあります。

使い道

サイドバーに設置する

自分が訪れたところがわかるようにPINでもつけておいておこうかと考えています。

死ぬまでには全部埋められるといいなと思うけど、たぶんほとんど埋まらないでしょうね。

それ以外でも回る地球儀とかがおいてあったら印象には残りそう。

こいつに大量にPINをさす計画。
f:id:what_a_day:20161212093418p:plain

サイト作成

three.js - Javascript 3D libraryをみていると面白そうなサイトが本当にたくさんあります。

自分でサイトを作るときにthree.jsみたいな感じで何かできればいいなと思ってます。

まとめ

  • three.jsを使うには複数のファイルが必要
  • 外部からファイルを読み込ませる
  • はてなブログで使うにはdivタグを使う
  • 想像していたよりは軽かった
  • いい感じに改造していきたい