シーン作成・公開方法を学べるチュートリアル

本記事では、シーンの作成・管理方法、STYLY Studioの基本操作方法、作成したシーンを公開するまでの手順を紹介します。
この記事を読めば、誰でも簡単にVR / AR空間を作成する方法が学べ、かつ全世界に自分の作ったVR / AR空間を公開できます。
さっそく自分だけのVR / AR空間を作って全世界に公開して、SNSを使って共有してみましょう。

STYLY Studio トップ画面

Sceneの新規作成と管理方法

Sceneの新規作成と管理方法を紹介します。SceneとはVR/AR空間のことを意味します。
MY SCENES画面では、Sceneの新規作成、名前の変更、コピー、削除ができます。
STYLY トップページやSTYLY GALLERYからSTYLY Studioを起動すると、初めにMY SCENES画面が開きます。
初めてSTYLY Studioを起動する方は、Sceneを新規作成する必要があります。

MY SCENES 画面 画面右上にCREATEボタン

では、Sceneを作成してみましょう。MY SCENES画面右上の[Create]ボタンをクリックしてください。
次に、VR Scene TemplateまたはAR Scene Templateを選択し、TitleフォームにScene名(Scene名は変更可能)を入力して、[Create]ボタンをクリックします。
すると、STYLY Studioが起動します。

シーン作成画面 画面下側にタイトル入力 

STYLY Studio内のシーンマネージャーについて

STYLY Studio内でもシーンの管理や新規作成ができます。
後述するメニュータブからScenesタブを選ぶことでシーンマネージャを起動できます。

シーンマネージャー画面 詳細説明


シーンマネージャー画面 シーン作成

シーンマネージャ画面 メニュー説明

メニュータブ Scenesタブ/Create Sceneタブがあります。Sceneタブを選択すると、公開/非公開の確認、Scene名の確認・編集、Sceneの削除・コピーができます。Create Sceneタブを選択すると、Sceneの新規作成ができます。
サムネイル Sceneのサムネイル画像が確認できます。
公開/非公開 Sceneの公開状態が確認できます。Draftだと非公開、Publicだと公開されていることを意味します。
Scene名 Scene名を確認できます。
エディットボタン Scene名変更ボタン・コピーボタン・削除ボタンの表示/非表示の切り替えができます。
Scene名変更ボタン Scene名を変更ができます。
コピーボタン Sceneのコピーができます。
削除ボタン Sceneの削除ができます。一度削除すると、復元できないため注意してください。
閉じるボタン STYLY Studioに戻ります。Sceneが1つも作成されていない場合は、使用できません。
戻るボタン STYLY Studioホーム画面に移動します。

STYLY Studio使用方法

STYLY Studioの使い方を紹介します。
作業視点の変更方法、STYLY Studio画面の説明、アセットの挿入方法、アセットの操作方法を説明します。

作業視点のズーム・移動・回転

STYLY Studio画面上の作業視点の変更方法を紹介します。

作業視点のズームイン・ズームアウト

Zoom in / out

作業視点をマウス操作(トラックパッド)でズームイン・ズームアウトができます。

操作方法 Windows/Mac共通

使用デバイス 操作方法
マウス マウスホイール
トラックパッド ピンチ
2本指縦スワイプ
(トラックパッド設定による)

作業視点の平行移動

Move

作業視点を上下左右に平行移動ができます。

操作方法 Windows/Mac共通

使用デバイス 操作方法
マウス/トラックパッド共通 右クリック+WASDQE
W:前、A:左、S:後、D:右、Q:下、E:上
※Shiftキーを同時に押すと視点移動の速度が上がります

矢印キー
↑:上、↓:下、←:左、→:右
※Shiftキー同時に押すと視点移動の速度が上がります

マウスのみ ホイールボタン
中央クリック+マウス移動

作業視点の公転

Orbit

作業視点をマウス操作(トラックパッド)で公転ができます。Your Positionを中心に公転します。

操作方法 Windows/Mac共通

使用デバイス 操作方法
マウス 左クリック + マウス移動
トラックパッド 左クリック + ドラッグ

作業視点の自転

Rotate

作業視点をマウス操作(トラックパッド)で自転ができます。

操作方法 Windows/Mac共通

使用デバイス 操作方法
マウス 右クリック + マウス移動
トラックパッド 右クリック + ドラッグ

Your Positionとは

Your PositionとはVR/AR空間を体験時に、最初の視点となる位置です。
STYLY VR APPでHMDを装着して見える視点となります。
また、Your Positionは移動可能です。

STYLY Studio画面 Your Position

STYLY Studio画面の説明

