ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。
ブラウザーの3D表現もここまで来た！WebGLを使った驚きのWebサイト
ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。
csg.js
csg.js Source code: http://github.com/evanw/csg.js/ Documentation: http://evanw.github.com/csg.js/docs/ Introduction Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implem
これはすごい！TLで話題にのぼった3D CSS Testerで私も3Dを体験してみた！
javascriptを使用せずCSSのみで画像を3D回転させる事ができてしまう時代が既に到来していたようです。面白そうなので早速試してみました！ 3D CSS Tester CSS3を利用して画像を3D回転させることができるジェネレーター。 横の数値を変更すれば即座に反映されます。 反映された3D回転は、コードが書き出されているので コピーしてそのまま使用することも可能です！！ 作ってみた ただ単に書き出されたコードをまるまるコピーして、画像を差し替えただけですが ちゃんと動いたことに感動しましたー！！ヾ(*´∀｀*)ﾉｷｬｯｷｬ ※CSS3のZ軸を用いた3D回転を使用しているため 非対応ブラウザの方には表示されなかったり止まって見えたりすると思います。とりあえずChromeかiPhoneで見て頂ければ動くかと。 参考：CSS transforms の利用 – MDN （FireFoxの対
css3で実装する3Dなロールオーバーエフェクトのサンプル
面白かったのでご紹介。マウスホバーによるロールオーバーエフェクトをcssで3D表現したサンプルです。休日ですし、ちょっとネタ的な内容ですけど、これはこれで勉強になりました。いろいろと考えますね、ほんと・・ 例によってブラウザは限られてしまうんですが、良い感じの3Dエフェクトでした。 3D CSS rollovers マウスを乗せると縦とか横に回転します。 見ないとピンと来ないですよねという事でサンプルです。cssのみで動作しています。Chrome推奨。下にスクロールすれば何点かデモがあります。 Sample translate3dとかperspectiveこの3D化にはtranslate3dというCSS3が使用されています。 極めていい加減な画像ですがX、Y、Z軸はこうなっています。 .box .front { -webkit-transform: translate3d(0,0,200p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3D CSS Hartwig chess set (fully playable) · CodePen
