SlideShare a Scribd company logo
1 of 4
Download to read offline
CSS3RENDERERを使って
IOSでもサクサク3D!
Acroquest Technology 宮坂 豪
自己紹介
 早稲田大学スポーツ科学部出身
 5歳から野球三昧の日々を
 現在はAcroquestダーツ部主将
5月大会:256チーム中ベスト16
6月大会:50チーム中ベスト4
8月大会:予選落ち・・・
CSS3DRENDERER.JSを触ってみました。
1. 本格的な3D計算のコアな部分をthree.jsにお任せし・・・
2. Cameraのマウス操作をTrackballControls.jsにお任せし・・・
3. 三軸座標の移動や回転アニメーションはTweenにお任せし・・
4. 描画部分をCSS3で仕上げ、3D表現をWebGLなしで高速に行う
CSS3DRenderer.js
iPone or iPadで見てみてください⇒
 3D分子モデル
http://threejs.org/examples/#css3d_molecules
 3D元素記号
http://threejs.org/examples/#css3d_periodictable
 パノラマ
https://dl.dropbox.com/u/7508542/sandbox/threej
s/css3d/css3d_panorama.html
WEBGL未対応のIOSでもヌルヌル!
ここにも
あります

More Related Content

Viewers also liked

ちょっと理解に自信がないな という皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)
ちょっと理解に自信がないなという皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)ちょっと理解に自信がないなという皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)
ちょっと理解に自信がないな という皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)hamaken
 
データ分析チームの振り返り
データ分析チームの振り返りデータ分析チームの振り返り
データ分析チームの振り返りSatoshi Noto
 
The new repository in AEM 6
The new repository in AEM 6The new repository in AEM 6
The new repository in AEM 6Jukka Zitting
 
Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016
Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016
Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016Cloudera Japan
 
Hivemallで始める不動産価格推定サービス
Hivemallで始める不動産価格推定サービスHivemallで始める不動産価格推定サービス
Hivemallで始める不動産価格推定サービスKentaro Yoshida
 
Cloud Native Hadoop #cwt2016
Cloud Native Hadoop #cwt2016Cloud Native Hadoop #cwt2016
Cloud Native Hadoop #cwt2016Cloudera Japan
 
Apache development with GitHub and Travis CI
Apache development with GitHub and Travis CIApache development with GitHub and Travis CI
Apache development with GitHub and Travis CIJukka Zitting
 
40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料)
40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料) 40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料)
40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料) hamaken
 
Amazon Machine Learning概要
Amazon Machine Learning概要Amazon Machine Learning概要
Amazon Machine Learning概要Satoshi Noto
 
Tez on EMRを試してみた
Tez on EMRを試してみたTez on EMRを試してみた
Tez on EMRを試してみたSatoshi Noto
 
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話Kentaro Yoshida
 
大規模データに対するデータサイエンスの進め方 #CWT2016
大規模データに対するデータサイエンスの進め方 #CWT2016大規模データに対するデータサイエンスの進め方 #CWT2016
大規模データに対するデータサイエンスの進め方 #CWT2016Cloudera Japan
 
Oak, the architecture of Apache Jackrabbit 3
Oak, the architecture of Apache Jackrabbit 3Oak, the architecture of Apache Jackrabbit 3
Oak, the architecture of Apache Jackrabbit 3Jukka Zitting
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分 Toshio Ehara
 
僕らがQiitaをゴリゴリ書く理由
僕らがQiitaをゴリゴリ書く理由僕らがQiitaをゴリゴリ書く理由
僕らがQiitaをゴリゴリ書く理由Masayuki Hokimoto
 
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜Takuya Oikawa
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会INI株式会社
 

Viewers also liked (18)

ちょっと理解に自信がないな という皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)
ちょっと理解に自信がないなという皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)ちょっと理解に自信がないなという皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)
ちょっと理解に自信がないな という皆さまに贈るHadoop/Sparkのキホン (IBM Datapalooza Tokyo 2016講演資料)
 
データ分析チームの振り返り
データ分析チームの振り返りデータ分析チームの振り返り
データ分析チームの振り返り
 
