In WebEditor of acceptance environment, how to paste the image and video to a 3D object that you create

In this article, I will introduce how to paste images and movies on the 3D object you created, insert it in STYLY and insert the movie you created via Dropbox, with the WebEditor on Acceptance test environment.

Acceptance testing environment is an environment where you can use new functions earlier. It accesses the same database as the WebEditor you usually use. There are some functions available only in Acceptance testing environment. This time, I explain how to make the asset of your 3D object with the images pasted on, and how to make the asset of your 3D object with the movies pasted on.

How to paste image or video on your 3D object

I introduce how to paste images and movies on the 3D object created with Blender, Maya or Unity, and how to insert it in STYLY.

How to paste image and movie on your 3D object #1 – Unity screenshot

Convert your 3D object into a Prefab with Unity. Note that you should rename the Prefab asset ‘STYLY Screen’ when it’s created. Upload the Prefab asset to STYLY.  After the upload is completed, copy the GUID of the asset uploaded.

How to paste image and movie on your 3D object #2 – Unity project folder

In the project viewer on Unity, select ‘_Output’ > ‘STYLY_ASSET’ > ‘Packages’.

How to paste image and movie on your 3D object #3 – Unity project folder

The package name, ‘e6f11604-15c7-4c17-9fec-849cf3e964f3.unitypackage’, is the GUID.

How to paste image and movie on your 3D object #4 – WebEditor on Acceptance testing environment

Access the WebEditor on Acceptance testing environment (http://webeditor-acceptance.styly.cc/). Press the Assets menu button to open the Asset menu.

How to paste image and movie on your 3D object #5 –  WebEditor on Acceptance testing environment

Click ‘Insert Asset by GUID’ on ‘3D Model’.

How to paste image and movie on your 3D object #6 – WebEditor GUID menu

The GUID menu has the following fields.

  • STYLY GUID: Specify the 3D object to paste image or movie onto. So paste the GUID you copied.
  • title: Enter the asset name
  • description: Leave it blank (not used).
  • exclusive: Leave it blank (not used).
  • vals: See the below.

‘vals’ value depends on whether you paste an image or a movie. Enter values as shown below.

Image

  1. mmh://photo/
  2. the URL of the image

Movie

  1. mmh://video/
  2. the URL of the movie
  3. (Set it to 1 to repeat the movie or 0 not to repeat it)
  4. (Set it to 1 to mute or 0 to turn sound on)

Insert your movie via Dropbox

You can set ‘the URL of the movie’ (i.e. the second line of ‘vals’) to the URL of the movie in Dropbox. However, it won’t work if you entered the URL if your movie in Dropbox as it is. Modify the URL as shown below.

【URL before the modification】https://www.dropbox.com/s/test/test.mp4?dl=0

  1. Replace ‘www.dropbox.com’ with ‘dl.dropboxusercontent.com’.
  2. Delete ‘?dl=0’.

【URL after the modification】https://dl.dropboxusercontent.com/s/test/test.mp4

It allows you to upload your original movie to STYLY.

 

With the WebEditor on Acceptance testing environment, I explained how to paste image or movie on your original 3D object and insert it to STYLY. In addition, I showed how to insert your original movie by Dropbox. Since it is still under development, you might find some issues. It will be a great help if you report them to the shown below. Thank you.

Report any issue to: