パノラマ背景をWebGL/Three.jsで実装したWebサイトのデモを作ってみました。

パノラマ背景をWebGL/Three.jsで実装したWebサイトのデモを作ってみました。

こんにちは。Webloco代表/Webディレクターのヤブです。

新型コロナの影響で、平日も休日もほぼ1日中家にいます。そんな中、せっかくできた時間を有効活用しようと思い、久しぶりにWebGL/Three.jsを使って、Webサイトを作ってみようと思いました。

なお、半年くらい前にも「WebGL(three.js)を使った3Dの世界に足を踏み入れて感じた事」という記事を書いておりますので、興味のある方はご覧ください。

 

パノラマ背景をWebGL/Three.jsで実装したWebサイトのデモ

まず、さっそく今回作成したデモサイトをご覧ください。

パノラマ背景Webサイトのデモ

パノラマビューアーのデモ

 

なお、これまでに作成した3Dコンテンツの制作例は以下からご覧いただけます。

すべての3Dコンテンツの制作事例

 

現地に行かなくても、リアルな疑似体験を得られるニーズが高まっている

新型コロナの影響で、出来るだけ人と会わない様にしたり、人と一定の距離を取る「ソーシャルディスタンス」の概念が生まれ、「オンラインビデオ会議」などの需要が急速に高まっています。

コロナが収束したとしても、何割かは、この考えが根付くと思いますので、デジタル技術を使って、現地に行かなくても、リアルな疑似体験を得られるニーズは今後も高まっていくと考えられます。

 

VRゴーグルの普及やコンテンツの提供がどれくらい進むか?

現時点で、自宅でバーチャルの体験をするには、VRゴーグルなどが必要で、用途もまだ限られている為、SF映画「レディープレイヤー1」の様な世界になるのは、まだ先の様な感じがします。

今では、スマホに取り付けるだけで、簡易的なVRゴーグルにする「ヘッドマウントディスプレ」が安価で売られている為、端末を手に入れるハードルは下がっています。

ただ、エンドユーザー側の準備は整っても、コンテンツの供給が追い付かないと、全体的に普及するには至りません。

VRの一番のハードルは、コンテンツ制作(供給)のコストの高さなので、ここに革新的な変化が起きないと、本当の意味での普及は難しいと思います。

 

Webでの3DやVRの使いどころ

私が3D経験が浅いせいか、3Dコンテンツを取り入れたWebコンテンツを作ろうとすると、2Dのみに比べて、遥かにコストが高くなります。

その為、2Dと3Dの使いどころを上手く考え、目的、用途に合わせて、ハイブリッドなコンテンツを作成する事で、コストとパフォーマンスのバランスを取る事が可能になります。

今回制作したデモは、多くの部分は、通常のWebサイトと同じように2D(テキストや写真)コンテンツとして、背景だけを3D空間のパノラマ背景にしており、全てを3Dで実装するより、かなり手間は抑えれたと思います。

 

今後のユーザー行動の変化に注視する

これまで、新しい技術、新しい商品、サービスの登場など、外部環境の変化によって、ユーザー行動は変わってきました。

今回は「新型コロナ」という外部環境によって、ユーザー行動が変わってきています。

Webサイト(Webコンテンツ)も、このユーザー行動の変化に合わせて、柔軟に対応していく必要があり、私もその為に、日々技術を磨くとともに、ユーザー行動の変化に注視していきたいと思います。

 

以上「パノラマ背景をWebGL/Three.jsで実装したWebサイトのデモを作ってみました。」をご紹介しました。

 

WordPressやWebサイトの制作・ご相談

Weblocoでは、WordPressを使ったWebサイト制作に強みを持っています。

3Dコンテンツを取り入れたWebサイトなど、お客様のご要望に柔軟に対応可能です。お気軽にご相談ください。

Weblocoホームページの詳細

Webマーケターが制作するユーザー目線のホームページ作成のバナー
Webマーケターが制作するユーザー目線のホームページ作成のバナー