トップページのつもりのリンク集
- 2012⁄01⁄17(火)
- 21:18
ブログ(ココです)： Siouxcitizen's Blog
物置サイト： Siouxcitizen's Site
Twitter： siouxcitizen on Twitter
Youtube： siouxcitizen's Channel
wonderfl： siouxcitizen - wonderfl build flash online
jsdo.it： siouxcitizen - jsdo.it - Share JavaScript, HTML5 and CSS
自分のアカウントのあるサイトへのリンク集をこのブログのトップに置きたかったけれど、やり方がよくわからなかったのでブログエントリの投稿日時をムリヤリ進めてここに表示されるようにしてます。。。
物置サイト： Siouxcitizen's Site
Twitter： siouxcitizen on Twitter
Youtube： siouxcitizen's Channel
wonderfl： siouxcitizen - wonderfl build flash online
jsdo.it： siouxcitizen - jsdo.it - Share JavaScript, HTML5 and CSS
自分のアカウントのあるサイトへのリンク集をこのブログのトップに置きたかったけれど、やり方がよくわからなかったのでブログエントリの投稿日時をムリヤリ進めてここに表示されるようにしてます。。。
- category
- 未分類
jsdo.itでThree.jsを使用して3D表示してみました、のつづきです
- 2011⁄08⁄13(土)
- 02:53
ひとつ前のブログエントリの続きで、またいくつかThree.jsライブラリを使用した3Dプログラミングを行ってみました。 今回のプログラミングはほぼThree.jsのサンプルをコピペしただけのものなので、コピペ元ファイルも示しておきます。 以下のコピペ元ファイルは全てmrdoob/three.js - GitHubからダウンロードしたものです。
Three.js Practice08 3D Model Load
WaltHead(3Dモデル)
jsファイルとして保存された3Dモデルを読み込んで表示しています。 3Dモデルは少し前のBlender用のプラグイン？から出力されたファイルのようです。
・コピペ元サンプルファイル
mrdoob-three.js-418780f/examples/canvas_materials_normal.html
mrdoob-three.js-418780f/examples/obj/WaltHead.js
Three.js Practice09 3D Earth
地球の3Dモデルを表示しています。 地球の3Dモデル表面に貼り付けて表示している画像はDropboxに置いています。 Chromeでは問題なく表示されましたが、Firefoxでは性能のいいパソコンでは表示され、性能の劣るパソコンでは表示されませんでした。。。
・コピペ元サンプルファイル
mrdoob-three.js-418780f/examples/canvas_geometry_earth.html
mrdoob-three.js-418780f/examples/textures/land_ocean_ice_cloud_2048.jpg
mrdoob-three.js-418780f/examples/textures/shadow.png
以下コードはChromeでしか動作確認できていませんが、最近のBlender用プラグインから出力された3Dモデル表示サンプルをDropboxに配置したものです(要WebGL)。
・まずは二種類の立方体を表示するものです
webgl_geometry_blenderexport_colors.html
・次にBlenderについてくるおまけ？の猿の3Dモデルが大量に表示されるものです(PCによってはかなり重いかも)。
webgl_performance.html
こちらの形式での表示がWebGLが必須となる新しい方式のようですが、jsdo.itでは3Dモデルを格納したjsファイルをうまく読み取れなかったのでDropboxへ配置しました。 今後もjsdo.itへの配置方法などいろいろわかればちょいちょい作業続けていこうかと思います。
Three.js Practice08 3D Model Load
WaltHead(3Dモデル)
jsファイルとして保存された3Dモデルを読み込んで表示しています。 3Dモデルは少し前のBlender用のプラグイン？から出力されたファイルのようです。
・コピペ元サンプルファイル
mrdoob-three.js-418780f/examples/canvas_materials_normal.html
mrdoob-three.js-418780f/examples/obj/WaltHead.js
Three.js Practice09 3D Earth
地球の3Dモデルを表示しています。 地球の3Dモデル表面に貼り付けて表示している画像はDropboxに置いています。 Chromeでは問題なく表示されましたが、Firefoxでは性能のいいパソコンでは表示され、性能の劣るパソコンでは表示されませんでした。。。
・コピペ元サンプルファイル
mrdoob-three.js-418780f/examples/canvas_geometry_earth.html
mrdoob-three.js-418780f/examples/textures/land_ocean_ice_cloud_2048.jpg
mrdoob-three.js-418780f/examples/textures/shadow.png
以下コードはChromeでしか動作確認できていませんが、最近のBlender用プラグインから出力された3Dモデル表示サンプルをDropboxに配置したものです(要WebGL)。
・まずは二種類の立方体を表示するものです
webgl_geometry_blenderexport_colors.html
・次にBlenderについてくるおまけ？の猿の3Dモデルが大量に表示されるものです(PCによってはかなり重いかも)。
webgl_performance.html
こちらの形式での表示がWebGLが必須となる新しい方式のようですが、jsdo.itでは3Dモデルを格納したjsファイルをうまく読み取れなかったのでDropboxへ配置しました。 今後もjsdo.itへの配置方法などいろいろわかればちょいちょい作業続けていこうかと思います。
- category
- 開発
jsdo.itでThree.jsを使用して3D表示してみました
- 2011⁄08⁄01(月)
- 09:10
3Dライブラリがなければ3Dなにもできない自分としては、Three.jsという3Dライブラリがjsdo.itに入ったようなので、Javascriptの3D表示を試してみたくなりいくつかのコードを投稿してみました。
Three.jsの概要や自分への動機付けにはこちらの説明やデモを参考にさせていただきました。
CanvasタグとJavaScriptで3Dのデモを作ってみました
こちらの
Three.js example
を大元のフォーク元にして以下のような3D表示コードをjsdo.itに投稿しました。
・動作確認はChrome12.0.742.122とFirefox3.6.18で行っています
・うまく表示されない場合はJsdo.itのReloadボタンで表示できるかと思います
・以下コードは全てマウス動作で回転します
１、Three.js Practice01 Cube
フォーク元を参考にして赤いワイヤーフレームによる立方体を表示してみました。
２、Three.js Practice02 Sphere
次は赤い球体を表示させてみました。
３、Three.js Practice03 Plane
３枚のプレーンの色をそれぞれ赤、緑、青の半透明色にして微妙にずらしながら表示してみました。
４、Three.js Practice05 Texture on Plane
プレーンにテクスチャを貼りつけて表示してみました。
５、Three.js Practice06 Texture on Cube
立方体にテクスチャを貼りつけて表示してみました。
６、Three.js Practice07 Light
赤いトーラス型3Dオブジェクトに光をあててみました。
以上のようにシンプルな3Dオブジェクト表示をいくつか試してみましたが、以下のようなサイトに倣えば複雑なMetasequoiaやBlenderからの3Dオブジェクトなども表示できるようです。
・Three.jsでMQOデータを表示するまで
・Blender exporter
・Three.js: 3Dコンテンツを Web ページで表示しよう
WebGLを経由させるとさらにスゴくなる？
今回のコーディングではJavascriptで3Dが表示できたこともそうですが、Three.jsにCanvasが隠蔽されていてCanvasを気にせず作業できたのが一番嬉しかったかもしれない。。。 Three.jsスゴイ。
参考リンク
・Three.js開発者Mr.doob先生のブログ
・github mrdoob / three.js
Three.jsの概要や自分への動機付けにはこちらの説明やデモを参考にさせていただきました。
CanvasタグとJavaScriptで3Dのデモを作ってみました
こちらの
Three.js example
を大元のフォーク元にして以下のような3D表示コードをjsdo.itに投稿しました。
・動作確認はChrome12.0.742.122とFirefox3.6.18で行っています
・うまく表示されない場合はJsdo.itのReloadボタンで表示できるかと思います
・以下コードは全てマウス動作で回転します
１、Three.js Practice01 Cube
フォーク元を参考にして赤いワイヤーフレームによる立方体を表示してみました。
２、Three.js Practice02 Sphere
次は赤い球体を表示させてみました。
３、Three.js Practice03 Plane
３枚のプレーンの色をそれぞれ赤、緑、青の半透明色にして微妙にずらしながら表示してみました。
４、Three.js Practice05 Texture on Plane
プレーンにテクスチャを貼りつけて表示してみました。
５、Three.js Practice06 Texture on Cube
立方体にテクスチャを貼りつけて表示してみました。
６、Three.js Practice07 Light
赤いトーラス型3Dオブジェクトに光をあててみました。
以上のようにシンプルな3Dオブジェクト表示をいくつか試してみましたが、以下のようなサイトに倣えば複雑なMetasequoiaやBlenderからの3Dオブジェクトなども表示できるようです。
・Three.jsでMQOデータを表示するまで
・Blender exporter
・Three.js: 3Dコンテンツを Web ページで表示しよう
WebGLを経由させるとさらにスゴくなる？
今回のコーディングではJavascriptで3Dが表示できたこともそうですが、Three.jsにCanvasが隠蔽されていてCanvasを気にせず作業できたのが一番嬉しかったかもしれない。。。 Three.jsスゴイ。
参考リンク
・Three.js開発者Mr.doob先生のブログ
・github mrdoob / three.js
- category
- 開発
jsdo.itでJavascriptのCanvas練習してみました２
- 2011⁄08⁄01(月)
- 00:21
前回ブログエントリの続きで、jsdo.it上でJavascriptのCanvasの練習を行いました。
前にもロールプレイングゲームもどきを作成するときに雛形とさせていただいた、Wonderfl上にあるワンダフルクエストというコードを、JavascriptのCanvas上に再現できないか試してみました。
・ワンダフルクエスト
以下その経過リストです。 結果としては、ちょいちょいコードをごまかしつつのミニ？ワンダフルクエストができました。
１、ゲームっぽい画面表示、にできず。。。
２、前回コードから勇者の上下左右画像の表示機能を追加しました
３、前回コードから障害物に引っかかる？機能を追加しました
４、前回コードから勇者の移動をなめらか？にしました
５、前回コードからマップスクロール機能を追加しました
６、前回コードからFirefoxでも動くマップスクロール機能にしました
７、ワンダフルクエスト jsdo.it Ver.(最終成果物です)
↑
・最終成果物の動作確認はChrome12.0.742.122とFirefox3.6.18で行っています
・画面表示されない場合はJsdo.itのReloadボタンで表示できるかと思います
・↑、↓、←、→またはw、s、a、dキーでマップスクロールします
以下は画像の表示倍率を３倍にしてWonderflのワンダフルクエストと同じような見た目にしようとしてけど失敗して作業終了したものです。。。 アンバランスな小人勇者が歩きまわる感じになってしまってます。。。 なので最終成果物は「ミニ」ワンダフルクエストとなってます。。。
・前回コードから背景だけスケール3倍率表示にしてみました(失敗作です)
失敗作にもあるようなことをはじめ、Canvasの扱いにかなり苦労しました。 ChromeとFirefoxでの微妙な動作の違いなどもあったりして、前回ブログエントリに引き続きCanvasはムズイです、という感想で終了。。。
前にもロールプレイングゲームもどきを作成するときに雛形とさせていただいた、Wonderfl上にあるワンダフルクエストというコードを、JavascriptのCanvas上に再現できないか試してみました。
・ワンダフルクエスト
以下その経過リストです。 結果としては、ちょいちょいコードをごまかしつつのミニ？ワンダフルクエストができました。
１、ゲームっぽい画面表示、にできず。。。
２、前回コードから勇者の上下左右画像の表示機能を追加しました
３、前回コードから障害物に引っかかる？機能を追加しました
４、前回コードから勇者の移動をなめらか？にしました
５、前回コードからマップスクロール機能を追加しました
６、前回コードからFirefoxでも動くマップスクロール機能にしました
７、ワンダフルクエスト jsdo.it Ver.(最終成果物です)
↑
・最終成果物の動作確認はChrome12.0.742.122とFirefox3.6.18で行っています
・画面表示されない場合はJsdo.itのReloadボタンで表示できるかと思います
・↑、↓、←、→またはw、s、a、dキーでマップスクロールします
以下は画像の表示倍率を３倍にしてWonderflのワンダフルクエストと同じような見た目にしようとしてけど失敗して作業終了したものです。。。 アンバランスな小人勇者が歩きまわる感じになってしまってます。。。 なので最終成果物は「ミニ」ワンダフルクエストとなってます。。。
・前回コードから背景だけスケール3倍率表示にしてみました(失敗作です)
失敗作にもあるようなことをはじめ、Canvasの扱いにかなり苦労しました。 ChromeとFirefoxでの微妙な動作の違いなどもあったりして、前回ブログエントリに引き続きCanvasはムズイです、という感想で終了。。。
- category
- 開発
jsdo.itでJavascriptのCanvas練習してみました
- 2011⁄07⁄31(日)
- 18:00
かなり前から少しづつ続けていた、jsdo.itに投稿しながらのJavascriptのCanvas練習についてのまとめです。 結論、Canvasムズイです。。。
以下リストとなります。
まずは、Canvasと関係ありませんが記念すべき？jsdo.it初投稿プログラムです。 ただのよくある「Hello World」ですが。。。
js on 2010-6-19
ここからがCavans練習コードとなります。
はじめてのCanvasといった感じでまず以下の２コードを作成
１、canvasで文字表示
上記のHello Worldとは違い、Canvasを使い色を変えながら「Hello World」文字列を表示しています。
２、canvasで矩形領域ぬりつぶし
コードのタイトルのとおり矩形領域を色を変えながら塗りつぶしています。 関係ないですが、なんで長方形っていわずに矩形って言うのでしょう？
次に作業した以下のコードは最初は動いていましたが、その後仕様がかわって外部の画像が取り込めなくなったのか、動かなくなってしまったものです。 今もコードと画像ファイルを置く環境を同じにすれば動くかもしれません(試してませんが。。。)。
１、canvasで画像の組み込み
２、canvasで↑↓←→ボタンで組み込み画像の移動
３、canvasに画像を取り込めなくなった。。。
で、画像が読み込めなくなってしまったので、かわりに矩形領域を描画させていろいろ操作できるようにしたコードです(Firefoxで動きます)。
１、canvasで↑↓←→ボタンで矩形領域の移動
２、canvasでloopで繰り返し矩形領域ぬりつぶし
３、canvas上の移動する矩形領域の当たり判定
その後Base64形式で画像を取り込めることを知ったので、改めてBase64形式で画像を取り込んで操作できるようにコーディングしたものです(Dropboxに置いた画像ファイルが取り込めるらしいことは最近知りました。。。)。 Chromeブラウザのことを意識していなかったのでFirefoxブラウザでの動作確認がメインのコーディングとなります(IEは今も意識してません。。。)。
１、HTMLでbase64形式画像の表示
２、JavaScriptでbase64形式画像の表示
３、動かない。。。 作業用に保存
４、↑↓←→ボタンでcanvas上のbase64形式画像の移動
５、canvas上の2つのbase64画像をゲーム的？loopで表示
６、前回ソースからChromeでも動くように変更(「前回ソース」は４のソースのことです)
↑この最後のコードのみChrome対応です。
以上のようにCanvasを使って基礎的なものをいろいろ試してみましたが、それだけでもう自分にはいろいろとムズイです。。。
このあと、上記コーディング作業の延長としてもう少しCanvasでの作業を続けてみました。 それについては次のブログエントリに載せる予定です。
以下リストとなります。
まずは、Canvasと関係ありませんが記念すべき？jsdo.it初投稿プログラムです。 ただのよくある「Hello World」ですが。。。
js on 2010-6-19
ここからがCavans練習コードとなります。
はじめてのCanvasといった感じでまず以下の２コードを作成
１、canvasで文字表示
上記のHello Worldとは違い、Canvasを使い色を変えながら「Hello World」文字列を表示しています。
２、canvasで矩形領域ぬりつぶし
コードのタイトルのとおり矩形領域を色を変えながら塗りつぶしています。 関係ないですが、なんで長方形っていわずに矩形って言うのでしょう？
次に作業した以下のコードは最初は動いていましたが、その後仕様がかわって外部の画像が取り込めなくなったのか、動かなくなってしまったものです。 今もコードと画像ファイルを置く環境を同じにすれば動くかもしれません(試してませんが。。。)。
１、canvasで画像の組み込み
２、canvasで↑↓←→ボタンで組み込み画像の移動
３、canvasに画像を取り込めなくなった。。。
で、画像が読み込めなくなってしまったので、かわりに矩形領域を描画させていろいろ操作できるようにしたコードです(Firefoxで動きます)。
１、canvasで↑↓←→ボタンで矩形領域の移動
２、canvasでloopで繰り返し矩形領域ぬりつぶし
３、canvas上の移動する矩形領域の当たり判定
その後Base64形式で画像を取り込めることを知ったので、改めてBase64形式で画像を取り込んで操作できるようにコーディングしたものです(Dropboxに置いた画像ファイルが取り込めるらしいことは最近知りました。。。)。 Chromeブラウザのことを意識していなかったのでFirefoxブラウザでの動作確認がメインのコーディングとなります(IEは今も意識してません。。。)。
１、HTMLでbase64形式画像の表示
２、JavaScriptでbase64形式画像の表示
３、動かない。。。 作業用に保存
４、↑↓←→ボタンでcanvas上のbase64形式画像の移動
５、canvas上の2つのbase64画像をゲーム的？loopで表示
６、前回ソースからChromeでも動くように変更(「前回ソース」は４のソースのことです)
↑この最後のコードのみChrome対応です。
以上のようにCanvasを使って基礎的なものをいろいろ試してみましたが、それだけでもう自分にはいろいろとムズイです。。。
このあと、上記コーディング作業の延長としてもう少しCanvasでの作業を続けてみました。 それについては次のブログエントリに載せる予定です。
- category
- 開発
