プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
CSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」
近年、ブラウザの発展やWEBGLなどの技術的な発展によりWEB上でも3Dを用いたクリエイティブな表現が多く取り入れられています。今日紹介するのはCSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」です。 空間上にオブジェクトを配置したり、定めた領域・面にテクスチャを貼ってオブジェクトを生成したりといった事が簡単に実現可能となっています。 詳しくは以下 上記は立方体に、テキスチャを張り込んだもの。GPUで描画され、立体的に回転させることも可能、PNG・GIFアニメ・SVGといった様々なフォーマットをテキスチャとして利用可能です。その他にも、様公式サイトに公開されている「voxel.css • Demo」からは触りながら機能を確かめることができます。 ソースコードはGithubにて公開されており、ライセンスはMIT Licenseとなっております。サイト制作のアクセ
HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame - ICS MEDIA
HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの「A-Frame」を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。 次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。 サンプルを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ「A-Frameエー・フレーム」を使用します。「やっぱり
Teddy.js/PaintUp·Webブラウザ上で簡単に3Dオブジェクトを作成 MOONGIFT
3Dで作品を作るというのはとても敷居が高いように感じられます。ものを三次元的に捉えないといけないですし、二次元のコンピュータの中で三次元を描くのはとても面倒なイメージがあります。 そんな大変さを軽減してくれるのがTeddy.js/PaintUpです。Teddyは誰でも簡単に三次元モデルを作れるソフトウェアで、Teddy.jsはそのJavaScript版となっており、PaintUpはTeddy.jsを使ったWebブラウザベースの三次元ペイントソフトウェアになります。 Teddy.js/PaintUpの使い方 例えばこんな感じに絵を描きます。 そして輪郭を描きます。絵を描く前に輪郭を描いた方が良さそうです。 そうすると、どどんとオブジェクトが出来上がります。 回転だってできます。 メッシュ構造にすることもできます。ちょっと不気味？ メッシュ構造でも回転させられます。 Teddy.js/Pain
WebGL版Away3D入門―第5回 モデルデータの読み込み – ICS LAB
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
FN1404002 | Away3D: 立方体を回してみる | HTML5 : テクニカルノート
Away3Dはオープンソースのリアルタイム3Dエンジンです。もともとはFlashプラットフォーム向けに開発されました。そのAway3Dエンジンが、「Away3D TypeScript」としてJavaScriptライブラリへの移植が進んでおり、現在アルファリリースが公開されています。このAway3D TypeScriptを使ったごく簡単なJavaScriptコードで、3次元空間に立方体をつくって回してみましょう。 01 Away3D TypeScriptライブラリを使う 「Away3D TypeScript」サイトには、作例やソースファイルのリンクなどが掲げられています。最新のライブラリは、「Source Files」の欄に示された「GitHub: AwayJS Core TypeScript」と「GitHub: StageGL Core TypeScript」および「GitHub: Sta
HTML5とJavaScriptではじめる3D表現 | Away3D TypeScriptで立方体を回してみる | Away3D Workshop
■Twitter: @FumioNonaka / Facebook Page: Away3D Away3D Workshop HTML5とJavaScriptではじめる3D表現 お品書き 01 Away3D TypeScriptライブラリを使う 02 Viewクラスで3次元空間の表示領域を定める 03 DirectionalLightクラスで平行光源を定める 04 PrimitiveCubePrefabクラスから立方体のオブジェクトをつくる 05 立方体のオブジェクトを水平および垂直の向きに回す 06 映し出される立方体の角度をカメラの動きで変化させる 07 Away3D TypeScriptの解説 Away3D はオープンソースのリアルタイム3Dエンジンだ。もとはFlashプラットフォーム向けに開発された。そのAway3Dエンジンが、「 Away3D TypeScript 」としてJav
FN1404001 | CSS3: 3次元空間に立方体をつくって回す ー transformプロパティ | HTML5 : テクニカルノート
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
HexaFlip: A Flexible 3D Cube Plugin | Codrops
HexaFlip is a JavaScript UI plugin that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins. Today I’d like to share my process for creating a flexible JavaScript UI plugin I’ve dubbed HexaFlip. Lately I’ve taken to building simple experimental UI plugins that manipulate elements with a combination o
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
レガシーなブラウザにも高度なグラフィックを。JavaScriptによるOpenGL実装·JSGL MOONGIFT
JSGLはJavaScriptによるOpenGL実装です。 HTML5の新機能の一つにWebGLがあります。しかしまだまだ最近のWebブラウザでしか実装されていない機能になります。そこでWebGLに対応していないWebブラウザに対して3Dモデリングを行うライブラリがJSGLです。JavaScriptを使ってOpenGLを実装しています。 デモです。オブジェクトが回転しています。FPSはかなり高い数値が出ています。 実装サンプルです。コードはかなり分かりやすいのではないでしょうか。 JSGLには多彩なAPIが作られており、細かくモデリングができるようになっています。元々はJSOS向けのグラフィックスAPIとして開発されているとのことです。 JSGLはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。 MOONGIFTはこう見る JSGLのAPIはWebG
Sprite3D.js, a small library for generating and manipulating CSS 3D transforms
a small library for generating and manipulating CSS 3D transforms NOTICE: This page is slowly getting outdated. In my spare time, I've been working on a major syntax revision, Firefox compatibility issues and a new version of this page. Until I get the time to finish all of this, here's a list of the most up to date resources : "v2" branch on github (featuring a simplified syntax) A more recent li
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Password Protection
The Web Developer Toolbox: ThreeJS – Mozilla Hacks - the Web developer blog