ラベル Javascript の投稿を表示しています。 すべての投稿を表示
ラベル Javascript の投稿を表示しています。 すべての投稿を表示

2019年12月4日水曜日

jsdo.it投稿コードをCodePenにサルベージ 完成

前回のエントリ「jsdo.it投稿コードをCodePenにサルベージ」からのものにいくつかjsdo.itからのサルベージコードを追加して完成としています。

以下のようになります。
かなり長いリストになっているかも、です。

CodePenに作成したこのまとめ的Postからのほぼコピペとなります。


No Library

My First jsdo.it Code !


canvasで文字表示
canvasで矩形領域ぬりつぶし

canvasで↑↓←→ボタンで矩形領域の移動
canvasでloopで繰り返し矩形領域ぬりつぶし
canvas上の移動する矩形領域の当たり判定

HTMLでbase64形式画像の表示
JavaScriptでbase64形式画像の表示
↑↓←→ボタンでcanvas上のbase64形式画像の移動
canvas上の2つのbase64画像をゲーム的?loopで表示


(失敗)ゲームっぽい画面表示、にできず。。。
前回コードから勇者の上下左右画像の表示機能を追加しました
前回コードから障害物に引っかかる?機能を追加しました
前回コードから勇者の移動をなめらか?にしました
前回コードからマップスクロール機能を追加しました
前回コードからFirefoxでも動くマップスクロール機能にしました
(失敗)前回コードから背景だけスケール3倍率表示にしてみました
ワンダフルクエスト jsdo.it Ver.

HTML5のAudio機能でMP3ファイルを再生
HTML5のAudio機能でMP3ファイルをループ再生
(失敗)HTML5のAudio機能でMP3ファイルを同時再生
HTML5のAudio機能でRPG風MP3ファイルをテスト再生
HTML5のAudio機能で音量調整の機能をテスト
HTML5のAudio機能でOGGファイルのSE音を再生
HTML5のAudio機能でMP3ファイル読込後にボタンを活性化


CreateJS

CreateJS 0.6.1 前回コードからスクロール機能追加
CreateJS 0.6.1 前回コードから戦闘もどき機能追加
CreateJS EaselJS 0.6.1 前回コードから戦闘機能を改良

CreateJS SpriteSheet キャラ / マップチップ表示

CreateJS SpriteSheet 画面遷移の機能を追加


ThreeJS

Three.js r87でBoxを表示(WebGL使用)
Three.js r87でPlaneを表示(WebGL使用)
Three.js r87でSphereを表示(WebGL使用)

Three.js r87でCylinderを表示(WebGL使用)
Three.js r87でTorusを表示(WebGL使用)
Three.js r87でTorusknotを表示(WebGL使用)
Three.js r87でテクスチャを貼り付けたBoxを表示(WebGL使用)
Three.js r87でテクスチャを貼り付けたPlaneを表示(WebGL使用)
Three.js r87でテクスチャを貼り付けたSphereを表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の勇者3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の村長3Dモデル表示(WebGL使用)
Three.js r87でMagicaVoxelによるobj形式の僧侶3Dモデル表示(WebGL使用)
Three.js r87でMagicaVoxelによるobj形式の魔女3Dモデル表示(WebGL使用)
Three.js r87でMagicaVoxelによるobj形式のしかばね3Dモデル表示(WebGL使用)
Three.js r87でMagicaVoxelによるobj形式のしかばね戦士3Dモデル表示(WebGL使)
Three.js r87でMagicaVoxelによるobj形式のしかばね剣士3Dモデル表示(WebGL使用)
Three.js r87でMagicaVoxelによるobj形式のしかばね王3Dモデル表示(WebGL使用)
Three.js r87でMagicaVoxelによるobj形式の遺跡?3Dモデル表示(WebGL使用)
Three.js r87 で3種類のテクスチャを貼り付けたPlaneを表示(WebGL使用)
Three.js r87 でPlaneとテクスチャによるマップ表示(WebGL使用)
Three.js r87 でPlaneによるマップに3Dモデルを配置(WebGL使用)
Three.js r87(WebGL使用)とCreateJSでインターフェース実験
Three.js r87(WebGL使用)とCreateJSでインターフェース実験2
Three.js r87(WebGL使用) Planeによるマップ上に複数OBJモデルを表示
(失敗)Three.js r87(WebGL使用) 3Dモデルにマウスクリックイベントを追加
(失敗)Three.js r87(WebGL使用) 3Dモデルにマウスクリックイベントを追加2
Three.js r87(WebGL使用) でCreateJSもつかってインターフェースまわりを修正
dat.gui インターフェースと Three.jsによる3Dモデルを同時に表示テスト
dat.gui インターフェースの座標指定テスト
dat.gui インターフェースで「はなす」的な機能を作成
Three.js上にCSSで「はなす」ボタンを作成
Three.js r87 で3Dモデル表示とカメラ操作の機能を作成(WebGL使用)
Three.js r87 で複数3Dモデルを同時に表示(WebGL使用)
Three.js r87 で画面遷移機能のテスト(WebGL使用)
Three.js r87 遷移先画面を増やしてみるテスト(WebGL使用)
Three.js r87 謎の遺跡風3Dモデルを追加してみるテスト(WebGL使用)
Three.js r87 CSSによるいろいろなボタンを表示するテスト(WebGL使用)
Three.jsとvox.js でMagicaVoxelで作成した「勇者」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelで作成した「僧侶」を表示してみるテスト

Three.jsとvox.js でMagicaVoxelで作成した「魔法使い(青髪)」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelで作成した「魔法使い(黄色髪)」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelで作成した「魔法使い(赤髪)」を表示してみるテスト

Three.jsとvox.js でMagicaVoxelで作成した「村長」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelで作成した「しかばね」を表示してみるテスト

Three.jsとvox.js でMagicaVoxelで作成した「しかばね戦士」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelで作成した「しかばね剣士」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelで作成した「しかばね王」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelによる「2015 Happy New Year Sheep」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelによる「2014 Happy New Year Horse」を表示してみるテスト
Three.jsとvox.js でMagicaVoxelに「ひよこ」もどきを表示してみるテスト
Three.jsとvox.js でMagicaVoxel作成ハロウィンのかぼちゃを表示してみるテスト
Three.jsとvox.js でMagicaVoxel作成「しかばね」による「しかばね」ヒエラルキー表示
Three.jsとvox.js でMagicaVoxel作成3Dモデル複数表示
Three.jsによるMagicaVoxel作成3Dモデル読み込み部分をvox.jsで修正してみるテスト
Three.js r87とCSSボタンによるインターフェースをためしてみるテスト
Three.js r87とCreateJSで「たたかう」時の動きを作成してみました
Three.js r87とCreateJSによる「たたかう」時の動きを改良してみました
Three.js r87とCreateJSによる「たたかう」時の動きに攻撃SE音も追加してみました
前回コードよりHTML5のAudio機能による再生サウンドを追加
前回コードよりカメラ視点移動ボタンとサウンドON/OFFボタンを追加してみました


A-Frame

はじめてのA-Frame
A-Frame Practice 01 Box
A-Frame Practice 02 Sphere
A-Frame Practice 03 Cylinder
A-Frame Practice 04 Plane
A-Frame Practice 05 Torus
A-Frame Practice 06 Torus & Light
A-Frame Practice 07 Torus, Light & Ambient Light
A-Frame Practice 08 Mouse Down & Touch Event
A-Frame Practice 09 複数Torusを表示してみました
A-Frame Practice 10 カメラを固定 & VRボタンを非表示にしてみました
A-Frame Practice 11 クリックでBoxの色が変わるようにしてみました
A-Frame Practice 12 Torus Knot
A-Frame Practice 13 Texture on Plane
A-Frame Practice 14 Texture on Box
A-Frame Practice 15 Texture on Sphere
A-Frame Practice 16 Objファイル形式3Dモデルを表示


Youtube API MV再生リスト

