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

WebEditor トップ画面

本記事では、Sceneの作成・管理方法、WebEditorの基本操作方法、作成したSceneを公開するまでの手順を紹介します。

この記事を読めば、誰でも簡単にVR空間を作成する方法が学べ、かつ全世界に自分の作ったVR空間を公開できます。さっそく自分だけのVR空間を作って全世界に公開して、SNSを使って共有してみましょう。

Sceneの新規作成と管理方法

シーンマネージャー画面 Create Scene

Sceneの新規作成と管理方法を紹介します。SceneとはVR空間のことを意味します。シーンマネージャー画面では、Sceneの新規作成、名前の変更、コピー、削除ができます。WebEditorホーム画面よりWebEditorを起動すると、始めにシーンマネージャー画面が開きます。初めてWebEditorを起動した方は、Sceneを新規作成する必要があります。では、Sceneを作成してみましょう。TitleフォームにScene名(Scene名は変更可能)を入力して、[Create]ボタンをクリックします。すると、WebEditorが起動します。

このままSceneの作成方法を知りたい方はWebEditor 使用方法をご覧ください。

シーンマネージャー画面についての詳細説明

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

シーンマネージャー画面についての詳細な説明をします。Sceneを新規作成(Create)した方は、先に進んでかまいません。メニュータブでScenesタブを選んでください。

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

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

WebEditor 使用方法

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

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

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

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

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

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

操作方法

Window/Mac共通

使用デバイス操作方法
マウススクロールホイールをスクロールする。
トラックパット二本指で上下にスクロールする。

作業視点の平行移動

WebEditor画面 作業視点の平行移動

作業視点をマウス操作(トラックパット)で上下左右に平行移動ができます。

操作方法

Window/Mac共通

使用デバイス操作方法
マウススクロールホイールを押しながら、マウスを移動する。
または、マウス右ボタンを押し込みながら、マウスを移動する。
トラックパット右クリックを押しながら、移動操作を行う。

作業視点の回転

WebEditor画面 作業視点の回転

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

操作方法

Windows

使用デバイス操作方法
マウスマウス左ボタンを押しながら、マウスを移動する。
トラックパット左クリックを押しながら、移動操作をする。

Mac

使用デバイス操作方法
マウス
マウス左ボタンを押しながら、マウスを移動する。
トラックパット左クリックを押しながら、移動操作をする。

Start Positionとは

WebEditor画面 Start Position

Start PositionとはVR空間を体験時に、最初の視点となる位置です。

WebEditor画面の説明

WebEditor画面 メニュー説明

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

トップボタン

WebEditor画面 トップボタン

メニュー説明

Scenesボタンシーンマネージャー画面を開きます。
AssetsボタンSceneに挿入するアセットを選択するための画面を開きます。
アセットは3Dオブジェクト、画像、インスタグラム、音楽、動画、PDF(書籍化)があります。
PublishボタンSceneを公開するためのPubish画面を開きます。

ヒエラルキーメニュー

WebEditor画面 ヒエラルキーメニュー

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

デフォルトで挿入されているアセットについて説明します。Direcrional Lightとは太陽のように空間全体を照らす光源です。[Ground] DefaultGroundとは床・地面です。[Skybox] Defaultとは全画面を覆う天球です。

メニュー説明

トップバーヒエラルキーメニューの表示/非表示の切り替えができます。
画像アイコンScene上のアセット表示/非表示の切り替えができます。
アセット名アセット名上にカーソルを合わせて、クリックすると名前編集ができます。編集後、[Enter]キーをクリックすると編集完了になります。
コピーボタン
アセットのコピーができます。
削除ボタンアセットの削除ができます。

機能説明

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

シーンギズモ

WebEditor画面 シーンギズモ

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

サイドボタン

WebEditor画面 サイドボタン

メニュー説明

globalボタン
※ヒエラルキーメニューでアセットを選択している場合のみ表示
globalボタンは選択しているアセットの回転や拡大・縮小を行う際の基準となる軸を変更します。Onの時は、シーン全体の方角を基準として回転及び拡大・縮小の操作が行われます。Offの時は、選択しているアセットの向かっている方角を軸とした回転及び拡大・縮小の操作が行われます。
move/rotate/scaleボタン
※ヒエラルキーメニューでアセットを選択している場合のみ表示
アセット操作(移動、回転、拡大縮小)の切り替えができます。移動・回転・拡大縮小の操作方法はアセットの操作方法(移動・回転・拡大縮小)へ
reset positionボタンカメラ視点をStart Positionに戻します。
shortcutボタンエディタ操作のショートキー一覧を表示できます。ショートカットキー一覧ページはこちら