STYLY Studioの画面一覧について紹介します。
大きく分けて4つのメニューがあります。
4つのメニューについて詳しく紹介します。

STYLY Studio画面 メニュー説明

トップボタン

STYLY Studio画面 トップボタン

メニュー説明

Scenesボタン シーンマネージャー画面を開きます。
Assetsボタン Sceneに挿入するアセットを選択するための画面を開きます。
アセットは3Dモデル、画像、音楽、動画などがあります。
Helpボタン Scene編集時に役立つショートカットキーなどの情報を表示できます。
Play Modeボタン Play Modeを起動します。
Publishボタン Sceneを公開するためのPublish画面を開きます。

ヒエラルキーメニュー

ヒエラルキーメニューとは、アセットと呼ばれるライト、Skybox(天球)、3Dモデルなどを管理するメニューです。
新規作成したSceneでは、下記の5つのアセットがデフォルト挿入されています。
デフォルトで挿入されているアセットについて説明します。

STYLY Studio画面 ヒエラルキーメニュー

Directional Lightとは太陽のように空間全体を照らす光源です。

[Ground] Defaultとは床・地面です。

[Skybox] Defaultとは全画面を覆う天球です。

Your PositionとはVR/AR空間を体験時に、最初の視点となる位置です。
STYLY VR APPでHMDを装着して見える視点となります。
また、Your Positionは移動可能です。

Transparent FloorとはVRでのワープ移動のためなどに必要なものです。

メニュー説明

トップバー ヒエラルキーメニューの表示/非表示の切り替えができます。
画像アイコン Scene上のアセット表示/非表示の切り替えができます。
コピーボタン アセットのコピーができます。
削除ボタン アセットの削除ができます。

 機能説明

作業視点をアセットにフォーカス ヒエラルキーメニューにあるアセットをダブルクリックすると、Scene上のアセットに作業視点をフォーカスします。
ドラッグ&ドロップでSceneにコピー ヒエラルキーメニューからアセットをSceneにドラッグ&ドロップするとコピーができます。

シーンギズモ

シーンギズモはカメラが現在向かっている方角を示しています。
また赤・緑・青のコーンをクリックすることで、それらの方角を前方とする角度にカメラの視点を素早く切り替えられます。

STYLY Studio画面 シーンギズモ

シーンギズモの下に「Persp」と表示されていますが、これはシーンを透視図法で表示していることを表しています。
「Persp」をクリックすると「Iso」に切り替えられ、シーンを並行投影で表示します。
元に戻したい場合は「Iso」をクリックすることで「Persp」に切り替えられます。

Persp / Iso

透視投影では同じ大きさの物体でも視点から遠い物体は小さく、視点から近い物体は大きく描かれます。
それに対して、並行投影では同じ大きさの物体は視点からの距離によらず同じ大きさに描かれます。

サイドボタン

STYLY Studio画面 サイドボタン

メニュー説明

globalボタン
※ヒエラルキーメニューでアセットを選択している場合のみ表示

globalボタンは選択しているアセットの回転と拡大・縮小を行う際の基準となる軸を変更します。
Onの時は、シーン全体の方角を基準として回転及び拡大・縮小の操作が行われます。
Offの時は、選択しているアセットの向かっている方角を軸とした回転及び拡大・縮小の操作が行われます。

move/rotate/scaleボタン
※ヒエラルキーメニューでアセットを選択している場合のみ表示
アセット操作(移動、回転、拡大縮小)の切り替えができます。
reset positionボタン カメラ視点をYour Positionに戻します。

アセットの挿入

Sceneにアセットを挿入して、自分だけのオリジナルSceneを作成してみましょう。
この章では、アセットの種類の紹介とアセットの操作方法を説明します。
では簡単な手順に沿ってSceneを作成していきたいと思います。

アセットの種類

トップボタンのAssetsボタンをクリックすると、アセットリストが表示されます。
アセットリストには、Environment、3D Model、Image、Music、Video、Lab、Curated
があります。

アセットリスト画面

メニュー説明

Environment Skybox(天球)やFloor(地面)や光源やフィルターを選べます。
3D Model 3Dオブジェクトを選べます。Google Polyの3Dオブジェクト、パーティクル、自分でアップロードした3Dモデルなどがあります。
Image 画像の挿入ができます。画像を貼り付けるスクリーンの種類を複数用意してあります。画像に動きをつけることもできます。360度画像、PNG、JPEG、GIF対応。
Music 音楽の挿入ができます。MP3、SoundCloud対応。
Video 動画の挿入ができます。YOUTUBE対応。
Lab Labのアセットは、プロパティ(カラーや範囲)のパラメータをユーザーが自由に設定して、好きなアセットにアレンジして使えます。
Curated Curatedでは、STYLY Studioが用いられるイベントの開催期間限定で使うことができる特別なアセットを挿入することができます。このアセットを使って作品を制作する場合は、該当のイベントでそのアセットの使用についてのルールを確認してから使うようにしてください。

