Manual, WebEditor,

Top page of WebEditor

This article introduces how to create and maintain a screen, how to use the WebEditor and the flow of publishing the scene.

 

By reading this article, anyone can learn how to create / maintain a VR space and publish it to the world. Let us start to create your own VR space and share it with SNS and publish it.

 

How to create and maintain a screen

Scene manager screen/Create Scene

Now we Introduce the way how to create a new screen and maintain it. The Scene means a VR space. In the scene manager, you can delete, copy, modify name and create a new scene. The scene manager will open when you start the WebEditor from the WebEditor home screen. When you use the WebEditor for the first time, you are  required to create a new scene.  Let’s create a scene. Click a [Create] button before inputting a scene name(you can change later) in a Title form. Then, the WebEditor will start.

See how to use the WebEditor page below if you want to continue learning how to create the scene.

 

Instruction  for the scene manager screen

The scene manager screen/direction for detail

We will explain the detail of the scene manager screen. You may move to the next section if you have already created a scene. Choose a scenes tab.

Menu instruction of scene manager screen

Menu tab Scenes tab/There is a Create Scene. You can copy, delete, confirm/edit the scene name and confirm publish/invisible setting when you choose the scene tab. You can create a new scene when you choose the Create Scene tab.
Thumbnail You can check the thumbnail pictures of the scene.
Publish/invisible You can check the published status of the scene. “Publish” means published. “Private” means invisible.
Scene name You can check the scene name. You can modify the scene name by clicking on the scene name since you are directed to the edit mode. Click a [Enter] key when you complete editing.
Edit button You can switch visible/invisible of a copy/delete button
Copy button You can copy the scene.
Delete button You can delete the scene. You need to be cautious since you can’t restore the scene once you delete it.
Close button You will go back to the WebEditor. You won’t able to do it if you didn’t create a scene.
Undo button You will move to the WebEditor home screen.

 

How to use the WebEditor

We introduce how to use the WebEditor here. It will explain how to change the point of view, explanation of the WebEditor, how to insert assets and use them.

Point of view, Translate/Rotate

This section introduces how to change the point of view on the WebEditor

Zoom in/Zoom out of the point of view

Zoom in/Zoom out of the point of view

You can Zoom in/Zoom out of the point of view by using a mouse scrolling(Trackpad).

How to operate it

For Window/Mac

Edit
Used Devise How to operate
Mouse scroll the scroll wheel
Trackpad By using two fingers up and downs

Translation of the point of view

Translation of the point of view on the WebEditor

 

You can translate point of the view up and downs by using a mouse operating.

How to operate

For Window/Mac

Edit
Used Devise How to operate
Mouse  Move the mouse by clicking the scroll wheel. Or move the mouse by clicking a right click
Trackpad  Translate while clicking the right click

Rotate of the point of view

Rotate of the point of view on the WebEditor

You can rotate the point of view by using a mouse operating.(Trackpad). Rotate around the Start Position.

How to operate

Window

Edit
Used Devise How to operate
Mouse  Move the mouse while clicking a [Alt] key+left click
Trackpad  Move while clicking  [Alt] key+left click

Mac

Edit
Used Devise How to operate
Mouse  Move the mouse while clicking an [Option] key+left click
Trackpad  Rotate while clicking an [Option] key+left click

About Start Position

Start Position on the WebEditor

Start Position is a position when you experience the VR space at first.

 

Instruction of the WebEditor screen

Explanation of the WebEditor screen

Introduce menu of the WebEditor screen. There are 4 menus and explain them detail.

Top button

Top button of the WebEditor

Menu instruction

Edit
Scenes button Open a scene manager
Assets button A scene will open in order to insert assets. There are assets which are 3D objects, images, instagram, musics, movies and PDF(Books).
Publish button Publish screen will open in order to publish the scene.

 

Hierarchy menu

Hierarchy menu of the WebEditor

Hierarchy menu is a management menu, which asset are called light, Skybox(light) and 3D objects. In the new scene, there are 3 default assets inserted below.

Explain the default asset. Directional light is a light which lights the whole space same as the sun. [Ground] DefaultGround is a floor/ground. [Skybox] Default is a sphere covered with full screen.

Menu instruction

