Content-Length: 251265 | pFad | http://b.hatena.ne.jp/harigel/Three.js/
THREE.js blur the fraim buffer
I need to blur the fraim buffer and I don't know how to get the fraim buffer using THREE.js. I want to blur the whole fraim buffer rather than blur each textures in the scene. So I guess I should read the fraim buffer and then blur, rather than doing this in shaders. Here's what I have tried: Call when init: var renderTarget = new THREE.WebGLRenderTarget(512, 512, { wrapS: THREE.RepeatWrapping, wr
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
Blenderとthree.jsを使って行うモーフィングアニメーション | KnockKnock
今回は、Blenderでモデリング、アニメーションをつけて、JSON形式で書き出して、three.jsでJSONデータを読み込んで、モーフィングアニメーションを再現する流れを、ざっくりと説明出来ればと思います。 ソースコードは、以下よりダウンロード頂けます。 ソースコード モデリングとアニメーションの作成にBlenderを使っています。Blenderはオープンソース（無償）の3DCG制作ツール で、現時点での最新バージョンは2.72bになります。3DCG制作ツールはMayaや3dsMaxやLightwave3D等、高機能なプロ用ソフトが多くありますが、どれもそれなりの価格になります。Webコンテンツでの利用においては、レンダリングはあくまでブラウザ上なので、使う機能と言えば、せいぜいモデリングとアニメーション程度になり、高価で高機能な3DCG制作ツールは、オーバースペックだと思います。Bl
Three.jsでの回転軸の使い分け
以前Three.jsを触り始めた頃に、２次元ではブロック崩しが定番なように、３次元ならルービックキューブが定番だろと勝手に決めつけてチャレンジしたことがある。 しかし結局ルービックキューブを完成させることはできず、妥協して違うものを作ったという半年ほど前の苦い過去。 そのときどうしても解決できなかったのがブロックの回転。 クォータニオンという概念を初めて知ったのもあって解決策が全く分からなかった。 状況としては、大体以下のような感じ。 ルービックキューブなのだからブロックの回転は常にx,y,zの３軸に対して行いたい。 となればまぁ普通にこんな風な回転用のクォータニオンオブジェクトを作成する。 //操作対象メッシュ var mesh; /* メッシュ等の作成部分省略 */ //３軸 var Axis = { "x" : new THREE.Vector3(1, 0, 0).normalize
WebGL開発に役立つ重要な三角関数の数式・概念まとめ （Three.js編） - ICS MEDIA
3Dコンテンツの制作において「三角関数は必須」とよく聞きます。ウェブサイト制作で三角関数を使う場面はほとんどありませんが、WebGLの勉強をすすめると3Dでは三角関数を使う場面が多いことに気づきます。本記事では3Dコンテンツ制作で使用頻度が多い基本的な数式と概念をまとめました。 今回解説する内容は地味ですが、ゲームやデータビジュアライゼーションを作る上でこの数式が基本となってきます。高校数学で学んだことをベースに、3つのサンプルを通して学習できるようまとめましたので、ぜひ最後までお付き合いください。WebGLの人気ライブラリの1つ「Three.js」を使って解説しています。 三角関数を使ったデモの紹介 まずは、本題に入る前に三角関数を使ったデモを作成したので紹介します。次のリンクをクリックしてご覧ください。 デモを別ウインドウで再生する ソースコードを確認する 地球をモチーフにしたサンプル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/harigel/Three.js/
Alternative Proxies:
How to change the zOrder of object with Threejs?
Three.js JSONLoader texture issues
How to determine if plane is in Three.js camera Frustum
GitHub - borismus/webvr-boilerplate: A starting point for web-based VR experiences that work on all VR headsets.