How to use Camera function in STYLY WebEditor

Camera function in STYLY WebEditor

The ‘Camera’ function has been added to STYLY WebEditor.

This camera function has two modes, ‘Manual’ mode and ‘Automatic’ mode. In either mode, you can record a video of your VR scene by using this function in WebEditor.
By creating a video from the scene you designed, you can show it in more attractive way.

In this article, I explain how to use the camera function in WebEditor.

The camera button

When you launch WebEditor, you will find the camera icon on the top of the window.
This is ‘WebEditor camera button’, so click it to activate.

The ‘Edit’ button and ‘Camera manual’ button

The top buttons on the ‘WebEditor Camera’ screen work as follows.

① Edit button: Press it to go back to the Edit mode.
② Manual button: It opens this tutorial on new tab.

By clicking the ‘Manual’ or ‘Auto Orbit’ tab, you can switch between ‘Manual’ and ‘Automatic’ mode.

How to record a video in Manual mode

In the Manual mode, you can record a video while moving the camera as shown below.

How to start and stop recording

How to start and stop recording

In the Manual mode, hit the Space key to start recording what currently appears on the screen.

You hit the Space key again to stop recording.

How to move the camera

The moving directions of the camera and their key operations

The key operation to move the camera in each direction is shown in the manual-mode screen (See above).

Left: A
Right: D
Front: W
Back: S
Up: E
Down: Q

Zoom in and out

Zoom in and out

Zoom in: C
Zoom out: Z

Zoom in

Zoom in by holding down the ‘C’ key.

Release the ‘C’ key to go back to the original scale.

Zoom out

Zoom out by holding down the ‘Z’ key.

Release the ‘Z’ key to go back to the original scale.

Change the moving speed of camera

You can adjust the moving speed of the camera by the ‘Speed’ value in the top-left corner.

This speed setting is applied to both the moving speed and the zooming speed.

GIF animation – how to change the Speed value

There are two ways to change the value.

1: Enter the value directly.
2: Point ‘Speed’ with the mouse and drag to the left or right.
Drag to the right to increase the speed.
Drag to the left to decrease the speed.

Fix Height mode

If you check Fix Height, even if you change the camera angle up and down, it moves to the direction of the camera when checking Fix Height.

Fix Heightモード

Fix Height mode

 

Fix Height チェックあり カメラ移動

Fix Height Checked Camera movement

 

Fix Height チェック無し カメラ移動

Fix Height No check Camera movement

How to record a video in Automatic mode

In the Automatic mode, you can record a video rotating around an axis as shown below.

Record a video in the Automatic mode

How it looks from another angle

※Since you can change the moving speed, start and stop recording in the same way as the Manual mode, the explanation is omitted.

Set the axis

In the Automatic mode, click the ‘Move Axis’ button to adjust the position of the axis the camera rotates around.

Set the axis

Adjust the axis for camera rotation.

The axis is shown by the black and white marker at the centre of the screen.

Set the axis position as you like by repeating the sequence: press the ‘Move Axis’ button; adjust the axis position; press the ‘Finish Moving Axis’ button.

Set the radius

You can set the radius of the rotation by adjusting the ‘Radius’ value.

Adjust the radius.

In the same way that you adjusted the moving speed, you can adjust the radius by dragging ‘Radius’ to the left or right in addition to the direct value input.

The setting for the camera angle

You can set the camera angle by adjusting the ‘Rotation’ value.

The Rotation value

Adjust the camera angle

As a guideline for the rotation value, 180 and 360 correspond to half rotation and one rotation respectively (i.e. the unit is degree).

In the same way that you adjusted the moving speed, you can adjust the angle by dragging ‘Rotation’ to the left or right in addition to the direct value input.

Flip the camera

You can flip the camera by clicking the ‘Flip’ button.

It has the same effect as setting the ‘Rotation’ value to 180.

The Flip button

The camera flipped

Reverse the rotation

In the Automatic mode, you can reverse the rotating direction by clicking the ‘Reverse’ button.

The Reverse button

The rotating direction is reversed.

Adjust the camera height

Adjust the camera height

You can change the height of the camera by adjusting the ‘Height’ value.

In the same way that you adjusted the moving speed, you can adjust the height by dragging the ‘Height’ label to the left or right in addition to the direct value input.

How to convert WebM movie file into MP4

The recorded movie is saved as a WebM movie file.

As an advantage, you can immediately play and check the WebM movie file by dragging it into Google Chrome. However, it doesn’t have high compatibility with mobile devices and players, so let’s convert it into MP4 that has higher compatibility.

Access ‘media.io’ (https://www.media.io/jp/convert/webm-to-mp4.html), a free converter.

Convert into MP4

①  Click ‘Add your files’ and select the saved WebM file.
②  Click the ‘Convert’ button.

The download button

When the conversion is completed, the screen shown above appears. Press the ‘Download All’ button.

The downloaded file is zip file. Once it’s uncompressed, it will be an MP4 file.

MP4 file can be uploaded to various SNSs such as Twitter, Instagram, in addition to YouTube.

Congratulations!
That’s all for the introduction of WebEditor Camera function.