Edit
Top bar You can switch to visible/invisible setting of the hierarchy menu.
Image icoon You can switch to visible/invisible setting of the scene on the scene name.
Asset name You can edit the name by clicking on the asset’ name.
Copy button You can copy the asset.
Delete button You can delete the asset.

 

Functional instruction

Edit
Focus on the point of view Focus on the point of view on the asset of screen by double clicking on the hierarchy menu.
Copy to the scene by drug & drop You can copy to the scene by drug & drop from the hierarchy menu.

 

Scene Gizmo

Scene Gizmo on the WebEditor

The scene gizmo shows a direction of the camera. Also, you can switch the direction to forward of camera view by clicking a corn colored red, green and blue.

Side button

Side button on the WebEditor

Menu instruction

Edit
Global button
※It shows when you choose the asset in the hierarchy menu.
Selected Global button can change an axis when you rotate/scale/translate. In case of “On”, you can see the direction of the scene by rotating/scaling/translating. In case of “Off”, you can see the direction of the asset by rotating/scaling/translating.
Move/Rotate/Scale button
※It will appear in the case of selecting the assets in the hierarchy menu
You can switch to rotate/scale/translate(asset operation). You can learn how to translate/rotate/translate the asset in the article of how to operate the asset.
Reset position button Reset the point of view to the Start Position.
Shortcut button You can see a list of shortcut keys of the WebEditor operation. Here is the list of the shortcut keys.

Insert an Asset

You can create your an original scene inserting the asset. In this section, we will introduce how to operate the asset and also, introduce some kinds of the asset. Let us to create a scene along with a simple procedure.

Some kinds of the asset

The Asset list

The Asset list will appear by clicking the Asset button of the top button. In the Asset list,  there are 3D Model, Image, Instagram, Music, Video and PDF.

 

Menu instruction

Edit
3D Model You can choose 3D objects. There are 3D objects of the Google Poly, Directional Light(Light), Skybox(Sphere), Effects, Filter and 3D objects which you uploaded.
Image You can insert photos. There are many kinds of photos to paste to the screen. And you can make motion to photos. It corresponds to 360 photo, PNG and JPEG.
Instagram You can insert photo of the Instagram. Animated photos will appear from an account when you link the account.
Music  You can insert musics. It corresponds to MP3 and Soundcloud.
Video You can insert movies. It corresponds to Youtube.
PDF You can insert PDF files. You can see PDF files as if you are reading books in the VR space when you insert them.

Insert an Asset

We will introduce how to insert the asset. Let us to insert and choose the asset to the scene. This time, create a simple scene by using a Skybox(Sphere), Ground(floor) and 3D objects to the scene.

Change the Skybox(Sphere)

Click the Assets button on the WebEditor

We will introduce how to change the Skybox(Sphere). Click the Assets button.

Click a 3D Model in the asset list

Click the 3D model.

Click a Sky and Grounds in the asset list

Click the Sky and Grounds. In the Sky and Grounds, you can insert some assets of Lights (DirectionalLight), a sphere(Skybox), a floor(Ground) to the scene.

Click a [Skybox] in the asset list

Click the optional [Skybox].

After changing the Skybox in the WebEditor

The Skybox was changed. Default skybox was switched to another one, because it can apply a Skybox a scene. Try some kinds of Skyboxes, they makes your world change greatly.

Insert a Ground(floor)

Delete a [Ground]DefalutGround in the WebEditor

Next, insert a Ground(floor) in the scene.Delete a default ground. Delete the [Ground]DefalutGround from the hierarchy menu(trash button).

Click the Assets button in the WebEditor

Click the Assets button.

Click the 3D Models in the asset list

Click the 3D Models.

Click a Sky and Grounds in the asset list

Click a Sky and Grounds.

Click a [Grounds] in the asset list

A [Ground] asset will appear when you scroll down. Click and select the optional [Ground].

After inserting a Grounds in the WebEditor

A Ground was inserted. The sky and the ground were created. Insert 3D objects here.

Insert 3D objects in the scene

Click the Asset button in the WebEditor

Insert the 3D object to the scene. This time, we will insert the 3D object from Google Poly. Firstly, click the Asset button.

Click a 3D Model button in the asset list

Click a 3D Model.

Click a Poly 3D Model in the asset list