アセットの挿入

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

アセットの種類

アセットリスト画面

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

メニュー説明

3D Model3Dオブジェクトを選べます。Google Polyの3Dオブジェクト、DirectionalLight(光源)、Skybox(天球)、エフェクト、フィルター、自分でアップロードした3Dオブジェクトがなどがあります。
Image画像の挿入ができます。画像を貼り付けるスクリーンの種類を複数用意してあります。画像に動きをつけることもできます。360度画像、PNG、JPEG対応。
InstagramInstagram写真の挿入ができます。アカウント連携すると、連携したアカウントから写真を取得し、画像にアニメーションが付き表示されます。
Music音楽の挿入ができます。MP3、Soundcloud対応。
Video動画の挿入ができます。YOUTUBE対応。
PDFPDFファイルの挿入ができます。PDFファイルを挿入することで、VR空間で本を読むようにPDFを閲覧できます。

アセットの挿入

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

Skybox(天球)を変更する

WebEditor画面 Assetsボタンをクリック

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

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

3D Modelをクリックする。

アセットリスト画面 Sky and Groundsをクリック

Sky and Groundsをクリックする。Sky and Groundsでは光源(DirectionalLight)、天球(Skybox)、地面(Ground)アセットをSceneに挿入できます。

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

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

WebEditor画面 Skybox変更後

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

Ground(地面)を挿入する

WebEditor画面 [Ground]DefalutGroundを削除

次は、SceneにGround(地面)を挿入してみましょう。

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

WebEditor画面 Assetsボタンをクリック

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

アセットリスト画面 3D Modelsをクリック

3D Modelをクリックする。

アセットリスト画面 Sky and Grounds をクリック

Sky and Groundsをクリックする。

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

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

WebEditor画面 Grounds挿入後

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

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

WebEditor画面 Assetsボタンをクリック

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

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

3D Modelをクリックする。

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

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

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

好きな3Dオブジェクトを検索して、Sceneに挿入しましょう。今回は検索フォームに「animal」と入力して、検索してみます。そうすると、動物の3Dオブジェクトが検索結果ページに表示されます。Elephantをクリックします。

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

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

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

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

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

WebEditor画面 マニピュレーター

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

WebEditor画面 操作方法の切り替え

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

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

移動

WebEditor画面 移動

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

回転

WebEditor画面 回転

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

拡大縮小

WebEditor画面 拡大縮小

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

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

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

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

操作を戻したい場合は、[Ctrl]キー+[Z]キーをクリックすると操作を戻せます。

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

STYLY GALLERYサイト

作成したSceneを公開して、SNSで共有してみましょう。作成したSceneの公開方法、WEBでのScene閲覧方法、ヘッドマウントディスプレイでのSceneの超体験方法を紹介します。

Sceneの公開方法

WebEditor画面 Publishボタンをクリック

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

Publish画面

タイトル名(Title)と説明分(Description)を入力して、Publishボタンをクリックする。入力フォームは英語(半角英数字)のみ入力可能です。またコピー&ペーストができませんので、ご注意ください。

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

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

STYLY GALLERYサイト MySceneページ

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

3.2. Sceneの体験方法

HMDを持っている方は超体験ができます。HDMを持っていない方でもWEB上でSceneを見れます。それではSceneの体験方法をご紹介します。

HMDでSceneを超体験する

STYLY GALLERYサイト VRアイコンをクリック

HMDを持っている方は、VRアイコンをクリックすると、HMD内でSceneを超体験できます。VR VIEWERをダウンロードしていない方は、別途ダウンロードが必要になります。VR VIEWERのダウンロード方法および使い方はこちらに記載してあります。

WEB上でSceneを体験する

STYLY GALLERYサイト WebGL Viewアイコンをクリック

WEBブラウザでSceneを体験したい方は、WebGL Viewアイコンをクリックします。

STYLY GALLERYサイト WebGL Viewモード

サムネイル画像が切り替わり、WebEditorと同じようにScene内を見渡せます。

Sceneの共有方法

STYLY GALLERYサイト 共有方法

最後にSceneの共有方法を紹介します。Twitterで共有したい方は、Twitterアイコンをクリックしてツイートします。facebookで共有したい方はfacebookアイコンをクリックして投稿します。

STYLYを使うことによって、3D Model、Image/Gallery、Video、MusicをVR空間に落とし込んで、新たな表現・体験を生み出せます。自分で作ったオリジナルのVR空間をインターネットを通して世界中に発信してみましょう。