three.jsでジェネラティブアートっぽいことするのに必要な知識 - Processing中毒者の嘔吐物
タイトルの通り。 去年末くらいからWebGLというかthree.jsの勉強始めて、ある程度複雑な作品が作れるようになった。現在7つほどhttp://p5aholic.me/で作品を公開している。 点と線が繋がってごにょごにょするやつとか、近い点で面作ってごにょごにょするやつとか、そういうのをthree.jsで作るにはどんな知識が必要かというのを書いておく。本当はthree.jsの入門サイト作って体系的に解説したいところだけど、入門サイトはP5 Code Schoolで手一杯です。入門サイト運営するのくっそ面倒なんですわ。 大前提 JavaScriptはオブジェクトとか含めてしっかり理解していること。 three.jsの基礎知識 当たり前だけど、three.jsの基礎は押さえてないといけない。僕はLearning Three.js読んだ。英語だけどすごい読みやすいのでオススメ。 Learni
p5.jsとthree.jsによる音声に反応する3D再帰木 – Fujimura Seminar
HTML5では、PCのマイクやカメラから音声や映像を取得するMedia Streamと呼ぶインタフェースが提供されています。この機能はIE11やSafariでは、まだ実装されておらず、ChromeとFirefoxのみのサポートですが、今回、この機能を活用して、先週投稿したthree.jsによる3D再帰木を、マイクから拾った音声に応じて動くようにしてみました。以下の画像をクリックすると、ブラウザがマイクを使用してよいか尋ねるダイアログボックスが表示されますので、それをONにしてみて下さい。3D木が表示され音声に応じて動きます。YouTubeなどで音楽を流すと踊ります。 今回、p5.jsというライブラリを使ってMedia Stream APIを利用しました。p5.jsは、Processingに近いコーディングスタイルでアニメーションやメディア操作が容易に記述できるJavaScriptのライブラ
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
ThreePiece.js
概要 ThreePiece.jsは、WebGLの3DCGをシンプルな記法で生成できるようにしたThree.jsのラッパーライブラリです。 わずかな記述で3Dオブジェクトが表示できるように、各オブジェクトには省略可能なデフォルト値が設定されています。 そのため、色、サイズ、位置などほとんどのパラメータを省略することが可能となっており、省略した場合は画面上の見やすい位置に見やすい色で表示されます。設定が難しいライトやカメラの記述も省略することで適切な初期値が設定されます。 https://github.com/aike/ThreePiece.js ボックスの表示 var t1 = new ThreePiece('example1', 300, 200); t1.eval({obj:"box"}); 位置、サイズ、角度の指定 var t2 = new ThreePiece('example2',
地理院地図3Dにthree.jsのOculusRiftEffectとOculusControlsを足してみる - waigani's diary
FOSS4G Advent Calendar 2014 今年もFOSS4G Advent Calendarが行われます。今年はQiitaに場所を移しての開催ですのでご注意ください。自分で参加日登録して、記事を書いたら自分でリンクすることになります。 FOSS4G Advent Calendar 2014 - Qiita 昨年の様子は下記からご覧ください。 FOSS4G Advent Calendar 2013 : ATND 以下の記事はAdvent Calendarのネタに使おうかと思いましたが、FOSS4G出てこないなと考え直して先に公開しちゃいます。 OculusRift風表示 夏に某所でthree.jsで簡単に試せるよと教えてもらったのですが、そのまま放置してたのでそろそろ試そうかと。 three.jsのexamplesに、OculusRiftのeffectとcontrolsの例が載
RiftSketch: Live coding in VR with the Oculus Rift, Firefox WebVR, JavaScript and Three.js
I built a live-coding web app for the Oculus Rift where you code in JavaScript using Three.js and watch the world change around you in real-time. It's quite a niche application since you need to have an Oculus Rift, be a JavaScript programmer *and* be sufficiently familiar with Three.js but, if you fit that criteria, it's a surprisingly engaging experience! If happen to have a Rift and you want
全天球パノラマ動画を表示するJavaScriptライブラリ作った - aike’s blog
複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。 こんなやつ。 http://home360.co.jp/freedom360.html http://freedom360.us/ 要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。 そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。 そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみ
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、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ファイルを手に入れま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Experiments
HTML5Experts.jp
地理院地図3Dデータを使ってみるテスト（その１１） - jsdo.it - Share JavaScript, HTML5 and CSS
SPECIAL.T by Nestlé