アセットの挿入

アセットの挿入方法を紹介します。
アセットリストからアセット選んでSceneに挿入してみましょう。
今回は、Skybox(天球)、Ground(地面)、3DオブジェクトのアセットをSceneに挿入して、簡単なSceneを作成しましょう。

Skybox(天球)を変更する

Skybox(天球)の変更方法を紹介します。
Assetsボタンをクリックする。

STYLY Studio画面 Assetsボタンをクリック

Environmentをクリックする。

アセットリスト画面 Enviromentをクリック

Skyboxをクリックする。
Skyboxでは天球(Skybox)アセットをSceneに挿入できます。

アセットリスト画面 Skyboxをクリック

好きな[Skybox]を選択し、クリックする。

アセットリスト画面 [Skybox]~をクリック

Skyboxが切り替わりました。
1つのSceneに1つのSkyboxが適用されますので、デフォルトで設定されていたSkyboxと入れ替わりました。
Skyboxの変更だけで世界観が大きく変化しますので、色んなSkyboxを試してみてください。

STYLY Studio画面 Skybox変更後

Ground(地面)を変更する

次は、SceneにGround(地面)を挿入してみましょう。
デフォルトで挿入されている地面を削除します。
ヒエラルキーメニューの[Ground]DefaultGroundを削除(ゴミ箱ボタンをクリック)します。

STYLY Studio画面 [Ground]DefaultGroundを削除

Assetsボタンをクリックする。

STYLY Studio画面 Assetsボタンをクリック

Environmentをクリックする。

アセットリスト画面 Environmentをクリック

Floorをクリックする。

アセットリスト画面 Floor をクリック

下にスクロールすると、[Ground]~というアセットが表示されます。
好きな[Ground]を選択し、クリックする。

アセットリスト画面 [Grounds]~をクリック

Groundが挿入されました。
空と地面を作り出せました。
ここに3Dオブジェクトを挿入していきましょう。

STYLY Studio画面 Ground挿入後

3DオブジェクトをSceneに挿入する

3DオブジェクトをSceneに挿入しましょう。
今回は、Google Polyから3Dオブジェクトを挿入します。
始めに、Assetsボタンをクリックする。

STYLY Studio画面 Assetsボタンをクリック

3D Modelをクリックする。

アセットリスト画面 3D Modelボタンをクリック

Polyは、Google Polyの3Dオブジェクトを検索しSceneに挿入できます。
カテゴリボタンでカテゴリを絞ることもできます。
また検索フォームには、名前またはURLを入力して、検索ができてPolyの検索結果画面は、更新されます。

アセットリスト画面 Poly ボタンをクリック

好きな3Dオブジェクトを検索して、Sceneに挿入しましょう。
今回は検索フォームに「animal」と入力して、検索してみます。

アセットリスト画面 検索フォームに検索ワードを入力して、Searchボタンをクリック

そうすると、動物の3Dオブジェクトが検索結果ページに表示されます。
Lionをクリックします。

STYLY Studio画面 3Dオブジェクト挿入後

選択したアセットがSceneに挿入されました。
しかし、地面にLionのアセットがめり込んでいるので、アセットを操作して、自分の好きな位置に移動・回転させて、好きな大きさに変更してみましょう。
次はアセットの操作方法(移動・回転・拡大縮小)を紹介します。

アセットの操作方法(移動・回転・拡大縮小)

Lionのアセット使用して、アセットの操作方法(移動・回転・拡大縮小)を紹介します。
操作したいアセットを選択します。
選択されたアセットは黄色になります。
アセットの選択方法はヒエラルキーメニューにあるアセットをクリックするか、Scene上のアセットをクリックします。

STYLY Studio画面 3Dオブジェクト操作方法

アセットを選択すると、アセットにマニピュレーターが表示されます。
マニピュレーターとは、赤・緑・青の3方向の矢印のことです。

STYLY Studio画面 マニピュレーター

サイドメニューのmove/rotate/scaleボタンから、移動・回転・拡大縮小を切り替えられます。
または、下記ショートカットキーを使用して切り替えることもできます。

  • [W]キー:移動
  • [E]キー:回転
  • [R]キー:拡大縮小

STYLY Studio画面 操作方法の切り替え

移動