My Youtube Player List
→この動画再生リストはコード数が多いので別のPostとしてまとめているものへのリンクを張っています。


Youtube API MV再生リスト以外

英語リスニング用にIT企業創業者の大学卒業式スピーチのYoutube動画を連続再生



勉強用に東北大学での「マイケル・サンデルの白熱教室」動画リストを連続再生
勉強用に同志社大学 小原克博 講義「日本宗教」の動画リストを連続再生
勉強用に同志社大学 小原克博 講義「現代神学」の動画リストを連続再生
勉強用に同志社大学 小原克博 講義「一神教研究」の動画リストを連続再生
勉強用に筑波大学の「Java」講義の動画リストを連続再生

勉強用に九州大学の「情報システム論」(2013年)の動画リストを連続再生
勉強用に九州大学の「社会基盤としてのネットワーク」(2015年)の動画リストを連続再生
勉強用に九州大学の「サイバーセキュリティ基礎論」(2015年)の動画リストを連続再生
勉強用に京都大学の「情報セキュリティ」(2014年)の動画リストを連続再生
勉強用に日本記者クラブでの「サイバーセキュリティ」動画リストを連続再生
勉強用に「慶應大学講義 半導体工学」のYoutube動画リストを連続再生
勉強用に福井大学の「情報工学概論」(2010年) の講義動画リストを連続再生
勉強用に福井大学の「形式言語とオートマトン」(2013年) の講義動画リストを連続再生
勉強用に福井大学の「計算量理論」(2009年) の講義動画リストを連続再生
勉強用に福井大学の「計算論とアルゴリズム設計」(2013年) の講義動画リストを連続再生
勉強用に「筑波大学 計算機数学I Computer Mathematics I (2015)」のYoutube動画リストを連続再生
勉強用に「筑波大学 計算機数学I (2016)」のYoutube動画リストを連続再生
勉強用に「筑波大学 計算機数学I (2017)」のYoutube動画リストを連続再生
勉強用に「筑波大学 2016年度 光エレクトロニクス」のYoutube動画リストを連続再生
勉強用に京都大学の「振動・波動論」(2012年) の講義動画リストを連続再生
勉強用に「電験三種 理論」 の講義動画リストを連続再生


作業用に自分の田舎の動画リストを連続再生(短い動画メインVer.)

作業用に自分の田舎(兵庫県豊岡市)の動画リストを連続再生(長い動画メインVer.)
作業用に自分の田舎(兵庫県豊岡市)の動画リストを連続再生(長い動画メイン別Ver.)
作業用に自分の田舎豊岡市の竹野町の動画を連続再生
作業用に自分の田舎豊岡市のおんぷの祭典演奏動画を連続再生


秋田出身の先輩要望により「なまはげ」動画を連続再生

参考リンク

2019年3月7日木曜日

siouxcitizen's public fiddlesに2コード追加

タイトルのように自分のJSFiddleトップページに2コードを追加しました。

前回のブログエントリと同じように、Three.jsによるglTFファイル形式の3Dモデルのアニメーションを表示する2コードを追加しました。 以下のものになります。 3Dモデルデータの読み込みに少し時間がかかるかもです。
以下、その2コードへのリンクです。

Three.js r102 .glTF 3D Model Animation Display 02
.glbというファイル拡張子のglTF 3Dモデルのアニメーションを表示しています。

Three.js r102 .glTF 3D Model Animation Display 03
そのまんま.glTFというファイル拡張子のglTF 3Dモデルのアニメーションを表示しています。


今回の上記2コードの投稿にあわせて、前回投稿のコード1つの名称も以下のように変更しました。 以下になります。
Three.js r102 .glTF 3D Model Animation Display 01
3Dモデル用にGoogleが開発した?、DRACOという圧縮形式を使用するglTF 3Dモデルのアニメーションを表示しています。



すべてのコードを表示する自分のJSFiddleトップページは引き続き同じ以下になります。
siouxcitizen's public fiddles


2019年3月6日水曜日

siouxcitizen's public fiddles

タイトルのようにJSFiddleに自分のトップページ?のようなものを作りました。

前回ブログエントリで作成していた「Hello World」と表示するプログラムに加えて、Three.jsライブラリを使用した3Dモデルを表示するプログラム2つを、そのトップページ「siouxcitizen's public fiddles」に配置してみました。

以下になります。
siouxcitizen's public fiddles


ついでに、 上記Three.jsライブラリを使用した3Dモデルを表示するプログラム2つへの直リンクも載せておきます。

Three.js r102 .glTF 3D Model Display

Three.js r102 .glTF 3D Model Animation Display


2019年3月5日火曜日

My First JSFiddle

JSFiddleに登録してみました。 


まず最初にいつものHello World表示プログラムを作成してみました。 HTMLで「Hello World」と表示するだけのそのまんまの機能です。
My First JSFiddle


CodePenをはじめるときにも書いたこのコードをそのまま流用しました。
My First CodePen

CodePenとどう使い分けようか?

2019年3月4日月曜日

CodePen動画再生プログラム一覧

CodePenに投稿した動画再生プログラムの一覧を作成してみました。 主にミュージシャンのPV動画を連続再生するプログラムとなっています。

Naverまとめで作成した一覧ではページ数が増えてしまい、一覧性が低下してしまったのでかわりにこのブログで一覧が作れないかと思い作成してみました。

ただ一覧を作成しただけで、順番はテキトーです。 もしかしたらリンクがまちがっているものや、再生できなくなった動画がまざっているものもあるかもしれません。 

リンク先のプログラムでは、いきなり動画が再生される場合もあるかもしれないので、音量にはお気を付けください。



いろいろな洋楽アーティストの動画を連続再生
CodePen - Youtube Player (Play PV of Various Artists)

U2の動画を連続再生
CodePen - Youtube Player (of U2)

U2の動画を連続再生(上記のものに新しめの曲を加えた再生リストとなっています)
CodePen - Youtube Player (of U2) New Ver.

Taylor Swift(テイラー・スウィフト)の動画を連続再生
CodePen - Youtube Player (of Taylor Swift)

徳永英明の動画を連続再生
CodePen - Youtube Player (of Tokunaga Hideaki)

30 Seconds To Mars(サーティー・セカンズ・トゥー・マーズ)の動画を連続再生
CodePen - Youtube Player (of 30 Seconds To Mars)

Linkin Park(リンキン・パーク)の動画を連続再生
CodePen - Youtube Player (of Linkin Park)

BABYMETAL(ベビーメタル)の動画を連続再生
CodePen - Youtube Player (of BABYMETAL)

ONE OK ROCK(ワンオクロック)の動画を連続再生
CodePen - Youtube Player (of ONE OK ROCK)

Billy Joel(ビリー・ジョエル)の動画を連続再生
CodePen - Youtube Player (of Billy Joel)

Top Gun(トップガン)サウンドトラック曲の動画を連続再生
CodePen - Youtube Player (of Top Gun Soundtrack Songs)

宇多田ヒカルの動画を連続再生
CodePen - Youtube Player (of Utada Hikaru MV)

Mr.Children(ミスチル)ライブ動画を連続再生
CodePen - Youtube Player (of Mr.Children Live Movie)

Oasis(オアシス)の動画を連続再生
CodePen - Youtube Player (of Oasis)

Spitz(スピッツ)の動画を連続再生
CodePen - Youtube Player (of Spitz)

Bryan Adams(ブライアン・アダムス)の動画を連続再生
CodePen - Youtube Player (of Bryan Adams)

Journey(ジャーニー)の動画を連続再生
CodePen - Youtube Player (of Journey)

Bad English(バッド・イングリッシュ)の動画を連続再生
CodePen - Youtube Player (of Bad English & John Waite)

鬼束ちひろの動画を連続再生
CodePen - Youtube Player (of Chihiro Onitsuka )

アンジェラ・アキの動画を連続再生
CodePen - Youtube Player (of Angela Aki)

MISIA(ミーシャ)の動画を連続再生
CodePen - Youtube Player (of MISIA)

