Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
WhitestormJSを触ってみた
Hideyuki Takeuchi
May 22, 2017
Programming
0
420
WhitestormJSを触ってみた
2017/05/22 のThree.js入門者LT大会の資料です。
WhitestormJSを本当に触ってみただけのプレゼンです。
Hideyuki Takeuchi
May 22, 2017
Tweet
Share
More Decks by Hideyuki Takeuchi
See All by Hideyuki Takeuchi
Exposed 応用編 〜内部実装 と 魔拡張〜
chimerast
0
420
Delegatesと拡張関数・拡張プロパティその合わせ技
chimerast
0
380
Kotlin Coroutines と Ktor HTTP Client で作るスケールするタスク実行
chimerast
0
980
UZABASE創業期から10年いるエンジニアから見た「BtoB SaaSのUI/UXってなんだろう?」
chimerast
1
510
暗号通貨の鍵を安全に管理するアーキテクチャを作ってみようとしている話
chimerast
0
280
この素晴らしい Vue.js に祝福を!
chimerast
16
11k
RxJava + Vert.x + jOOλ で Microservice的な何かを作ってみた
chimerast
0
2.3k
40億レコード以上のSPEEDA大規模データを超高速に表示するElasticsearch活用法
chimerast
1
3.4k
もっとデータ可視化をカジュアルに!OSSプロジェクト「E2D3」
chimerast
1
2.2k
Other Decks in Programming
See All in Programming
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
AWSにおける標的型Bot対策
hacomono
0
390
はてなリモートインターンシップ2022 フロントエンドブートキャンプ 講義資料
hatena
0
110
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
120
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.2k
爆速の日経電子版開発の今
shinyaigeek
1
420
Rによる大規模データの処理
s_uryu
2
620
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
110
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
120
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
290
Step Functions Distributed Map を使ってみた
codemountains
0
100
PHPDocにおける配列の型定義を少し知る
shimabox
1
120
Featured
See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
Visualization
eitanlees
128
12k
What's new in Ruby 2.0
geeforr
336
30k
How STYLIGHT went responsive
nonsquared
89
4.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Become a Pro
speakerdeck
PRO
6
3.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Documentation Writing (for coders)
carmenintech
51
2.9k
Design by the Numbers
sachag
271
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Transcript
WhitestormJS を触ってみた たけうち ひでゆき @chimerast @chimerast 1
注意 今回の勉強会のために WhitestormJS を 初めて触ったので 今日の発表は間違ったことを言っているかも しれないのでご容赦ください @chimerast 2
自己紹介 たけうちさんは縮退しました @chimerast 株式会社ユー ザベー ス 社内ニー ト 全方位型エンジニア G
ダライアスというSTG で3D に目覚める @chimerast 3
3D プログラミング遍歴 2000 年頃にDirectX6 で3D 横スクロー ルシュー ティングを作る Immediate Mode
というポリゴンや行列をごりごり触るやつ たまに3D のプログラムが書きたくなってOpenGL とか触る 2011 年頃Scala でMMD の旧ファイル形式のロ ー ダ& レンダラを実装してみるも、IK ボー ン、 物理演算で挫折 OpenGL with GLSL OpenGL ライブラリとしてLWJGL を使用 @chimerast 4
その昔 Three.js で作ってみたもの @chimerast 5
今日のお題: WhitestormJS @chimerast 6
@chimerast 7
なんかすごそう!! Three.js のさらに wrapper 物理演算がビルトイン! なんかReact Like にも書けるらしい → 実際のデモを見てみる
@chimerast 8
@chimerast 9
物理演算!! @chimerast 10
@chimerast 11
軟体物理!! @chimerast 12
とりあえず触ってみる npm install whs とかでかでかと書いてあるけど、webpack の設定が どう考えても大変なのでJS を直接読み込む <script src="vendor/three.js"></script>
<script src="vendor/whitestorm.js"></script> TUTORIALS の Getting Started → Hello World example に書いてあ るコー ドを試してみる @chimerast 13
@chimerast 14
なんか出力例と違う(TT) ライティングのコー ドがどう考えてもたりない @chimerast 15
いろいろやってみたけど const app = new WHS.App( new WHS.BasicAppPreset() // setup
for : // ElementModule // SceneModule // CameraModule // RenderingModule ); というプリセット設定は動作せず。 @chimerast 16
気を取り直して物理演算 @chimerast 17
ドキュメントがなくて非常に困る ビルトインと書いてありながら実は physics-module.js というものが 必要 ちなみにGitHub のmaster に上がっているものでは動作しない ついでになんだか ammo.js
というのが中でロー ドされている ammo.js は、Bullet 物理エンジンのJS 実装 この辺は、GitHub のREADME から飛べるCodepen から無理矢理推測 @chimerast 18
なんとか動いた。。。 @chimerast 19
const sphere = new WHS.Sphere({ // Create sphere comonent. geometry:
{ radius: 5, widthSegments: 32, heightSegments: 32 }, modules: [ new PHYSICS.SphereModule({ mass: 10 }) ], material: new THREE.MeshPhongMaterial({ color: 0xF2F2F2 }), position: new THREE.Vector3(0, 15, 0) }) @chimerast 20
v2-beta.8 なので今後に期待 @chimerast 21
みていて良さそうなところ モジュー ルベー スでプログラムが構成されている プリセット設定が多く、Three.js ほど複雑にならなさそう 物理演算がなんか気持ちいい プリセットの設定があらかじめ用意されている React っぽい書き方ができるモジュー
ルがあるっぽい ES6 ベー ス @chimerast 22
export class Application extends Component { render() { return (
<App modules={[ new WHS.SceneModule(), new WHS.CameraModule({ position: { z: 20 } }), new WHS.RenderingModule(), new WHS.OrbitControlsModule() ]}> <Sphere geometry={[3, 32, 32]} material={new THREE.MeshBasicMaterial({color: 0xffffff})} key="1" /> </App> ) @chimerast 23
今回時間が無くて試せなかったこと 3D モデルファイルのロー ド アニメー ションの動作確認 @chimerast 24
まとめ まだだいぶ人柱感が強い ドキュメントが追いついていないのがつらい モジュー ルでマウスコントロー ルなんかも簡単につけられる @chimerast 25