たった4行でできる！ ブラウザ向けVRをThree.jsで実装する方法 - ICS MEDIA
2018年にOculus Go（オキュラス・ゴー）が発売されました。Oculus Goはパソコンやスマートフォンを必要とせず、単体でVR（バーチャルリアリティ、仮想現実）が楽しめるスタンドアロン型VR HMD（ヘッドマウントディスプレイ）です。価格も当時は23,800円からと比較的安価なため、日本でも購入者が増えこれまでと比べ一気にVR環境が広がりました。 VR環境の普及に伴い、ウェブコンテンツにおいてもVR対応へのニーズが増えています。ウェブブラウザにはWebXR Device APIが策定されており、これを使用することでブラウザでもVR体験が可能です。 ※以前はWebXR APIではなく、WebVR APIという仕様がありました。WebVR APIの策定はv1.1で停止しています。VR以外にもAR（拡張現実）やMR（複合現実）といったXR（◯◯現実）を総合的に扱うWebXR Devic
Three.jsでモデルデータを読み込む - ICS MEDIA
Three.jsでの読み込み方 Three.jsでモデルデータを読み込むには、JavaScriptでThree.jsの初期化を済ませたあとで、ローダーを使ってファイルを読み込み、3D空間に追加するという手順をとります。 データ形式ごとにローダークラスが用意されています。ただ、ローダークラスは、Three.jsライブラリの本体に含まれていないので注意が必要です。ローダークラスはscriptタグ等で取り込む必要があります。 GLTFファイルの場合 GLTF（ジーエルティーエフ）はインターネット向けの3Dファイル形式です。クロノスグループによって2017年に仕様として定められました。GLTFの中身はJSONファイルを中心として、そこから参照される画像やメッシュデータ等の関連ファイルで構成されています。 GLTFファイルのサンプルはクロノスグループのGitHubから取得できます。 今回は以下のファ
Three.Js で、「プレイエリアの外です」のアレを再現する - Qiita
この記事は、Three.js Advent Calendar 2016 5日目の記事です。 ほんの２ヶ月前・・2016年10月のことでしょうか。PSVRの登場とともに世間を賑わせた、「プレイエリアの外です」現象は。 一番有名になった画像については、「スカートの中を覗こうとした場合に、おぱんてぃの場所を防ぐように表示されている」あの警告でしょう。 実際に警告が表示される条件には、「プレイヤーを外から撮影している子機カメラの撮影範囲外になる」という事だそうですので、別にぱんつを覗く行為が禁止されている訳ではなかった、らしいのですが、画像のインパクトのお陰で広まったようです。 という予防線な駄文はどうでもいいですね。自分がやりたいのは、まさしくアレです。「パンツを覗こうとしたら、パンツの位置に警告が表示される」、それはそれは人類男子にとって何の役にも立たない機能です。 役に立たないことこそ全力。
three.jsと標高タイルで3Dマップを生成する - Calmery.me
今日はクリスマスイブですね．皆様いかがお過ごしでしょうか．かく言う私はお布団にくるまり http://qiita.com/advent-calendar/2016/no-girlfriend を眺めています．お察しください． ブラウザ上で現在位置を中心とした 3D マップを 国土地理院の標高タイル と three.js で作ることができたのでメモ．今月の 17，18 日に開催された 林業応援ハッカソン で作った． github.com 流れとしてはまず現在位置を取得し，その取得した現在位置からタイル座標を求める．ちなみに私は初めてタイル座標というものを知った．このタイル座標や後々利用するピクセル座標については TrailNote : 座標の変換（世界座標、ピクセル座標、タイル座標、緯度・経度） が参考になる．次に求めたタイル座標を元に 国土地理院の標高タイル から標高データを取得し thr
Three.jsのオフスクリーンレンダリングとping-pongで、リアルタイム動体除去を行う - 自習室
はじめに 前回に続き、ブラウザ内だけで画像処理的なことをしよう、というチャレンジです。今回は動体除去というか、モーションブラーというか、画像の時間平均処理をしてみます。 上の写真は、割と短時間の平均画像です。動いているものが透けているのがわかると思います。画像の平均処理をもっと長時間で行うと、ほぼ動体が見えなくなります。アルゴリズムはあとから説明します。 OpenCVをC++で使うと、普通にMatとかで前回のフレームを保存しておいたり差分を取ったりとお手軽に出来ますが、おなじことをJavaScriptでやろうとすると、必要な枚数画像を展開して、ピクセルを全走査するなど、かなりヘビーな感じになります。今回はブラウザ内で完結させてみるのが目的なので、WebGLのシェーダを使ってみます。 完成品 完成品はこちらで確認出来ます。ページを開いたら、カメラ利用に許可を与えて下さい。上部のバーで除去具合
SPAだけじゃない！ReactとThree.jsの組み合わせはゲーム開発を変える？
Reactといえば、SPA（シングルページアプリケーション）のViewに使われるライブラリー。でもThree.jsとWebGLを組み合わせると、3Dのゲーム開発にもメリットがあるようです。 「Charisma The Chameleon」というタイトルのゲームを開発しています。このゲームは、Three.js、ReactJSおよびWebGLを使って開発しています。本記事ではこれらの技術がreact-three-renderer（R3R）を使ってどのように動作するかを説明します。 ReactおよびWebGLの紹介については、SitePointの『A Beginner’s Guide to WebGL』や『Getting Started with React and JSX』をチェックしてください。本記事および添付のコードはES6 Syntaxを使用しています。 はじめに しばらく前にPete
GitHub - Izzimach/react-three-legacy: React bindings to create and control a 3D scene using 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ページを開く
Nebula
GitHub - spite/THREE.MeshLine: Mesh replacement for THREE.Line
GitHub - firtoz/react-three-renderer: Render into a three.js canvas using React.