Aerosmith(エアロスミス)の動画を連続再生
CodePen - Youtube Player (of Aerosmith)

Queen(クイーン)の動画を連続再生
CodePen - Youtube Player (of Queen)

T.M.Revolutionの動画を連続再生
CodePen - Youtube Player (of T.M.Revolution)

TRFの動画を連続再生
CodePen - Youtube Player (of TRF)

TM NETWORKの動画を連続再生
CodePen - Youtube Player (of TM NETWORK)

布袋寅泰の動画を連続再生
CodePen - Youtube Player (of Tomoyasu Hotei)

氷室京介の動画を連続再生
CodePen - Youtube Player (of Kyosuke Himuro)

Enigma(エニグマ)の動画を連続再生
CodePen - Youtube Player (of Enigma)

Carly Rae Jepsen(カーリー・レイ・ジェプセン)の動画を連続再生
CodePen - Youtube Player (of Carly Rae Jepsen)

Daughtry(ドートリー)の動画を連続再生
CodePen - Youtube Player (of Daughtry)

Celine Dion(セリーヌ・ディオン)の動画を連続再生
CodePen - Youtube Player (of Celine Dion)

Alexandros(アレキサンドロス)の動画を連続再生
CodePen - Youtube Player (of Alexandros)

Metallica(メタリカ)の動画を連続再生
CodePen - Youtube Player (of Metallica)

Lady Gaga(レディー・ガガ)の動画を連続再生
CodePen - Youtube Player (of Lady Gaga)

Adele(アデル)の動画を連続再生
CodePen - Youtube Player (of Adele)

Sawano Hiroyukiの動画を連続再生
CodePen - Youtube Player (of Sawano Hiroyuki)

Dangerkids(デンジャーキッズ)の動画を連続再生
CodePen - Youtube Player (of Dangerkids)

Killswitch Engage(キルスウィッチ・エンゲイジ)の動画を連続再生
CodePen - Youtube Player (of Killswitch Engage)

Giorgio Moroder(ジョルジオ・モロダー)の動画を連続再生CodePen - Youtube Player (of Giorgio Moroder)

Trivium(トリヴィアム)の動画を連続再生
CodePen - Youtube Player (of Trivium)

槇原敬之の動画を連続再生
CodePen - Youtube Player (of Takayuki Makihara)

Maroon 5(マルーン5)の動画を連続再生
CodePen - Youtube Player (of Maroon 5)

The Killers(ザ・キラーズ)の動画を連続再生
CodePen - Youtube Player (of The Killers)

Jason Derulo(ジェイソン・デルーロ)の動画を連続再生
CodePen - Youtube Player (of Jason Derulo)

Bruno Mars(ブルーノ・マーズ)の動画を連続再生
CodePen - Youtube Player (of Bruno Mars)

Lacuna Coil(ラクーナ・コイル)の動画を連続再生
CodePen - Youtube Player (of Lacuna Coil)

Superfly(スーパーフライ)の動画を連続再生
CodePen - Youtube Player (of Superfly)

CAPSULE(カプセル)の動画を連続再生
CodePen - Youtube Player (of CAPSULE)

Revolution Saints(レヴォリューション・セインツ)の動画を連続再生
CodePen - Youtube Player (of Revolution Saints)

Primal Fear(プライマル・フィア)の動画を連続再生
CodePen - Youtube Player (of Primal Fear)

Helloween(ハロウィン)の動画を連続再生
CodePen - Youtube Player (of Helloween)

Dark Tranquillity(ダーク・トランキュリティ)の動画を連続再生
CodePen - Youtube Player (of Dark Tranquillity)

Dream Theater(ドリーム・シアター)の動画を連続再生
CodePen - Youtube Player (of Dream Theater)

和楽器バンド(わがっきバンド)の動画を連続再生
CodePen - Youtube Player (of Wagakki Band)

椎名林檎の動画を連続再生
CodePen - Youtube Player (of Sheena Ringo)

Sting(スティング)の動画を連続再生
CodePen - Youtube Player (of Sting)

Firehouse(ファイアーハウス)の動画を連続再生
CodePen - Youtube Player (of Firehouse)

Demi Lovato(デミ・ロヴァート)の動画を連続再生
CodePen - Youtube Player (of Demi Lovato)

Simon & Garfunkel(サイモン&ガーファンクル)の動画を連続再生
CodePen - Youtube Player (of Simon & Garfunkel)

ケツメイシの動画を連続再生
CodePen - Youtube Player (of Ketsumeishi)

Coldplay(コールドプレイ)の動画を連続再生
CodePen - Youtube Player (of Coldplay)

久保田利伸の動画を連続再生
CodePen - Youtube Player (of Toshinobu Kubota)

ヨーロッパ抒情派ピアノジャズの動画を連続再生
CodePen - Youtube Player (of European Piano Jazz)

Metallica(メタリカ)のアルバムHardwiredの動画を連続再生
CodePen - Youtube Player (of Metallica Album Hardwired)

MAN WITH A MISSION(マン・ウィズ・ア・ミッション)の動画を連続再生
CodePen - Youtube Player (of MAN WITH A MISSION)

クリスマスソングの動画を連続再生
CodePen - Youtube Player (of Christmas Songs)

BiSH(ビッシュ)の動画を連続再生
CodePen - Youtube Player (of BiSH)

Katy Perry(ケイティ・ペリー)の動画を連続再生
CodePen - Youtube Player (of Katy Perry)

Kelly Clarkson(ケリー・クラークソン)の動画を連続再生
CodePen - Youtube Player (of Kelly Clarkson)

Evanescence(エヴァネッセンス)の動画を連続再生
CodePen - Youtube Player (of Evanescence)

P!nk(ピンク)の動画を連続再生
CodePen - Youtube Player (of P!nk)

amazarashi(アマザラシ)の動画を連続再生
CodePen - Youtube Player (of amazarashi)

Orianthi(オリアンティ)の動画を連続再生
CodePen - Youtube Player (of Orianthi)

Ellie Goulding(エリー・ゴールディング)の動画を連続再生
CodePen - Youtube Player (of Ellie Goulding)

Zedd(ゼッド)の動画を連続再生
CodePen - Youtube Player (of Zedd)

Charlie Puth(チャーリー・プース)の動画を連続再生
CodePen - Youtube Player (of Charlie Puth)

Caravan(キャラバン)の動画を連続再生
CodePen - Youtube Player (of Caravan)

Within Temptation(ウィズイン・テンプテーション)の動画を連続再生
CodePen - Youtube Player (of Within Temptation)

SLAYER(スレイヤー)の動画を連続再生
CodePen - Youtube Player (of SLAYER)

Avenged Sevenfold(アヴェンジド・セヴンフォールド)の動画を連続再生
CodePen - Youtube Player (of Avenged Sevenfold)

NIGHTWISH(ナイトウィッシュ)の動画を連続再生
CodePen - Youtube Player (of NIGHTWISH)

Five Finger Death Punch(ファイヴ・フィンガー・デス・パンチ)の動画を連続再生
CodePen - Youtube Player (of Five Finger Death Punch)

ABBA(アバ)の動画を連続再生
CodePen - Youtube Player (of ABBA)

Air Supply(エア・サプライ)の動画を連続再生
CodePen - Youtube Player (of Air Supply )

Nickelback(ニッケルバック)の動画を連続再生
CodePen - Youtube Player (of Nickelback)

Slipknot(スリップノット)の動画を連続再生
CodePen - Youtube Player (of Slipknot)

Let It Goの動画いろいろを連続再生
CodePen - Youtube Player (of Let It Go)

Bon Jovi(ボン・ジョヴィ)の動画を連続再生
CodePen - Youtube Player (of Bon Jovi)

GReeeeN(グリーン)の動画を連続再生
CodePen - Youtube Player (of GReeeeN)

徳永英明のカバー曲の動画を連続再生
CodePen - Youtube Player (of Tokunaga Hideaki Cover Songs)

