Three.jsの勉強の仕方 - Qiita
概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
Three JS:CardboardEffect.jsを使ってVRコンテンツを作ってみた
人気WebGLライブラリのThree JSですが、バージョンアップ頻度が非常に早く2016年2月現在でr74となっております。r74では所々仕様が変わっており、新しいモジュールも増えています。色々と探っていたらeffectsフォルダにCardboardEffect.jsなるものを発見!!今回はこのCardboardEffect.jsを使って簡易的なVRコンテンツを作ってみようと思います。 今まではThree JSでのVRと言ったら、VREffect.jsやStereoEffect.jsがThree JSに付属されていました。しかしVREffect.jsはOculus RiftなどのHMD(ヘッドマウントディスプレイ)用のトラッキングデータを取得する本格的なものですし、StereoEffect.jsはVRに最適化されていませんでした。CardboardEffect.jsに関しては詳しいことは
ゲームエンジンとしてのenchant.jsと3D表現としてのthree.jsのシンプルな組み合わせ | KnockKnock
前回の記事で作成したenchant.jsのゲームロジックを元に、three.jsで3D表現を行いました。 three.js three.jsはWebGLをサポートしたJavaScriptの3D描画ライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められていて、WebGLの3Dライブラリとしての実績も多く、現状ではデファクトスタンダードとなっています。この記事の寄稿時ではリビジョンはr64でした。 three.jsを使って3D表現を行う事は、ダウンロードしたパッケージに格納されているサンプルコードや、多くのthree.js関連のブログ記事を見ればいくらでも学習する事ができます。ただ、せっかくの3D表現なのでゲーム性を持たせたいと考えました。本格的な3Dゲームとなると三次元での物理演算等を行わなくてはなりません。もっと気軽に3D表現で楽しむことは出来ないかと思い、ゲームロジックは
three.jsを利用したVR体験の実現 ② カメラを回転とCardboard対応 | Tech Blog - リクルート住まいカンパニー
こんにちは、スマートデバイス戦略開発グループの katayama です。 前回は、「three.jsを利用したVR体験の実現 ① 全天球を表示してみる」で、RICHO THETAこんにちは、スマートデバイス戦略開発グループの katayama です。 前回は、「 three.jsを利用したVR体験の実現 ① 全天球を表示してみる 」で、 RICHO THETA S などの360°カメラで撮影した全天球の画像を表示させ、自動で回転するところまでお話しました。 今回はその続きで、デバイスの向きに合わせてカメラを回転させる処理と、 Oculus Rift / Cardboard のように2眼の効果をつける処理についてお話します。 具体的には左図の様なものが、右図のように2眼になるイメージです！ デバイスの回転の取得方法 スマホには様々なセンサーが搭載されており、デバイスがどちらの方向を向いて
スマホの傾きセンサーを使ったWebGLモック | TENPURA - 1→10design Lab -
ID部の河合です。 iOS8からSafariでWebGLが動くようになったことで いろいろ面白いことになってきそうです。 弊社でもモックを作ってみました。 three.jsで読み込んだ３Dの世界をスマホでぐるぐる見れます。 リンク ※iOS8以上でのみ動作確認済 スマホとWebGLとを絡めたときの魅力としては、 やはり傾きセンサが使えること、がひとつあると思います。 スマホの傾きに３D空間のカメラをシンクロさせることが 簡単にできるので、デスクトップPCだとできなかったような体験を すぐに作ることができます。 If that. I and much light will thick like viagra kaufen a of. Using traditional, years ALL. So have my http://viagracoupons-onlinerx.com/ i sa
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
renderer.setClearColorHex() is not a function · Issue #13 · josdirksen/learning-threejs