360°画像/動画/WebGL・3Dコンテンツ（さわりだけ）
ECサイトでも見かける360°画像
ECサイト等でも、商品をマウスで動かせる画像を見かける機会が増えてきました。画像をマウスでドラッグすると画面のなかで向きを変えたりできるやつです。
他サイト参照になりますが、物だとこんな感じ。（トヨタさまサイト）
風景だとこんな感じ。（アマナイメージさまサイト）
スマホの角度まで検知して(ジャイロセンサー)、スマホを上に向けたり右を見て、左をみて、とすると画面内もそちらを向いているように角度が変わるようなやつもありますよね。風景や不動産物件などを見るのに適しています。VRゴーグルがあるとより楽しめる感じのやつです。
（わたしはあれでフィギュアスケートを見れたらいいのにと願ってやみません。TVだと選手を追って撮るのでスピード感を実感できないし、会場まで見に行くと審査員くらいの特等席でない限り選手が遠すぎて、やはりスピード感やジャンプの高さを実感できないので。）
マウスで自分で動かすのと、スマホを傾けたらあちら側の世界の見え方の角度も変わるのは、ジャイロセンサーの有無で違うだけで根本的には同じ技術のようです。個人の方のサイトですが、こちらとか大変に参考になります。iframeだと角度の検知まではできないのでリンク先（↑この記事の「完成ページ」）ぜひご覧ください。
「Three.jsを使い360度画像をドラッグとジャイロセンサーで視点操作する。」へのリンク
本サイトにて提供している「切り抜き職人」サービスではECサイトのお客様が多く、お客様の視野にあるのは商品をマウスで動かしてお客さんが好きな角度で見れるものだと思いますので、カメラが中心にあって周囲を見る感じの＝360°画像は別ものなのかなと思いつつ、まずは概要を調べていきたいと思います。
360°の 種類、キーワード
「360°画像」と表現してますが、まだまだ枯れてないせいかいろいろな言い方を見かけます。PC・スマホが新しいものでないと最新のブラウザを入れられず、見れない人がそこそこいるような状況だと、作る側が試したくても試せなかったり、それが情報の少なさにつながったりします。今はまだ「VR」と入っていたり「パノラマ」と入っていたり。これからもいろんな言い方が出てきて、そのうち決まった表現に落ちついていくのだと思います。いろんな言い方があって、調べていて「これは私が思ってる360°画像のことだろうか、、、」と不安になりながら調べていますが、今のところ分類としてはざっくり以下かなと思います。
- 360°画像（風景・画像）
- 360°動画（風景・動画）
- WebGLによる3D表現（物・画像、マウスで動かして視点を制御できる）
360°動画はこちらの↓リンク先の海の中のような感じです。動画を再生をスタートさせたうえで、マウスで動かしたりしてみてください。
amanaimages 360°VR素材のページの360°動画の箇所
カメラを中心としてその周囲を撮るのか、物の周りを撮るのか、画像か動画か、ジャイロセンサーの有/無、等で制作過程はだいぶ違ってきそうです。
360°画像の作り方
ざっくり言うのって、本当はある程度知識がある分野に対してでないとできないのに、360°画像について調べだしたばかりの浅い知識でざっくり言います。（だれかレクチャーしてほしいです。。。でもレクチャーできるくらいの方たちはすでにこれをビジネスにしているみたいで機材やソフトの宣伝込みのサイトや、肝心の箇所は「だからうちにお任せください」的なサービスの宣伝ページばかり出てきてしまいます。情弱としては、早く技術的に枯れて初心者向けの記事が増えてきてほしいです）
撮影
撮影は普通のカメラで充分重なるように何枚も撮影してあとで加工する方法もあるし、最初から360°（全天球）で撮影できる機材を使う方法と、あるようです。
参考にしたのはこちら⇒Adobe社のPhotoshopマニュアル「パノラマ画像の作成(Photoshop)」のリンク
加工
上記のPhotoshopマニュアルに記載されているとおりPhotoshopの機能で作成することもできるし、専用のソフトも検索するとたくさん出てきます。360°画像について検索するとソフトを出している企業のサイトも多く、特別なソフトがないとできないのかなと不安になりますが、Photoshopでもできるはず。
Webへの組み込み
これもいろいろなソフトが出ているようですが、Google VR View（js）というのが一番有名なようです。
Google VR view for the web
three.jsというのもちょいちょい見かけます。本記事最初の章で紹介した個人の方は風景で使っているし、こちら↓の記事を見ると、WebGLで物を視点操作するものとしても紹介しています。
やってみた
っていう記事を書きたかったんですが、やってみるところまでたどり着かなかったです（涙）
今回の記事の趣旨として、ECサイトのお客様の視野ということで調べているので、自分の周囲を撮るのではなく物を中心に撮ったもの（WebGLによる3D表現、という言い方で良いのだろうか）について調べたかったのですが、まだキーワードにたどり着けていないみたいで、カメラを中心にその周りの風景を撮るような情報しか探せませんでした。
three.jsのチュートリアルを書いてくれてる方がいらっしゃるので、こちらの入門編で「カメラの制御方法」までいけたらできるのかもしれません。まだ挑戦できてないのでリベンジしたいと思います。
three.js入門編
他サイトに頼りまくりな本記事ですが、そのぶん、手作りしてたら1記事でここまでできなかったというくらい、いろんな事例をリンクできたと思うので、ぜひこの記事をPCでみたり、スマホで見たりして、それぞれの事例の操作感の違いを試して、楽しんでください！楽しいから、私もできるようになりたい。
これを書いているのが2019/10/11金で、明日首都圏も超大型台風が直撃してくるようなので、リベンジは、無事だったら、です。台風怖いですね・・・！！