Michael Bolton(マイケル・ボルトン)の動画を連続再生
CodePen - Youtube Player (of Michael Bolton)

Elton John(エルトン・ジョン)の動画を連続再生
CodePen - Youtube Player (of Elton John)

ANTHRAX(アンスラックス)の動画を連続再生
CodePen - Youtube Player (of ANTHRAX)

Queensryche(クイーンズライク)の動画を連続再生
CodePen - Youtube Player (of Queensryche)

Tears for Fears(ティアーズ・フォー・フィアーズ)の動画を連続再生
CodePen - Youtube Player (of Tears for Fears)

Backstreet Boys(バックストリート・ボーイズ)の動画を連続再生
CodePen - Youtube Player (of Backstreet Boys)

Depeche Mode(デペッシュ・モード)の動画を連続再生
CodePen - Youtube Player (of Depeche Mode)

Robert Miles(ロバート・マイルズ)の動画を連続再生
CodePen - Youtube Player (of Robert Miles)

ELUVEITIE(エルヴェイティ)の動画を連続再生
CodePen - Youtube Player (of ELUVEITIE)

Alan Walker(アラン・ウォーカー)の動画を連続再生
CodePen - Youtube Player (of Alan Walker)

LP(エルピー)の動画を連続再生
CodePen - Youtube Player (of LP)

Megadeth(メガデス)の動画を連続再生
CodePen - Youtube Player (of Megadeth)

Imagine Dragons(イマジン・ドラゴンズ)の動画を連続再生
CodePen - Youtube Player (of Imagine Dragons)

Perfume(パフューム)の動画を連続再生
CodePen - Youtube Player (of Perfume)

Usher(アッシャー)の動画を連続再生
CodePen - Youtube Player (of Usher)

Chris Brown(クリス・ブラウン)の動画を連続再生
CodePen - Youtube Player (of Chris Brown)

Rammstein(ラムシュタイン)の動画を連続再生
CodePen - Youtube Player (of Rammstein)

Rob Zombie(ロブ・ゾンビ)の動画を連続再生
CodePen - Youtube Player (of Rob Zombie)

Marilyn Manson(マリリン・マンソン)の動画を連続再生
CodePen - Youtube Player (of Marilyn Manson)

Enya(エンヤ)の動画を連続再生
CodePen - Youtube Player (of Enya)

MONDO GROSSO(モンド・グロッソ)の動画を連続再生
CodePen - Youtube Player (of MONDO GROSSO)

Dream Theater The Astonishing Disc 1(ドリーム・シアター ジ・アストニッシング ディスク1)の動画を連続再生
CodePen - Youtube Player (of Dream Theater The Astonishing Disc 1)

Dream Theater The Astonishing Disc 2(ドリーム・シアター ジ・アストニッシング ディスク2)の動画を連続再生
CodePen - Youtube Player (of Dream Theater The Astonishing Disc 2)

陰陽座の動画を連続再生
CodePen - Youtube Player (of Onmyoji)

UVERworld(ウーバーワールド)の動画を連続再生
CodePen - Youtube Player (of UVERworld)

SHOW-YA(ショーヤ)の動画を連続再生
CodePen - Youtube Player (of SHOW-YA)

Korn(コーン)の動画を連続再生
CodePen - Youtube Player (of Korn)

人間椅子(にんげんいす)の動画を連続再生
CodePen - Youtube Player (of Ningen Isu)

Ozzy Osbourne(オジー・オズボーン)の動画を連続再生
CodePen - Youtube Player (of Ozzy Osbourne)

Linkin Park Album One More Light(リンキン・パーク アルバム『ワン・モア・ライト』)の動画を連続再生
CodePen - Youtube Player (of Linkin Park Album One More Light)

Audioslave(オーディオスレイヴ)の動画を連続再生
CodePen - Youtube Player (of Audioslave)

Chris Cornell(クリス・コーネル)の動画を連続再生
CodePen - Youtube Player (of Chris Cornell)

Velvet Revolver(ヴェルヴェット・リヴォルヴァー)の動画を連続再生
CodePen - Youtube Player (of Velvet Revolver)

The Pretty Reckless(プリティー・レックレス)の動画を連続再生
CodePen - Youtube Player (of The Pretty Reckless)

Avril Lavigne(アヴリル・ラヴィーン)の動画を連続再生
CodePen - Youtube Player (of Avril Lavigne)

Paramore(パラモア)の動画を連続再生
CodePen - Youtube Player (of Paramore)

東京スカパラダイスオーケストラ(とうきょうスカパラダイスオーケストラ)の動画を連続再生
CodePen - Youtube Player (of Tokyo Ska Paradise Orchestra)

Alessia Cara(アレッシア・カーラ)の動画を連続再生
CodePen - Youtube Player (of Alessia Cara)

日本のなつかし曲の動画を連続再生
CodePen - Youtube Player (of My Nostalgic Japanese Songs)

浜田省吾の動画を連続再生
CodePen - Youtube Player (of SHOGO HAMADA Live)

森山直太朗の動画を連続再生
CodePen - Youtube Player (of Moriyama Naotaro)

秦基博の動画を連続再生
CodePen - Youtube Player (of Hata Motohiro)

矢井田瞳の動画を連続再生
CodePen - Youtube Player (of Yaida Hitomi)

nano.RIP(ナノライプ)の動画を連続再生
CodePen - Youtube Player (of nano.RIP)

John Lennon(ジョン・レノン)の動画を連続再生
CodePen - Youtube Player (of John Lennon)

Pink Floyd(ピンク・フロイド)の動画を連続再生
CodePen - Youtube Player (of Pink Floyd)

PUFFY(パフィー)の動画を連続再生
CodePen - Youtube Player (of PUFFY)

森高千里の動画を連続再生
CodePen - Youtube Player (of Moritaka Chisato)

アニソンの動画を連続再生その1
CodePen - Youtube Player (of Japanese Anime Songs 1)

アニソンの動画を連続再生その2
CodePen - Youtube Player (of Japanese Anime Songs 2)

アニソンの動画を連続再生その3
CodePen - Youtube Player (of Japanese Anime Songs 3)

アニソンの動画を連続再生その4
CodePen - Youtube Player (of Japanese Anime Songs 4)

Nano(ナノ)の動画を連続再生
CodePen - Youtube Player (of Nano)

Aimer(エメ)の動画を連続再生
CodePen - Youtube Player (of Aimer)

MY FIRST STORY(マイ・ファースト・ストーリー)の動画を連続再生
CodePen - Youtube Player (of MY FIRST STORY)

OUTRAGE(アウトレイジ)の動画を連続再生
CodePen - Youtube Player (of OUTRAGE)

T-BOLAN(アウトティー・ボラン)の動画を連続再生
CodePen - Youtube Player (of T-BOLAN)