The new repository in AEM 6
The new repository in AEM 6The new repository in AEM 6
The new repository in AEM 6
 
Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016
Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016
Cloudera + MicrosoftでHadoopするのがイイらしい。 #CWT2016
 
Hivemallで始める不動産価格推定サービス
Hivemallで始める不動産価格推定サービスHivemallで始める不動産価格推定サービス
Hivemallで始める不動産価格推定サービス
 
Cloud Native Hadoop #cwt2016
Cloud Native Hadoop #cwt2016Cloud Native Hadoop #cwt2016
Cloud Native Hadoop #cwt2016
 
Apache development with GitHub and Travis CI
Apache development with GitHub and Travis CIApache development with GitHub and Travis CI
Apache development with GitHub and Travis CI
 
40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料)
40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料) 40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料)
40分でわかるHadoop徹底入門 (Cloudera World Tokyo 2014 講演資料)
 
Amazon Machine Learning概要
Amazon Machine Learning概要Amazon Machine Learning概要
Amazon Machine Learning概要
 
Tez on EMRを試してみた
Tez on EMRを試してみたTez on EMRを試してみた
Tez on EMRを試してみた
 
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
 
大規模データに対するデータサイエンスの進め方 #CWT2016
大規模データに対するデータサイエンスの進め方 #CWT2016大規模データに対するデータサイエンスの進め方 #CWT2016
大規模データに対するデータサイエンスの進め方 #CWT2016
 
Oak, the architecture of Apache Jackrabbit 3
Oak, the architecture of Apache Jackrabbit 3Oak, the architecture of Apache Jackrabbit 3
Oak, the architecture of Apache Jackrabbit 3
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
 
僕らがQiitaをゴリゴリ書く理由
僕らがQiitaをゴリゴリ書く理由僕らがQiitaをゴリゴリ書く理由
僕らがQiitaをゴリゴリ書く理由
 
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
 
Pythonでpdfをいじってみる
PythonでpdfをいじってみるPythonでpdfをいじってみる
Pythonでpdfをいじってみる
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
 

More from AdvancedTechNight

CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現AdvancedTechNight
 
これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocketAdvancedTechNight
 
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験AdvancedTechNight
 
TypeScriptのススメ ~JavaエンジニアのためのJava(like)Script
TypeScriptのススメ ~JavaエンジニアのためのJava(like)ScriptTypeScriptのススメ ~JavaエンジニアのためのJava(like)Script
TypeScriptのススメ ~JavaエンジニアのためのJava(like)ScriptAdvancedTechNight
 
three.jsで作る3Dの世界
three.jsで作る3Dの世界three.jsで作る3Dの世界
three.jsで作る3Dの世界AdvancedTechNight
 
単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介AdvancedTechNight
 
Stormの注目の新機能TridentAPI
Stormの注目の新機能TridentAPIStormの注目の新機能TridentAPI
Stormの注目の新機能TridentAPIAdvancedTechNight
 
分散ストリーム処理フレームワーク Apache S4
分散ストリーム処理フレームワーク Apache S4分散ストリーム処理フレームワーク Apache S4
分散ストリーム処理フレームワーク Apache S4AdvancedTechNight
 
Twitterのリアルタイム分散処理システム「Storm」入門 demo
Twitterのリアルタイム分散処理システム「Storm」入門 demoTwitterのリアルタイム分散処理システム「Storm」入門 demo
Twitterのリアルタイム分散処理システム「Storm」入門 demoAdvancedTechNight
 
Twitterのリアルタイム分散処理システム「Storm」入門
Twitterのリアルタイム分散処理システム「Storm」入門Twitterのリアルタイム分散処理システム「Storm」入門
Twitterのリアルタイム分散処理システム「Storm」入門AdvancedTechNight
 
ログ収集フレームワークの新バージョン「FlumeNG」
ログ収集フレームワークの新バージョン「FlumeNG」ログ収集フレームワークの新バージョン「FlumeNG」
ログ収集フレームワークの新バージョン「FlumeNG」AdvancedTechNight
 
Hadoop scr第7回 hw2011フィードバック
Hadoop scr第7回 hw2011フィードバックHadoop scr第7回 hw2011フィードバック
Hadoop scr第7回 hw2011フィードバックAdvancedTechNight
 