The Poly 3D Model, you can search and insert 3D objects of Google Poly to the scene. You can narrow down to category from a category button too. Also, you can input and search by inputting and searching name or URL in the search form. The search form of thePoly 3D Models will upload.

Click a Search button after inputting a keyword in the search form

Search and Insert a 3D object to the scene. This time, we input “animal” in the search form. Then, animal 3D objects will appear in a result page. Click an elephant.

After inserting a 3D object in the WebEditor

A selected asset was inserted. However, the elephant was placed out of position. By using translate/scale/rotate, you can change the size. Next, we will introduce how to use the asset(translate/rotate/scale).

How to use the asset(translate/rotate/scale)

How to use a 3D object in the WebEditor

We will introduce how to operate the asset(translate/rotate/scale) by using the elephant asset. Select an asset that you want to operate. When you select the asset, it will be yellow. You can select the asset by clicking it from the hierarchy or clicking it in the scene.

Manipulator

A manipulator will appear when you select an asset. The manipulator is three arrows in red, green and blue.

How to change the manipulator in the WebEditor

You can change the manipulator to translate/rotate/scale from a side button of move/rotate/scale. Or, you can use shortcut keys below.

  • [W] key : translate
  • [E] key : rotate
  • [R] key : scale
Translate

Translate

You can translate the asset by drugging the manipulator before changing a translation mode.

Rotate

Rotate

You can rotate the asset by drugging the manipulator before changing a rotate mode.

Scale

Scale

You can scale the asset by drugging the manipulator before changing a scale mode.

How to input the values

How to input the values

You can input the values directly when you click on the value of the manipulator. It will complete clicking an [Enter]key after inputting the value. You can change the value translate, rotate and scale.

You can undo the operation when you click a [Ctrl] key +[Z] key.

 

How to publish and share the scene

STYLY GALLERY

Let us to share the scene with SNS. We will introduce how to publish the scene, how to access the scene on the website and how to experience the scene with HMD.

How to publish the scene

Click a Publish button in the WebEditor

We will introduce how to publish the scene. The publish screen will appear when you click a Publish button. The point of view when you click the Publish button will be set a thumbnail photo as a thumbnail photon of publishing the scene.

The Publish screen

Click the Publish button before inputting a Description and a Title. Input forms can input only half-width alphanumeric. Also, you can’t use copy & paste.

After clicking the Publish button

Click a link of an Open Published Page At STYLY Gallery. The scene you created will appear on the STYLY GALLERY.

My Scene page of the STYLY GALLERY

The scene you created was published on the STYLY GALLERY. Anyone can access the scene. Next, we will introduce how to experience the scene.

 

How to experience the scene with HMD

Anyone who have a HDM can experience. If you don’t have a HDM, you can see the scene on the website. Then, we will introduce how to experience the scene.

Experience the scene with a HDM

Click a VR icon

People who have a HMD, you can experience the scene by clicking the VR icon. If you don’t have a VR VIEWER, you need to download it. Here is how to download and use the VR VIEWER.

Experience the scene on the website

Click a WebGL View icon

People who want to experience the scene on the website, click the WebGL View icon.

WebGL View mode

You can look around the scene same as the WebEditor after changing the thumbnail photo.

 

How to share the scene

How to share the scene

Lastly, we will introduce how to share the scene. For Twitter, you have to click the twitter icon and tweet it. For Facebook, you have to click the Facebook icon and post it.

 

By using 3D Model, Image/Gallery, Video and Music in the STYLY, you can create a new expression/experience. Let us to share an original VR space to the world through the Internet.

Leave a Reply

Your email address will not be published. Required fields are marked *

中将

STYLY / Media Marketing / Engineer / VR Idol Producer / STYLYでゆるめるモ!のVR衣装展示空間作った人 / STYLYではVRでの表現やテクニカルな方法を紹介してくれるライターさんを募集してます! Twitter:@chujo_p

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLY is a cloud-based service for creating high quality,beautiful VR spaces that doesn’t require any coding. By using STYLY, creators can express their imaginations indefinitely and build a variety of virtual spaces. Through these spaces, we can share experiences that are unachievable in the real world.

Unity

STYLY can be used to deliver VR content to the whole world.
Let's create an account first.

Click here

×