B'z(ビーズ)の動画を連続再生
CodePen - Youtube Player (of B'z)

稲葉浩志の動画を連続再生
CodePen - Youtube Player (of Koshi Inaba)

REBECCA(レベッカ)の動画を連続再生
CodePen - Youtube Player (of REBECCA)

Sia(シーア)の動画を連続再生
CodePen - Youtube Player (of Sia)

欅坂46の動画を連続再生
CodePen - Youtube Player (of Keyakizaka46)

AKB48の動画を連続再生
CodePen - Youtube Player (of AKB48)

乃木坂46の動画を連続再生
CodePen - Youtube Player (of Nogizaka46)

Judas Priest(ジューダス・プリースト)の動画を連続再生
CodePen - Youtube Player (of Judas Priest)

Iron Maiden(アイアン・メイデン)の動画を連続再生
CodePen - Youtube Player (of Iron Maiden)

Guns N' Roses(ガンズ・アンド・ローゼズ)の動画を連続再生
CodePen - Youtube Player (of Guns N' Roses)

Pretty Maids(プリティ・メイズ)の動画を連続再生
CodePen - Youtube Player (of Pretty Maids)

Hardline(ハードライン)の動画を連続再生
CodePen - Youtube Player (of Hardline)

Harem Scarem(ハーレム・スキャーレム)の動画を連続再生その1
CodePen - Youtube Player (of Harem Scarem 1)

Harem Scarem(ハーレム・スキャーレム)の動画を連続再生その2
CodePen - Youtube Player (of Harem Scarem 2)

Harem Scarem(ハーレム・スキャーレム)の動画を連続再生その3
CodePen - Youtube Player (of Harem Scarem 3)

日本の昔のロボットアニメの曲(洋楽風)の動画を連続再生
CodePen - Youtube Player (of Japanese Old Robot Anime Songs)

Asia(エイジア)の動画を連続再生
CodePen - Youtube Player (of Asia)

John Wetton(ジョン・ウェットン)の動画を連続再生
CodePen - Youtube Player (of John Wetton)

Jon Bon Jovi(ジョン・ボン・ジョヴィ)の動画を連続再生
CodePen - Youtube Player (of Jon Bon Jovi)

Jonathan Cain(ジョナサン・ケイン)の動画を連続再生
CodePen - Youtube Player (of Jonathan Cain)

Richie Sambora(リッチー・サンボラ)の動画を連続再生
CodePen - Youtube Player (of Richie Sambora)

FOZZY(フォジー)の動画を連続再生
CodePen - Youtube Player (of FOZZY)

In This Moment(イン・ディス・モーメント)の動画を連続再生
CodePen - Youtube Player (of In This Moment)

bonobos(ボノボ)の動画を連続再生
CodePen - Youtube Player (of bonobos)

Arson City(アーソン・シティ)の動画を連続再生
CodePen - Youtube Player (of Arson City)

We Are The Catalyst(ウィ・アー・ザ・カタリスト)の動画を連続再生
CodePen - Youtube Player (of We Are The Catalyst)

上北健の動画を連続再生
CodePen - Youtube Player (of Ken Kamikita)

Fair Warning(フェア・ウォーニング)の動画を連続再生
CodePen - Youtube Player (of Fair Warning)

Mikael Erlandsson(ミカエル・アーランドソン)の動画を連続再生
CodePen - Youtube Player (of Mikael Erlandsson)

Van Halen(ヴァン・ヘイレン)の動画を連続再生
CodePen - Youtube Player (of Van Halen)

Europe(ヨーロッパ)の動画を連続再生
CodePen - Youtube Player (of Europe)

Elvis Presley(エルヴィス・プレスリー)の動画を連続再生
CodePen - Youtube Player (of Elvis Presley)

Elton John(エルトン・ジョン)の動画を連続再生
CodePen - Youtube Player (of Elton John)

GLAY(グレイ)の動画を連続再生
CodePen - Youtube Player (of GLAY)

IN FLAMES(イン・フレイムス)の動画を連続再生
CodePen - Youtube Player (of IN FLAMES)

まふまふの動画を連続再生
CodePen - Youtube Player (of Mafumafu)

Cheap Trick(チープ・トリック)の動画を連続再生
CodePen - Youtube Player (of Cheap Trick)

Roxette(ロクセット)の動画を連続再生
CodePen - Youtube Player (of Roxette)

Madonna(マドンナ)の動画を連続再生
CodePen - Youtube Player (of Madonna)

MYTH & ROID(ミス アンド ロイド)の動画を連続再生
CodePen - Youtube Player (of MYTH & ROID)

SawanoHiroyuki[nZk](澤野弘之)の動画を連続再生
CodePen - Youtube Player (of SawanoHiroyuki[nZk])

globe(グローブ)の動画を連続再生
CodePen - Youtube Player (of globe)

CHAGE and ASKA(チャゲ・アンド・アスカ)の動画を連続再生
CodePen - Youtube Player (of CHAGE and ASKA)

BUMP OF CHICKEN(バンプ・オブ・チキンク)の動画を連続再生
CodePen - Youtube Player (of BUMP OF CHICKEN)

スキマスイッチの動画を連続再生
CodePen - Youtube Player (of Sukima Switch)



2018年12月6日木曜日

Babylon.jsリンクいろいろ 日本語版

長くなってきたので、英語版と日本語版をわけました。
Babylon.jsリンクいろいろ 英語版

■■■英語版ヘッダーより Start■■■■■■■■■■■■■■■■■■■■■■■■■
 前回前々回のブログエントリのBabylon.jsプログラム作成・投稿時の自分への動機付け、参考等にした、Babylon.js関連のリンクを備忘録的に記録しておきます。
■■■英語版ヘッダーより End■■■■■■■■■■■■■■■■■■■■■■■■■

日本語でのBabylon.jsリンクいろいろ

■■■2018年■■■
ICSさんのサイト
Babylon.jsを使用した本格的なゲーム作成とその技術的なことについての説明をされています。 今回はこのサイトを見て触発されて、久しぶりにBabaylon.jsによるプログラム作成・投稿となりました。
CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成
WebGLフレームワーク「Babylon.js 3.3.0」リリース!VR向けGUI対応、パーティクルエフェクト強化、動画キャプチャー機能など
スライド


CrossRoadさんのサイト
Babylon.jsと他のソフトウェア・技術との連携について説明されています。 次にUnityを使うときには何か自分でも試してみたいと思うようになりました。
Babylon.js向けデータをUnityから出力する
Babylon Tool KitによるUnityプロジェクトの変換検証
UnityからエクスポートしたBabylon.jsデータの制御方法

Babylon.jsでナイトプールを作って、Unityとの作りやすさを整理しました
Blenderでロボットにボーンとモーションをつけて、Babylon.jsで再生させる方法


■■■2015年12月~2016年1月頃■■■
マイクロソフトのMSDNにある、Babylon.jsによるボーリングゲーム作成記事の日本語訳です。
December 2015
ゲーム開発 - Babylon.js: 基本的な Web ゲームのビルド
January 2016
ゲーム開発 - Babylon.js: 初めての Web ゲームを強化する高度な機能


■■■2015年■■■
3年ほど前のQiitaの記事ですが、3Dダンジョンをアニメーション付きミクさんが移動するプログラムを公開されています。 
Babylon.js で WebGL プログラミングしたら、 Unity, MMD モデルの変換で苦労した話


■■■他 不定期期間■■■
WebGL総合取扱い - WebGL 総本山 -(webgl.souhonzan.org) さんより
Babylon.js のタグがついた記事一覧

またそこからリンクのあるSRETKSさん関連のサイト
SRETKS
では、
左上にある選択肢 → LAB → LABにあるプログラム一覧から選択 → LAUNCH
でいろいろなプログラムを選択して実行・表示できるようです。

noteにはSRETKSさんによるBabylon.jsについての記事もあるようです。
PBRでブラウザでもリアルな表現をしよう!


■■■おまけ■■■
cx20さんのサイト
Babylon.js で地球を回してみるテスト
 具体的にこのサイトが、というわけではないですが、jsdo.itで見かけたcx20さんのBabylon.jsのコードの数々が、自分に最初にBabylon.jsってなんだ? Babylon.jsをちょっと触ってみようかな、と思わせてくれるきっかけになりました。
 今回のBabylon.jsのプログラム作成・投稿時にもglTFについてのアドバイスを頂きました。

2018年12月4日火曜日

Babylon.jsリンクいろいろ 英語版

長くなってきたので、英語版と日本語版をわけました。
Babylon.jsリンクいろいろ 日本語版

 前回前々回のブログエントリのBabylon.jsプログラム作成・投稿時の自分への動機付け、参考等にした、Babylon.js関連のリンクを備忘録的に記録しておきます。

英語でのBabylon.jsリンクいろいろ

Babylon.js 本家サイト(英語)
Babylon.js 本家サイトです。 デモ、ドキュメント、等充実しています。
下記のBabylon.jsのPlaygroundともよく連携していて、今回Babylon.jsのプログラム作成・投稿作業で新しいことを試そうとする場合、かなりの部分がこのPlaygroundのコピペからプログラム作成をスタートする、といった流れになりました。
Babylon.js Playground


Babylon.jsの状況の参考 その①
JavaScript Game Engines(英語)
GithubにおけるJavascriptゲームエンジンのスター獲得数が表示されています。
Babylon.jsは3Dゲームエンジンの中ではGithubのスター獲得数が最も多いよう。
2Dゲームエンジンの 
・pixijs / pixi.js (スター獲得数 20960)
・photonstorm / phaser (スター獲得数 23331)
を含めての全体でも
・Babylon.js(スター獲得数 7918)
は3番目にスターを獲得しているようです。※スター獲得数は20181204時点のものです
 ちなみにThree.jsはこの選択肢にはいっていないようですが、世間一般ではThree.jsはあまりゲームエンジンとは見られていないものなんでしょうか???


Babylon.jsの状況の参考 その②
HTML5 GAME DEVS(英語)
 Babylon.jsによるプログラムの作成・投稿作業中、Babylon.jsの疑問点についての検索からよくたどり着いてお世話になったサイトです。
 このHTML5によるゲーム作成についてのサイトでは、フォーラムでのFrameworksについての投稿数はBabylon.jsが最も多いようです(使いづらい、わかりづらい、といったことが多いのが理由かもしれませんが。。。)。


Babylon.jsの状況の参考 その③
HTML5 Game Engines(英語) Which HTML5 Game Engine is right for you?
 ここでのBabylon.jsはトップ3のゲームエンジンのひとつのようです。3Dのゲームエンジンではトップなんかな。
 ちなみにトップ1、2のGDevelopとConstructはプログラムをせずに2Dゲーム作成ができるゲームエンジンのようです。 試してませんが、RPGツクールMV、アクションゲームツクールMV、Plicyにあった2Dアクションゲーム作成の機能、といったものに近い感じの機能を提供してくれているのでしょうか? 少し気になりました。 


2018年12月2日日曜日

CodePenにBabylon.jsによるプログラムを投稿

 前回エントリ「jsdo.itにBabylon.jsのよる3Dプログラムを投稿」のプログラムを基本コピペでバックアップ的にCodePenにも投稿してみました。

 投稿したプログラムの一覧を今回もNaverまとめで作成しました。 3Dファイルの読み込みが重いせいか、サムネイルの画像が自動に生成されない場合が多く、サムネイル画像ほとんどないですが。。。
以下です。

Naverまとめ
CodePen投稿コードまとめ Babylon.jsで3D表示

 CodePenのPostsという機能でもプログラムの一覧をまとめてみましたが、テキストのタイトル名にリンクを貼っただけのもので、画像のひとつもないのでそっけない感じの一覧となりました。 Postsは本来的にはブログ的な使い方をするもの?
そんなテキストだけの一覧は以下になります。

CodePen Posts
Babylon.js v3.3.0 Practice

2018年11月28日水曜日

jsdo.itにBabylon.jsのよる3Dプログラムを投稿

 タイトルにあるようにjsdo.itに、Babylon.jsという3Dライブラリを使用したプログラムをいつくか作成してアップロードしてみました。

 前にも、自分のNaverまとめ「 jsdo.it投稿コードまとめ Babylon.jsで3D表示その1
 」にまとめているようにBabylon.jsによる3Dプログラムを作成していましたが、今回以下のサイトでBabylon.jsを使いこなしてのゲーム開発について説明されているのを見て、久しぶりにBabylon.jsによるプログラムがしてみたくなりタイトルにあるようなプログラム投稿となりました。

CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成
WebGLフレームワーク「Babylon.js 3.3.0」リリース!VR向けGUI対応、パーティクルエフェクト強化、動画キャプチャー機能など


作成して投稿したプログラムの、画像サムネイル付きのNaverまとめでの一覧は以下になります。

jsdo.it投稿コードまとめ Babylon.jsで3D表示その2
jsdo.itに投稿したBabylon.jsバージョン3.2による3Dプログラム
約15個のプログラムの一覧を表示しています

jsdo.it投稿コードまとめ Babylon.jsで3D表示その3
jsdo.itに投稿したBabylon.jsバージョン3.3による3Dプログラム
約70個のプログラムの一覧を表示しています

 今回久しぶりに使用したBabylon.jsでは、glTFという3Dモデルのファイルフォーマットがアニメーション付きのものも含めて非常によく表示できたと感じました。
 物理演算もOimo.jsやCannon.jsといった物理演算ライブラリをラップして使えるようです。 
 あとは、個人的にですが、Three.jsと比べてGUIの機能がかなりBabylon.jsライブラリ自体の機能として取り込まれていて、ゲームなどのインターフェースが作りやすそうだと感じられました。


 以下、投稿順とは一致してませんが、おおまかな区分と説明で分類してみたjsdo.it投稿プログラムの一覧です。 Babylon.jsのバージョンは3.3.0でのものです。

区分は以下のようになっています
①基本機能
②GUI機能とSound機能
③Tween的アニメーション機能
④glTFファイル形式の3Dモデル表示
⑤glTFファイル形式のアニメーション付き3Dモデル表示
⑥glTFファイル形式の3DモデルアニメーションをGUIボタンで切り替え
⑦babylon形式の3Dモデルを表示


①基本機能
基本的な機能、単純な3Dオブジェクトを表示したり、ただテクスチャをそれらに貼り付けて表示する機能を試したプログラムの一覧です。
Babylon.js v3.3.0 でBoxを表示

Babylon.js v3.3.0 でSphereを表示

Babylon.js v3.3.0 でPlaneを表示

Babylon.js v3.3.0 でCylinderを表示

Babylon.js v3.3.0 でTorusを表示

Babylon.js v3.3.0 でTorusKnotを表示

Babylon.js v3.3.0 でLinesを表示

Babylon.js v3.3.0 でテクスチャを貼り付けたPlaneを表示

Babylon.js v3.3.0 テクスチャを貼り付けたBoxを表示

Babylon.js v3.3.0 でテクスチャを貼り付けたSphereを表示


②GUI機能とSound機能
Babylon.jsによるラベルやボタン表示の機能、サウンド再生機能、3Dオブジェクトをクリックしたときの機能、Cannon.jsでの衝突判定、等を試しています。
Babylon.js v3.3.0 で3D GUI機能テスト

Babylon.js v3.3.0 でGUI機能テスト

Babylon.js v3.3.0 で3D GUI(MeshButton3D)機能テスト

Babylon.js v3.3.0 でSound再生機能テスト

Babylon.js v3.3.0 でSound on Mesh再生機能テスト

Babylon.js v3.3.0 でGUIのボタン・ラベルの機能いろいろテスト

Babylon.js v3.3.0 でGUIボタンでBox操作してみるテスト

Babylon.js v3.3.0 で衝突判定つき3Dオブジェクトを操作してみるテスト

Babylon.js v3.3.0 でカメラの位置操作を対象オブジェクト周りでできるようにしてみるテスト

Babylon.js v3.3.0 で回転・前進操作を対象3Dオブジェクトに設定してみるテスト

Babylon.js v3.3.0 でArcRotateCameraの位置操作を対象オブジェクト周りでできるようにしてみるテスト

Babylon.js v3.3.0 のTrigger機能で3Dオブジェクトへのクリック・タッチ判定テスト

Babylon.js v3.3.0 でClick/Touch処理の3Dオブジェクトへの追加テスト


③Tween的アニメーション機能
Tweenという名前で呼ばれている、プログラム上で操作対象の動きを指定する機能を使用してみました。 Babylon.jsではAnimationという名前でそのTween的機能が提供されているようでした。
Babylon.js v3.3.0 でAnimation

Babylon.js v3.3.0 でAnimationその2

Babylon.js v3.3.0 でAnimationその3


④glTFファイル形式の3Dモデル表示
glTFというファイル形式の3Dモデルを表示しています。 最初にBabylon.jsをさわりはじめたころは、あまりうまく表示できず一度挫折しましたが、今回のBabylon.jsのテストではほぼ問題なく表示できました。 今回作成したBabylon.jsによるプログラムの大部分はglTFによる3Dモデルの表示になっています。
Babylon.js v3.3.0 でMagicaVoxelで作成した3DモデルをglTFファイルに変換して表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その2

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その3

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その4

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その5

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その6

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その7

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その8

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その9

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その10

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その11

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その12

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その13

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その14

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その15

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その17

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その20

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その21

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その22

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その24

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その27

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その28

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その29

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その32

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その34

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その36


⑤glTFファイル形式のアニメーション付き3Dモデル表示
glTF形式のアニメーション付き3Dモデルを表示しています。 今回は、アニメーション付きのものまでサクッと簡単に表示できてしまいました。 3Dモデルの読み込み時、アニメーション時に処理重い場合はありますが。
Babylon.js v3.3.0 でglTFファイル形式アニメーション付き3Dモデルを表示

Babylon.js v3.3.0 でglTFファイル形式アニメーション付き3Dモデル(重め)を表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その16

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その18

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その19

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その23

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その25

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その26

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その30

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その31

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その33

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その35

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その37


⑥glTFファイル形式の3DモデルアニメーションをGUIボタンで切り替え
Babylon.jsの機能で表示できるGUIボタンで、3Dモデルのアニメーションを切り替えられるようにしてみました。 ゲームなんかで3Dモデルのアニメーションを切り替えるのに利用できるかもしれません。
Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その38

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その39


⑦babylon形式の3Dモデルを表示
Babylon.jsのbabylon形式3Dファイルを表示しています。 表示だけ、アニメーション付き、アニメーション切り替え機能付き、とあります。
Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示
3Dモデルのアニメーションとその切り替え機能付き

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その2
3Dモデル表示のみ

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その3
3Dモデルのアニメーション

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その4
3Dモデルのアニメーション



あとはこのプログラム
ES6(ES2015)ではじめてのBabylon.js Ver.3.2.0 元ネタ
のように、ECMAScriptによるBabylon.jsのプログラムもできるようなので、そのうち気が向いたらECMAScriptによる書き直しなんかもやってみるかもです。

2018年5月4日金曜日

jsdo.it に投稿したMV動画再生プログラム13選

 久しぶりに、前のこのエントリの続きでアクセス1000を越えたMV動画再生プログラムをリストしてみます。 久しぶりに確認してみるとけっこう1000アクセス超えるものが増えていました。 お好きなアーティストさんの動画の連続再生あれば、ご視聴ください。 たまに動画削除されてて再生できなくなったりしてますが。。。 

その①
[シャッフル機能付き] 作業用にスピッツのYoutubePV動画リストを連続再生













その②
[シャッフル機能付き] 作業用にONE OK ROCKのYoutubePV動画を連続再生

その③
[シャッフル機能付き] 作業用にT.M.RevolutionのYoutubePV動画を連続再生

その④
[シャッフル機能付き] 作業用にアンジェラ・アキのYoutubePV動画を連続再生

その⑤
[シャッフル機能付き] 作業用にCAPSULEのYoutubePV動画を連続再生

その⑥
[シャッフル機能付き] 作業用にBiSH(ビッシュ)のYoutube動画を連続再生

その⑦
[シャッフル機能付き] 作業用にamazarashi(アマザラシ)のYoutube動画を連続再生

その⑧
[シャッフル機能付き] 作業用にPerfumeのYoutubePV動画リストを連続再生

その⑨
[シャッフル機能付き] 作業用に和楽器バンドのYoutube動画を連続再生

その⑩
[シャッフル機能付き] 作業用にAlexandros(アレキサンドロス)のYoutubePV動画を連続再生

その⑪
[シャッフル機能付き] 作業用に槇原敬之のYoutubePV動画を連続再生

その⑫
[シャッフル機能付き] 作業用にBABYMETALのYoutubePV動画を連続再生

その⑬
[シャッフル機能付き] 作業用にBryan AdamsのYoutubePV動画を連続再生



番外編

1000アクセス超えたけれども動画が削除されてしまって、動画再生プログラムを作成し直したもののリストです。

その① Mr.Children ミスチル
[[[現在再生不能]]] 作業用にMr.ChildrenのYoutubePV動画リストを連続再生
↓ 
[シャッフル機能付き] 作業用にMr.Children(ミスターチルドレン)のYoutubeライブ動画を連続再生
  MV動画がいつもまにかほとんど削除されていたので、ライブ動画をメインに動画再生プログラムを作成しなおしてみました。 ライブ動画でもMV動画に遜色ない感じ。 さすがのミスチルさんやで。


その② 宇多田ヒカル
[シャッフル機能付き] 作業用に宇多田ヒカルのYoutubePV動画リストを連続再生

作業用に宇多田ヒカルのYoutube動画を連続再生
 同じようにMV動画がほぼ削除されていましたが、ほぼ同じMV動画が違うYoutubeのIDで復活してました。 なんだったんだろう? よくわかりせんが、もう一度動画再生プログラム作成しました。 最初の動画再生プログラムに、新しい曲の動画や、ライブ動画も少し追加してみました。


その③ クリスマスソング集
[シャッフル機能付き] クリスマス用にクリスマスソングのYoutube動画を連続再生

[シャッフル機能付き] クリスマス用にクリスマスソングのYoutube動画を連続再生
 確認したら削除されて再生されない動画がひとつあったので、プログラムを作り直しました。 jsdo.itのアカウントが新しくなったので、最近は小さな曲目の修正でも作り直しとなってしまってます。  

2017年12月25日月曜日

jsdo.itでThree.jsプログラムを投稿

 新しく作成したjsdo.itアカウントでThree.jsのプログラムを投稿してみました。 これまで投稿したThree.jsのプログラムを、改めてThree.jsのバージョンを変えて投稿し直したといった感じのものです。 

 プログラムでやっていることの内容の進化はそれほどありませんが、あまりThree.jsに触らないでおくと早いバージョンアップに取り残されてしまいそうだったので久しぶりにThree.jsによるプログラムをしました。

 以下がそのThree.jsのプログラムの一覧になります。 最後のほうはMagicaVoxelで作成した3Dオブジェクトを入れ替えて表示しているだけになっています。(Naverまとめによるサムネイル付きプログラム一覧はコチラ

はじめてのThree.js r87(WebGL使用)

Three.js r87でBoxを表示(WebGL使用)

Three.js r87でPlaneを表示(WebGL使用)

Three.js r87でSphereを表示(WebGL使用)

Three.js r87でCylinderを表示(WebGL使用)

Three.js r87でTorusを表示(WebGL使用)

Three.js r87でTorusknotを表示(WebGL使用)

Three.js r87でテクスチャを貼り付けたPlaneを表示(WebGL使用)

Three.js r87でテクスチャを貼り付けたBoxを表示(WebGL使用)

Three.js r87でテクスチャを貼り付けたSphereを表示(WebGL使用)

Three.js r87でサンプル3DモデルBuffaloを表示(WebGL使用)

Three.js r87でサンプル3DモデルFemaleを表示(WebGL使用)

Three.js r87でOBJファイル形式3Dモデルを表示その1(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の勇者3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の僧侶3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の魔法使い3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の村長3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の「しかばね」3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の「しかばね戦士」3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の「しかばね剣士」3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の「しかばね王」3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の「HTML5」ロゴの3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の某配管工兄の3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の某配管工弟の3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の「光の配管工」の3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の「闇の配管工」の3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その1(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その2(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その3(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その4(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その5(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その6(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その7(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その8(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その9(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式サンプルキャラ3Dモデル表示その10(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の魔法使い3Dモデル表示2(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の魔法使い3Dモデル表示3(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の魔法使い3Dモデル表示4(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の馬3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の羊3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の雛3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式のかぼちゃ3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の複数かぼちゃ3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の某配管工サンタの3Dモデル表示(WebGL使用)

Three.js r87でMagicaVoxelによるobj形式の擬音「ボカ」3Dモデル表示(WebGL使用)


上記の投稿Three.jsプログラムも含むjsdo.itに投稿したプログラムのまとめは以下になります(Naver使用)
jsdo.it HTML5 プログラムリスト インデックス

2017年12月24日日曜日

jsdo.it に投稿したMV動画再生プログラム2選

 この前回のブログ投稿のつづきです。 jsod.itに投稿したMV動画連続再生プログラムのうち2つを選んで載せてみます。

 選んだ基準は同じようにアクセス数が1000を超えたものです。 ジャンルがかけ離れたと感じられる2つの動画再生プログラムになりました。 
 
 個人的にはTMネットワークが予想していたよりアクセスされていてちょい嬉しい。 自分は音楽自体をTMネットワークに啓蒙された感のある人なので。

 Silpknot(スリップノット)も思っていたより聴いている人がいるんだな~、という感じがしました。 自分も重めの曲が聴きたいときに再生してたりします。

 以上、上記の意見は自分のさびれたサイト群(含 動画連続再生プログラム)へのアクセス数1000を多いものとしてみた場合の感想です。

その①
[シャッフル機能付き] 作業用にTM NETWORKのYoutube動画を連続再生
http://jsdo.it/siouxcitizen/gHUi

その②
[シャッフル機能付き] 作業用にSlipknotのYoutubePV動画を連続再生
http://jsdo.it/siouxcitizen/U3Qi

関連リンク
作業用に連続再生 TM NETWORK 公式Youtube動画リスト (Naverまとめ)    
作業用にSlipknot(スリップノット)のYoutubePV動画を連続再生 (Naverまとめ)

2017年9月17日日曜日

jsdo.it に投稿したMV動画再生プログラム3選

 jsod.itに投稿した、「シャッフル機能付き」にしてからのMV動画再生プログラムのうち3つを選んで載せてみます。

 選んだ基準はアクセス数が1000を超えたものです。 1000アクセスはWebの片隅にある自分関連サイトの中ではかなり大きな数。 なにがどうなって1000アクセス超えたのかはよくわかりませんが、その3つを紹介してみます。

その①
[シャッフル機能付き] 作業用に宇多田ヒカルのYoutubePV動画リストを連続再生 
http://jsdo.it/siouxcitizen/C95m



















20180504追記
↑動画が削除されたので?上記のプログラムではもう動画の再生ができないようです。
かわりに新しい動画再生プログラムを作成しました。
作業用に宇多田ヒカルのYoutube動画を連続再生


その②
[シャッフル機能付き] 作業用にTaylor Swift(テイラー・スウィフト)のYoutubePV動画リストを連続再生
http://jsdo.it/siouxcitizen/8qik




















その③
[シャッフル機能付き] 作業用にJason Derulo(ジェイソン・デルーロ)のYoutubePV動画を連続再生
http://jsdo.it/siouxcitizen/uoPS




















関連リンク
作業用に連続再生 宇多田ヒカル 公式YoutubePV動画リスト(Naverまとめ)
作業用に連続再生 Taylor Swift (テイラー・スウィフト) YoutubePV動画リスト(Naverまとめ)
作業用に連続再生 Jason Derulo (ジェイソン・デルーロ) YoutubePV動画リスト(Naverまとめ)

jsdo.it でA-Frame のVR/3D機能を試してみました

 A-FrameというJavascript用のVR/3D用のフレームワークが存在したようなので、jsdo.itで試してみました。 (jsdo.itはJavascriptのコードを投稿・実行できるサイト)

 最終的には、glTFという3Dモデルのフォーマットを試して表示するところまでを目指してましたが、そこまでは達成できず。。。 いつものobjフォーマットによる3Dモデル表示までにとどまりました。 glTFの最新版の2.0で試したせいかもしれません。 その辺は、またA-Frameのバージョンが上がったら再度試してみるかもです。

 何も考えずにA-Frameのコードを作成していたら、思ったより多めのコード数となったので対象コードについては下記の「Naverまとめ」にまとめてみました。 コード数は約45です。


jsdo.it投稿Javascript(HTML5)コードまとめ A-Frameで3D表示

https://matome.naver.jp/odai/2150378740360332801


関連リンク
jsdo.it HTML5 プログラムリスト インデックス

2017年6月25日日曜日

宇多田ヒカルのMV動画を連続再生

Yotubeにある宇多田ヒカルのMV動画をプログラムで連続再生させてみました。

作成したプログラムは、以下のプログラム投稿サイトのjsdo.itに投稿しました。



投稿先はココです。

全画面表示用のものはココです。 こちらはサイトを開くと自動で動画が再生されるので音量に気を付けてください。

------------------------------------------------------------------------------------------
20180504追記
↑動画が削除されたので?上記のプログラムではもう動画の再生ができないようです。
かわりに新しい動画再生プログラムを作成しました。
作業用に宇多田ヒカルのYoutube動画を連続再生
全画面表示用のものはココです。
------------------------------------------------------------------------------------------

ブラウザ上でそのままプログラムを実行できるので、プログラムの知識がなくても誰でも使用できるものになっているかと思います。

再生してるMV動画の一覧はこちらのNaverまとめにまとめています。


 他にもMV動画を再生するプログラムはいくつか作成したので、今後もこのブログのエントリで紹介していくかもしれませんが、宇多田さんMV動画は最初に自分がプログラムで動画を連続再生させようとする動機になったものなので最初に紹介しました。 
 
 プログラムを作るかどうか考えていた時に、宇多田さんのベストアルバム的なMV動画がYoutubeに公開されていたので、それを再生したいと思いプログラムを作成することを決めた経緯があります。 宇多田さんマジネ申とオモタ。 そんなわけで、動画連続再生プログラムを紹介する最初のブログエントリにしました。

ちなみに、最近はPVではなくて、MVっていうんですかね?
 

2016年8月6日土曜日

Naverまとめに登録

 タイトルのようにNaverまとめに登録してみました。 といっても実際にはかなり前に登録してます。
 
 自分にとってNaverまとめは、元々自分のjsdo.itへの投稿プログラムを「まとめ」機能で整理しようと登録したものです。 プログラムの投稿がひと段落したら全てのプログラムを「まとめ」で整理しようと考えてはじめましたが、いっこうにプログラム投稿がひと段落しそうにないので、とりあえず今の時点でできているプログラムの「まとめ」のリンクをここに貼り付けてみます。

プログラムについての一番上位のインデックスページは以下となります。
jsdo.it HTML5 プログラムリスト インデックス

 そしてそのインデックスページからさらに、3Dを扱うThree.js、2Dを扱うCreateJS(EaselJS)、YoutubeのAPI、といった機能ごとプログラムのまとめページへのリンクを貼り付けています。 ちなみに、YoutubeのAPIを使用して作成した、作業用BGMとしてアーティスト公式PV動画を連続再生するプログラムは、プログラムをしない方にも使用できるかもです。

 最後に。 元々はプログラムの「まとめ」のために「Naverまとめ」を使い始めましたが、使い勝手がよかったのでその他の自分の備忘録メモ的な使い方も増えてきました。 プログラム以外のまとめについても機会があればまたこのブログにのせてみたいと思います。

2016年3月20日日曜日

jsdo.itコード埋め込みテスト

jsdo.it のコード埋め込みができるかテストしてみます。
なんとか表示できそうですね。

いちおうURLが oreorekaihatsu (オレオレ開発) なので、今後引用するかもしれない自分のjsod.it投稿プログラムを埋め込みできるかテストしてみました。

20170603追記
HTTPS対応やらなんやらでうまく埋め込みできなくなりました。 このブログエントリで、埋め込んだプログラムを読み込んで実行させるということができなくなったようです。 かわりにプログラム投稿サイトへの直接リンクを張っておきます。 ココです。

20170917追記
サムネイル(リンク機能付き)も貼り付けておきます。

http://jsdo.it/siouxcitizen/cqW8