ななめ45°から見たJavaOne
ななめ45°から見たJavaOneななめ45°から見たJavaOne
ななめ45°から見たJavaOneAdvancedTechNight
 
ATN No.1 MapReduceだけでない!? Hadoopとその仲間たち
ATN No.1 MapReduceだけでない!? Hadoopとその仲間たちATN No.1 MapReduceだけでない!? Hadoopとその仲間たち
ATN No.1 MapReduceだけでない!? Hadoopとその仲間たちAdvancedTechNight
 
ATN No.1 Hadoop vs Amazon EMR
ATN No.1 Hadoop vs Amazon EMRATN No.1 Hadoop vs Amazon EMR
ATN No.1 Hadoop vs Amazon EMRAdvancedTechNight
 
ATN No.2 大阪から来たJavaPuzzlers
ATN No.2 大阪から来たJavaPuzzlersATN No.2 大阪から来たJavaPuzzlers
ATN No.2 大阪から来たJavaPuzzlersAdvancedTechNight
 

More from AdvancedTechNight (19)

CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現
 
これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocket
 
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
 
Backbone.js入門
Backbone.js入門Backbone.js入門
Backbone.js入門
 
TypeScriptのススメ ~JavaエンジニアのためのJava(like)Script
TypeScriptのススメ ~JavaエンジニアのためのJava(like)ScriptTypeScriptのススメ ~JavaエンジニアのためのJava(like)Script
TypeScriptのススメ ~JavaエンジニアのためのJava(like)Script
 
three.jsで作る3Dの世界
three.jsで作る3Dの世界three.jsで作る3Dの世界
three.jsで作る3Dの世界
 
単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介
 
Stormの注目の新機能TridentAPI
Stormの注目の新機能TridentAPIStormの注目の新機能TridentAPI
Stormの注目の新機能TridentAPI
 
Spine入門
Spine入門Spine入門
Spine入門
 
分散ストリーム処理フレームワーク Apache S4
分散ストリーム処理フレームワーク Apache S4分散ストリーム処理フレームワーク Apache S4
分散ストリーム処理フレームワーク Apache S4
 
Twitterのリアルタイム分散処理システム「Storm」入門 demo
Twitterのリアルタイム分散処理システム「Storm」入門 demoTwitterのリアルタイム分散処理システム「Storm」入門 demo
Twitterのリアルタイム分散処理システム「Storm」入門 demo
 
Twitterのリアルタイム分散処理システム「Storm」入門
Twitterのリアルタイム分散処理システム「Storm」入門Twitterのリアルタイム分散処理システム「Storm」入門
Twitterのリアルタイム分散処理システム「Storm」入門
 
ログ収集フレームワークの新バージョン「FlumeNG」
ログ収集フレームワークの新バージョン「FlumeNG」ログ収集フレームワークの新バージョン「FlumeNG」
ログ収集フレームワークの新バージョン「FlumeNG」
 
Hadoop scr第7回 hw2011フィードバック
Hadoop scr第7回 hw2011フィードバックHadoop scr第7回 hw2011フィードバック
Hadoop scr第7回 hw2011フィードバック
 
ななめ45°から見たJavaOne
ななめ45°から見たJavaOneななめ45°から見たJavaOne
ななめ45°から見たJavaOne
 
ATN No.1 MapReduceだけでない!? Hadoopとその仲間たち
ATN No.1 MapReduceだけでない!? Hadoopとその仲間たちATN No.1 MapReduceだけでない!? Hadoopとその仲間たち
ATN No.1 MapReduceだけでない!? Hadoopとその仲間たち
 
ATN No.1 Hadoop vs Amazon EMR
ATN No.1 Hadoop vs Amazon EMRATN No.1 Hadoop vs Amazon EMR
ATN No.1 Hadoop vs Amazon EMR
 
ATN No.2 大阪から来たJavaPuzzlers
ATN No.2 大阪から来たJavaPuzzlersATN No.2 大阪から来たJavaPuzzlers
ATN No.2 大阪から来たJavaPuzzlers
 
ATN No.2 Scala事始め
ATN No.2 Scala事始めATN No.2 Scala事始め
ATN No.2 Scala事始め
 

CSS3Rendererを使ってiOSでもサクサク3D