CSS3のtransformプロパティは、要素に回転・伸縮・傾斜・移動などの座標変換を加えます。さらに、transform-styleプロパティも合わせて用いれば、要素が3次元空間で変換できます。記事「Creating an animated 3D CSS cube using 3D transforms」のサンプルを参考に、CSSで3次元空間に立方体をつくって回してみます(サンプル001)。 サンプル001■CSSで3次元空間に立方体をつくって回す 01 3次元空間の座標変換で使うCSSプロパティ CSSのtransformプロパティは、要素に座標変換を加えます。具体的には、要素の回転や伸縮、傾斜、平行移動がプロパティで定められます。transformプロパティの値には、変換関数を与えます。次表001に掲げたのは、2次元平面の座標変換を行う関数です[*1]。 表001■transform
初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> 小山田 晃浩(株式会社 ピクセルグリッド) WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ(HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
第6回 Photoshop CS5 Extendedの進化した3D機能を使いこなす 画像処理・解説:大里宗也(VONS pictures) Tweet Photo:片岡竜一 独自の3D機能を理解しながら、作りたい立体を組み立てる Photoshopの3D機能は CS4 Extendedでもプリセットで11種類のプリミティブな3Dオブジェクト(立方体、円柱、球、ピラミッドなど)が作成できる機能が搭載されていたが、任意の形状のオブジェクトを成形できるモデリング機能がなかった。 CS5 Extendedには新たに「成形」という機能が搭載され、テキストレイヤーや選択したパスなどから3Dオブジェクトをモデリングすることが可能になった。 今回はその「成形」機能を使ってPhotoshop内で複数の3Dオブジェクトをモデリングし、それらを組み合わせることで、エレキギターの3Dオブジェクトを作ることにした。
画像を使用しないで、3Dの棒グラフをスタイルシートで実装するチュートリアルをmarco folioから紹介します。
パフォーマンスとしては最強ではないかと言われつつも、国内で流行る傾向がなかなか見られないFlashの3Dライブラリ「Alternativa3D」。せめてサクッとデモを作れるように簡易テンプレートを作ってみました。 まずはテンプレートを用いて作ったデモを紹介。 demo source Papervision3DのBasicViewみたいなクラスファイルで、これを使用すると3Dの初期設定が自動的におこなわれるというものです。メリットとして動作させるまでに記述するスクリプトの量を減らすことができます。 使い方 ダウンロード先からライブラリファイルをダウンロードします。 BasicTemplateクラスを継承してドキュメントクラスを作成。クラスのatInitメソッドとatPreRenderメソッドのところに処理を書きます。前者は初期化(ステージにADDされたタイミング)、後者はエンターフレームのタ
Yasu@ClockMakerさんのエントリー「PV3Dの球面に対して波紋効果(Waterball)」を読んで、面白そうだったのでオレもやってみた。かなり勉強になった。 BumpMap Animation Test(要:FlashPlayer9) ※テッカテカの玉をクリックすると波紋が広がります。 原理としては、Shader(この場合EnvMapShader)の bumpmap に割り当ててあるBitmapDataに下記のようなイメージを動的に生成してる。 これだけでデキター!かと思ったら、そんなに甘くなかった。 shadedMaterialに渡すShader、 BumpMap = new BitmapData(width, height, false, 0); shader = new EnvMapShader ( light, envMap, envMap, 0x666666, B
How to Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool In this tutorial, we'll explain how to create an open book mostly with Illustrator's 3D Extrude & Bevel Tool. We'll create open pages with graphics and add a wavy background. The book can be customized by applying your own graphics to the pages. Author: Simona Pfreundner I am a digital artist and graphic designer and love Illus
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く