ブラウザ３Dゲームを作る作戦その4: MMDデータを読み込んで動かす - 式姫で遊ぶ日記
前回はcubeだったので今回は代わりにMMDデータを読み込んで使いたいと思います。 読み込む サンプル 移動しているときに歩かせる/走らせる 下準備：モーションファイル情報をまとめておく モデルデータ・モーションデータをロードしてhelperにセットする セットしたモーションをばらばらに切り出して覚えておく 切り出したモーションの適用 サンプル 読み込む MMDLoaderというものがあるので、今回はそれを使っていきます。 threejs.org MMDデータまわりを使うために、一通り javascriptファイルを読み込んでおくと良さそうです。 追記：RawGitが終了するようなのでアドレスを変更 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js"></script> <script
MMDモデルを3DCGでウェブ上に公開し閲覧者がアングルを動かしまくれるJavaScriptライブラリ「jThree」
MMD(MikuMikuDance)で作成したファイルをウェブページ上に表示し、閲覧者が視点を自由に操作できるようにするJavaScriptライブラリが「jThree」です。ページ上にモデルを表示させるにはWindows 7を搭載したPCでChrome・FireFox・Operaを使えばOK。また、Macの場合はOperaならば同様にページ上で動作させることが可能なようです。 3DCGコンテンツをjQueryスタイルで作るJavaScriptライブラリ - jThree http://www.jthree.jp/ 実際にウェブページ上でどんなことができるようになるのかは以下のムービーを見れば分かります。 「jThree」を使うとウェブページ上でこんなことができるようになる - YouTube jThreeのトップページにはデモページが3つ用意してあるので、今回は「千本桜 + カゲロウデイズ
Vocaloid Promotion Video Project
初音ミク専用のPV作成用ツール (初音ミク以外のモデルは表示できません) MikuMikuDance (約1MB) 「みくだん」様にて、MMDチュートリアル正式版が公開されています(かんな様) ニコニコ動画内でユーザーの方が『MikuMikuDance初心者向け講座』を公開してくれています(ガンプラP様)
ブラウザ上でMMDを扱えるようにした (JavaScript & WebGL)
現状は「MMDデータを扱えるようにした」がより正確かも。前: sm26268613 次: sm27956156mylist/49125767デモ: http://threejs.org/examples/#webgl_loader_mmd_audioJavaScriptでMMDデータを扱えるMMDLoaderを作りました。Three.js r74に入りました。ブラウザ上でリアルタイムにMMDを踊らせたり、その他色々できます。後半はまだまだ開発途中のブラウザMMDエディタの紹介。Three.js EditorにMMDをサポートさせようとしているところ。エディタデモ: http://takahirox.github.io/three.js.mmdeditor/editor/Menu bar->Add->MikuブラウザMMDビューアアプリ作成で得たノウハウをもっと多くの人が活用できるようにT
他人には教えたくないWebでMMD
久しぶり３Dモデルをブラウザ上で動かしたいと思い、調査し直してみました Qiitaや個人ブログなど様々なサイトを参考にしたのですが現バージョンの方法が解説されていません そのため、2019/07/03におけるモダンなブラウザ上で３Dモデルを動かす方法を記載しておきます Three.jsとはWeb上でMMDを動かすにためにThree.jsを使用します Three.jsとは、ウェブブラウザ上で簡単にコンピューターグラフィックス（CG）ができるJavaScirptライブラリです 簡単にコンピュータグラフィックスができるというところがポイントで、WebGLというWebに標準搭載されている技術があるのですが、これで作るのは大変むずかしいため、Three.jsで簡単にCGができるようになっています 公式サイト：
Windows7 XP Mode の複製の仕方 | 普通的生活
大分、いまさらなエントリーになってしまいましたがWindows 7のXP Modeを便利に使用しています。XP Modeの実態はMicrosoftが大分前に買収したConnectix(だっけ?)のVirtual PCを使用した仮想マシンです。うまく最適化されているのかメモリーが2GBしかない私のMac miniでもうまく動きます。 普通にプログラムをXP Modeに導入すると7のメニューから起動出来たりして、それはそれで便利ですが開発環境などを構築していると、せっかくの仮想環境なのでテスト用に別の仮想マシンを仕立てたくなります。仮想マシンの構成を参照すれば難しい事ではありませんがメモ代わりに記録しておきます。 [ 準備 ] Windows 7のエクスプローラーは規定値では隠しファイルが見えません。これを見えるようにしておきます。コントロールパネル->デスクトップのカスタマイズ->フォルダー
アイコンフォントのデメリットを解決する「Ligature Symbols」を使ってみた。 | Oh-Blog
当ブログでも固定のページトップに導入したアイコンフォントですが、当初はアルファベット1文字にアイコンを割り当てる方式のものを採用する方式しか見当たらなくてモヤモヤしてました。 さらに調べてみた所リガチャ（合字）の仕組みを利用したアイコンフォント「Ligature Symbols」があると聞きつけました。 導入も管理も手軽なのでかなりオススメ！モヤモヤの理由 一般的なアイコンフォントはフォントをダウンロードする時点で特定のアルファベッドとフォントを紐付けます。そして紐付けたアルファベッドをソースに書ことで、紐付けたアイコンがブラウザに表示が置き換わる仕組みです。 ブラウザで見る限りデザインされたアイコンが表示されるだけなのでユーザビリティ的にも問題無いように思えますが、検索エンジンの視点から見ると「ソースに意味が分からない文字列がある」と認識されてしまうので基本的なHTMLの構造に則っていな
アンドロイドのバッテリーを長持ちさせるには？
アンドロイドのバッテリーを伸ばすためのアプリと、テクニックを紹介します。どうやらバッテリーを一番消費するのはディスプレーと3G回線らしい。 スマホのバッテリーを長持ちさせるには、「Wi-Fiをオフにする」「バッテリー節約アプリをインストールする」など都市伝説的な似通ったようなことをいくらでも見てきた、という人が多いと思います。 Sponsored Link こちらの画像は、「SONY Xperia Z3」の待受けの状態でどれくらいバッテリーがもつか計測した時の1時間毎のバッテリーの残量です。 なんと24時間経過して、77%。48時間経過して66%もバッテリーが残っていました。 平均すると1日あたり11%減。つまり、9日間ぐらいは待受けだけでもつ計算になります。 このページでは、本格的なバッテリーを長持ちさせる方法と検証。そして、なぜバッテリーが減ってしまうのか、などを紹介したいと思います。
HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
Webサイトの作り方のまとめ！ブラウザチェック。
サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware＋IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使
ネットワーク通信を行う場合に検討すべきこと
特にモバイルアプリで頻繁にネットワークが切れる可能性がある場合こういった対策を考えた方がいい。 接続のタイムアウト通信を行う場合には基本的にタイムアウトの設定をする。 「どのくらいの秒数でタイムアウトするか」は難しいが、「課金や決済等の2重投稿が問題になる通信」は長く、「ページの表示等の2重投稿が問題にならない通信」は短くするのがいい。 ただし、2重投稿が問題になる通信でも、「タイムアウト後は再送信前にサーバに最初の通信が成功したかどうか確認する」のであればタイムアウトは短くても機能的な問題は少ない。 （または、サーバ側が2重送信前提で処理を行う） 自動再接続特にストリーミング等で「常時コネクションを張り続ける」系の実装を行う場合、一度通信が切断しても自動的に再接続する実装が行われることが多い。 ただ、このときにコネクションの管理が正しく行われず複数のコネクションが同時張られる状態になると
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
LINE Social Plugins
Click here if your browser does not automatically redirect you...
Access-Control-Allow-Origin試してみた。その２ - ミルク色の手紙
前回めでたくクロスドメインからレスポンスもらえるようになったけど、Cookieが送れなかった件。 参考をよーく見直してみたら、なんかCookieセットできそうな文章を発見。で、再度お試し。 RPC側を次のように修正。Access-Control-Allow-Credentialsヘッダーを追加する。 <?php header('Access-Control-Allow-Origin:http://localhost'); header('Access-Control-Allow-Credentials:true'); header('Content-Type:text/plain;charset=UTF-8'); $msg = ' World'; if(isset($_COOKIE['_test_'])) { $msg = ' Again'; } else { setcookie('_te
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
マルチデバイス（ガラケー&スマフォン&PC）で位置情報を取得する方法 | mitsurun30page
（一度投稿途中で上げてしまって削除したので再チャレンジ） iphoneとandroidは共通でGPSを取得する方法はいろいろなサイトで記載されています。 この機能はwebkit等での共通機能なので,firefox,chrome,safari等でも同様の機能で提供可能です。 また、ガラケーでの位置情報取得方法も昔からいろいろなサイトで実装方法が記載されています。 ただ、 iphone/android/webkitでの取得はjavascriptベースでブラウザ処理 ガラケーはphp/perl等サーバサイドでの処理 となっているため、共通的に使えるものほしいなぁ～と思ってちょっと作ってみました。 iphone/android端末が増えてきたとはいえ、依然として旧端末であるガラケーも多いですから。 （かくいう私もガラケー(au)でね） 実装方法 ブラウザ・キャリアによってリンク先出し分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
windowの名前
【MMD on WebGL】HTML5でMMDを動かす
Engadget | Technology News & Reviews
SoftBank スマートフォン サービス開発支援サイト | ソフトバンク