3Dデータ(Blender)をThree.jsで表示するまでの方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんにちは。 最近、懐かしのアニメを見ることにはまっています。ハルです。 今回は、「3D表現がしたい！」と思い、 こんな感じの3D表現を、Blender で作成したデータを簡単に書き出して Three.js で簡単に表示させる方法をまとめてみました。 今回の完成ファイルをGithubに公開しています。よろしければ参考にしてください。 完成ファイル：https://github.com/hal-satoyuki/sample3d 完成ページ：https://hal-satoyuki.github.io/sample3d/ それでは早速、作っていきましょう！ 今回の動作確認ブラウザについて 動作確認のブラウザには、Firefox を使います。GoogleChrome で確認すると、XMLHttpRequest のエラーが出てしまうためです。 また、手順については、MacPC での説明を
[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック
繊細で美しく、ダイナミックなアニメーションで画像を切り換えるスクリプトを使ったテクニックを紹介します。 2016年のインパクトのある成果物ベスト10には間違いなく入りますね。
![[JS]その美しさ、一度見たら絶対忘れない！スゴ技のアニメーションを使った画像切り換えのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b80cbe84952c5181c714203d0bc43c4fa7b61af/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052601.png)
たった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
初心者でも絶対わかる、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ページを開く
