福野泰介の一日一創 - create every day

ZOZOSUITが来たので、体格オープンデータと3D物理シミュレーションで歩くモデルづくり

2018/07/04
#js #3d #opendata #profile 

ZOZOSUITで計測完了!自分の体型を3Dモデルにして動かせると楽しいかもと、Oimo.jsのデモいじり。
JSで作られた、three.jsと組み合わせて使う、3次元物理シミュレーションエンジンの名前がなぜかオイモ(Oimo)、かわいくて、軽くていい感じ!

歩く人、走る人デモ」Oimo.jsのサンプルを少し改造

ZOZOSUIT到着!

着た!

測った!

計測前にZOZOアプリをアップデート推奨。2回計測した最大差5.4cm。小数第一位が0の時も".0cm"と表記してほしい。

こちら、福野泰介 体格オープンデータ CSV (CC BY)


スタッフTシャツとかの注文に便利かも?RDF化して、5つ星オープンデータにもしてみたい。
計測するごとに変わるので、どこまで正確かの検証は必要そうですが、最新の計測結果をひとまず信用して、Tシャツ、ドレスシャツ、デニムを注文!到着14-28日後とのこと。

体格データに合わせて3Dモデルを変更したり、WebMeganeで実寸大で見て、着た姿を確認するなどできるとおもしろそう。 ZOZOSUIT x Oimo.js 楽しいですよ!

胴長な人デモ」「手足が長い人デモ」色や形をいろいろ変更するところからどうぞ!

3D空間で動画をくるくる回す JavaScript x three.js

2017/09/25
#js #3d 

ウェブで遊べる3Dライブラリ「three.js」を使ったIchigoJamの入門動画紹介ウェブアプリ

IchigoJam Intro Movies」 (元アプリ - css3d_youtube

マウスでくるくる回す操作プログラム js/controls/TrackballControls.js の止まりにくさを表す変数 dynamicDampingFactor を小さくしたので、離してからもくるくる回ってくれます。 ただ、ズームも合わせて滑るようになってしまうので、 dynamicDampingFactorZoom という変数があったらそっちを優先するように改造して js/controls/TrackballControlsZ.js にしました。

サンプルを元に自分好みにどんどん変更しちゃいましょう。(サンプル多数!
three.js全部ダウンロードすると228MBと結構重いので、今回サンプルのみのzip用意しました。
ichigomovies.zip (285KB)
動画を4つ変更するだけなら、htmlへYouTubeのidをコピペでOK!

VR空間を泳ぐように動画を探す体験とか楽しそうですね!
PCのパフォーマンスアップと便利なライブラリで、夢はどんどん広がりますが、実現速度は速まるばかり。

links
- ついにリアル公安9課誕生!オープンデータを推進する神戸市役所の本気!攻殻機動隊風、避難所ナビ3D
- iOS8 WebGL解禁記念! 触れるjig.jpロゴ

ついにリアル公安9課誕生!オープンデータを推進する神戸市役所の本気!攻殻機動隊風、避難所ナビ3D

2015/05/01
#kobe #opendata #odp #3d 

攻殻機動隊のまち、神戸。なんと「神戸市公安9課」が起動!!

公安9課とは、世界的人気のSFマンガ&アニメ「攻殻機動隊」に登場する主人公チームが属する組織で、その俗称が攻殻機動隊。「2029年に内務省公安部内に設置された内閣総理大臣直轄の防諜機関(Wikipediaより)」という設定でしたが、14年の前倒しです!

神戸市:「神戸市公安9課」、起動
神戸市役所公式のプレスリリースには、「オープンデータ・ビッグデータの利活用」の文字!

攻殻機動隊といえば、かっこいい3Dマップ!その実現を目指して、避難所を探すアプリ「避難所ナビ3D」をつくってみました。ひとまず、現在位置から避難所を表示するだけのシンプルなアプリです。


避難所ナビ3D

避難所の5つ星オープンデータにも対応している神戸市でも動きます!
近隣にデータがなければ、公安9課がある、神戸市役所を中心にデータを表示します。
(対応エリア、odp - SPARQL Endpointの内、避難所データを登録している自治体区)


神戸市公安9課 http://kobekokaku.jp/ より

3Dマップ同様、Web上の3Dライブラリ three.js を使った公式サイト、要チェックです!

神戸との沿革
- 2014.5.19 出会い、気付き、攻殻機動隊のまち神戸!
- 2014.7.4 電脳メガネのまち、鯖江での交流
- 2014.7.30 デザインのまち、神戸での交流
- 2014.11.28 神戸ITフェスティバル 神戸市長とパネルディスカッション&ロジコマ
- 2014.11.29 未来の草薙素子!?IchigoJamワークショップ
- 2014.12.9 Code for KOBE!

iOS8 WebGL解禁記念! 触れるjig.jpロゴ

2014/09/18
#ced #3d 

iPhone/iPad用のOS、iOS8がダウンロード可能になりました。ブラウザ上での3D描画、WebGL(ウェブ・ジー・エル)が解禁されました。お手軽3Dライブラリ three.js を使った、昨年つくった3D版、jig.jpロゴをタッチ可能にしてみました。


WebGL対応ブラウザ用 jig.jp ロゴ 3D バージョン2
クリック/タップで動くページへ飛びます

本当は、カヤックさんのデモのようにふさふさしたかったところですが、時間切れ。
➔「WebGLのサイト(iPhone対応の3Dコンテンツ)つくりませんか? 面白法人カヤック

iPhone 6 でどのくらいの速度で動くかが楽しみです!

関連リンク
- 「jig3D - jig.jpロゴ作成秘話
- 「jig.jpロゴに隠されたひみつ - jig.jp 10周年

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像