移動モードに切り替えて、マニピュレーターをドラッグすれば、アセットを移動できます。
また、
Ctrlを押しながら移動させることで、1単位ずつ移動させることや、Ctrl + Zキーでアセットをひとつ前の状態に戻すことができます。

STYLY Studio画面 移動

 

Ctrlを押しながら移動することで、アセットを1単位ずつ移動させる


Ctrl + Zキーでアセットの移動の取り消し

回転

回転モードに切り替えて、マニピュレーターをドラッグすれば、アセットを回転できます。

STYLY Studio画面 回転

拡大縮小

拡大縮小モードに切り替えて、マニピュレーターをドラッグすれば拡大縮小できます。

STYLY Studio画面 拡大縮小

直接数値入力して操作する方法

マニピュレーターの数値部分をクリックすると、直接数値を編集できるようになります。
数値入力後、[Enter]キーをクリックすると完了します。
移動・回転・拡大縮小モードすべてに対応しています。
操作を戻したい場合は、[Ctrl]キー+[Z]キーをクリックすると操作を戻せます。

STYLY Studio画面 マニピュレーター数値入力

便利なショートカットキー一覧

HELPボタン

上記の操作方法に加えて、以下ではSTYLY Studioで使える便利なショートカットキー一覧をご紹介します。

アセット操作
  • [W]キー:アセットの操作方法を移動モードに切り替え(アセット選択状態時)
  • [E]キー:アセットの操作方法を回転モードに切り替え(アセット選択状態時)
  • [R]キー:アセットの操作方法を拡大縮小モードに切り替え(アセット選択状態時)
  • [Ctrl]キー + 移動操作:1単位で移動(アセット選択状態時)
  • [Ctrl]キー + 回転操作:15度単位で回転(アセット選択状態時)
  • [Ctrl]キー + 拡大縮小操作:1単位で拡大縮小(アセット選択状態時)
  • [Ctrl]キー + [Z]キー:ひとつ前の操作に戻る
視点操作
  • [F]キー:対象アセットに視点フォーカス(アセット選択状態時)
ヒエラルキーメニュー操作
  • [Shift] キー+ [D]キー:アセットのコピー(アセット選択状態時)
  • [Del]キー:アセットの削除(アセット選択状態時)
  • アセット選択 + ダブルクリック:対象アセットに視点フォーカス

作成したSceneの公開・共有方法

Sceneの公開方法

作成したSceneを公開する方法を紹介します。
Publishボタンをクリックすると、Publish画面に移動します。
Sceneを公開するときのサムネイル画像として、Publishボタン押したときの作業視点がサムネイル画像となります。

STYLY Studio画面 Publishボタンをクリック

タイトル名(Title)と説明文(Description)を入力して、タグ(Tags)を設定して、Publishボタンをクリックする。
入力フォームは英語(半角英数字)のみ入力可能です。

Publish画面

Open in Galleryをクリックします。
STYLY GALLERYサイトに自分の作成したSceneが公開されます。

Publish画面 Publishボタンクリック後

Publish画面 Publishボタンクリック後

ギャラリーサイトに自分の作ったSceneが公開されました。
これで色んな人にSceneを見てもらえるようになりました。
次は、Sceneの共有方法を紹介します。

STYLY GALLERYサイト MySceneページ

Sceneの共有方法

SNSでの共有方法

SceneをSNSで共有する方法を紹介します。
Twitterで共有したい方は、Twitterアイコンをクリックしてツイートします。
Facebookで共有したい方は、Facebookアイコンをクリックして投稿します。

STYLY GALLERYサイト 共有方法

STYLYマーカーを作成する

公開したSceneをSTYLY GALLERYで開きます。
(パブリッシュ時にURLが表示されるのでそれをクリックするか、STYLY GALLERYのマイページから自分がパブリッシュしたSceneを探すこともできます)

Mobileアイコン

MobileアイコンをクリックすることでSTYLYマーカーを表示することができます。
表示されたSTYLYマーカーをSTYLY Mobileで読み込むと、Sceneを体験できます。

STYLY Mobile App Marker

ポップアップの右上のダウンロードボタンを押すことで、STYLYマーカー(PNG画像データ)をダウンロードできます。
また、右上のシェアボタンを押すと、STYLY Mobileを直接起動できるURLを発行できます。

Sceneの体験方法

Sceneでは次の3通りの体験方法があります。

  • VR(HMDを持っている方のみ)
  • Web Player
  • STYLY Mobile

詳しい説明は以下の記事をご参照ください。

また、STYLY MobileのVRシーンでの操作方法については、以下の記事を参照ください。