How to create characters in Adobe Fuse CC, apply Animation on it and then upload it into STYLY

  • Hello Everyone! Today we will learn how to create humanoid characters in Adobe fuse CC and add animations to that model in Mixamo and upload it to STYLY via Unity. You can simply create your own characters. All you need to do is add body parts and set the character according to your likings. This is just like playing Sims.
1.jpg

 

  • After creating your character, now  press the “send to Mixamo” button on the top right side. Set the name of your character and save it. This will upload the character to Mixamo.

2.jpg
  • When the upload is complete, Mixamo website will open up showing your character.
3.jpg

  • Click the finish button to prepare the character for animation rigging.

 

4.jpg
  • Click on an animation to rig the model. After applying an animation on the model, download the character with default settings. After downloading, load the model into Unity. Drag the model into the hierarchy. Go through the model hierarchy and set the shader on all parts of the character from “standard” to “Legacy shader” -> “diffuse”. This will remove any issues of the models textures. Also make sure to tick the animation loop time to repeat the model animation if you want to.
5.jpg

  • Once the shader has been applied, drag that object back into the Project to make it into a prefab. Previously, the model was just a 3D Model. Now, after dragging it back into the Project, it has become a Prefab. We need to follow this step as STYLY only supports prefabs. Once the prefab is ready, you will notice the prefab has no animation in it. Simply drag the animation from the model on to the prefab. This step will create a controller. Make sure the controller is added into the Animator component. Once done, simply upload the character using the STYLY Plugin.
6.jpg

  • Here you can see It's perfectly working in STYLY.

7.jpg

Cosmic Concert

  • Hello everyone and welcome to another tutorial on STYLY! Today, we will be going over the visual aspects of STYLY and create a Virtual Reality Concert.
  • A concert is not a concert without a stage. 3dwarehouse is an excellent database of free 3D models of all kinds. Simply search concert and you will be presented hundreds of concert stage models you can use in STYLY. The model I am going to be working is called aharitola.  
  • 3Dwarehouse is associated with the Sketchup Tool and all files downloaded from the 3dWarehouse have .skp file format. To effectively use the models, once downloaded, open it in Sketchup tool.
1.png

 

  • Now simply export it in .fbx format. STYLY does not support all .skp formats and that is why we convert the objects.
2.png

 

  • Now comes the task of creating the audience and the singer of the concert. Many humanoid models are already available on Mixamo. Mixamo allows you to not only download 3D humanoid models, but also allows you to add animations into them.
  •  So for creating our own characters I used Adobe Fuse CC. In which you can create your own character’s and then you can send them in Mixamo directly.
3.jpg
  • After that you can add any animation you want so in this added dance and cheering animations.
4.jpg
  • Characters downloaded from Mixamo may be broken models, meaning their texture may not show properly in STYLY, so to counter that, follow the best practice of first adding any model to Unity to clear any rendering issues. Reason for this is so that we can make sure the model is not broken. Sometimes the textures and shaders are not properly applied and need some modification.
  • To handle this issue, simply change all shaders to Legacy Shaders/Bumped Diffuse in all of the parts of the model. Make sure to go through all of its hierarchy. This takes care of any and all texture issues.
5.jpg
  • Once the models are set in Unity, upload them to STYLY via the STYLY plugin.
6.jpg
  • Once all the prefabs are uploaded, open up the STYLY EDITOR.  We have taken care of most of the content and now we are to setup the environment. To start off, place the stage and then the uploaded models with animations. Now set up the scene and funk it up. STYLY has a lot of 3D models which you can use to decorate the scene and make it more immersive. Add flashing lights and glowing objects to amaze everyone! STYLY has a search bar in the 3D model tab which you can use to further explore the asset database.

 

 

concert.JPG
  • As you can see in the snapshots, I have only used STYLY assets to create eye catching environment. This is all that you need to do to create virtual reality environments. Now that you know the basics, let your creativity out and make the best Virtual Reality experience you can to amaze your friends! You can check out a demo video of what I created here. Have Fun!

Bowling Mania

Creating immersion and interaction are key features for any virtual reality content to be engaging for viewers. STYLY allows you to do just that.  To give you a glimpse of what you can do with, I have created this tutorial to guide you step by step on how to use basics of unity and playmaker to create content for STYLY. I will be creating a simple target practice scene using the concept of bowling.

  • To start off, lets first convert the hand held controller into a ball. You can follow this tutorial to see how that can be done. We will be destroying default controller model and replacing it with our own.
  • Here is Playmaker code for accessing controller right.
1.jpg

  • In create object action I added my ball that I want to create.
2.jpg
  •  Then I destroy the original model for my controller. As left one I used for teleport.

 

3.jpg
  • Once the controllers are setup, we move on towards creating the environment. You can create anything, but I wanted to create a sensation of height so I decided to use mountains. I used a snow texture to create the plane. Next I added another 3D plan for making the path.
  • The third and final step involves creating intractable objects.  Since bowling pins perfectly complement large balls, I will be placing pins on top of moving squares to make the task of shooting them down more interesting.  All we have to do is add a Rigidbody component and a box collider to the pin. We also need to make the pin and the square a child of the moving empty object
4.jpg

  • After that I simply uploaded my prefabs in STYLY.
5.png
  • And then I test my scene in HTC VIVE its working perfectly.
  • For further understanding you can go  here for video tutorial.
6.png

Global Variable alternatives: How to share variables between FSM machines

  • STYLY supports Playmaker but unfortunately at the moment, playmaker global variables are not supported in STYLY at the moment. Global variables can be of great help and sharing variables are essential for creating complex logic.
  • Fortunately, we have a way around the global variable issue. We can use the Get FSM actions in FSM objects to get access to other FSM objects which have the variables we are interested in.
pic1.jpg
  • The flowcharts explain the concept of both the Global variables and our alternative method
pic2.jpg
  • Now we will learn how we can do this in Playmaker. First, make 2 empty Game objects and name them FSM A and FSM B. This tutorial is just a proof of concept therefore it will be very basic. I have selected FSM A and added a FSM in it. I then create a variable called “Variable X” and select its type as float.
1.JPG
  • Then, select FSM B and add a FSM in it. Add the action “Get FSM Variable” to it.
2.JPG
  • Since “Get FSM variable” action needs a game object within FSM component in it to retrieve a variable, we pass FSM A object into the action.
3.JPG
  • In FSM B, create a variable with the same name and type so that we can access the value of variable from FSM A.
4.JPG

Now add variable X in store value.

5.jpg
  • Once this is done, whatever the value of Variable X is in FSM A, it will get duplicated into Variable X of FSM B. And that is how we can share variables. The type of variables range from INT to vector3. Different actions will get us different types of variables. For eg, we can get a Vector3 variable by using the “Get FSM Vector3” action.

 

Written by: Zubaira Naz

How to create 3D sounds in STYLY

  • All audio files currently uploaded in STYLY via the Music tab are 2D, meaning, no matter where you go in the scene, the volume of the music will stay the same. This is great for playing music or sounds in a scene where the sound is supposed to be everywhere. Examples of such scenes are the beach and a concert.
  • Virtual Reality is all about creating an immersive experience. Sounds can greatly change the way we perceive Virtual Reality because it engages out sense of hearing on another level. We can get this done by changing the dimension of audio from 2D to 3D. This tutorial deals with how to do exactly that.
1.jpg

 

  • Create an empty object and name it sounds. Create another empty object within it and name it “sound object”. You do not have to specifically follow this hierarchy. Now add an “Audio source” component in the object.
2.JPG

 

  • You can check the “loop” and “Play On Awake” if you want.
3.JPG
  • This step is the most important one. Setting Spatial Blend to 1 converts the audio into 3D from 2D.

4.JPG
  • We can also modify 3D settings of the audio Source.
6.JPG

 

  • Changing Max distance will limit the range on the audio. The further you are from the source, the lower the volume you will hear.
  • You can also play with the Doppler effect (Doppler effect: audio frequencies change when an object is moving away or closer to the audio source)

  • Woohoo! Now you know how to create 3D sounds in Virtual Reality. You can add as many sounds as you like.
5.jpg

For URDU or HINDI version of this tutorial, please click here.

 

 

 

Written by: Abdullah Sajjad

How to destroy an object in STYLY through Playmaker

In this tutorial we will learn how we can destroy a 3D model when it collides with other objects in game. For that purpose, we use is_Trigger in unity 3D and we check the is_Trigger property on that object in which we want to perform some action. In this tutorial, I want to destroy a sphere when a bullet hits it. Make sure you have read previous tutorials on how to access controller and how to fire bullets.

  • Firstly, create a 3D sphere. That's my target object. 'Now, add a collider and also check the Is Trigger property. Now, the sphere will not block anything. When anything with a collider touches it, the spheres collider will detect that.
1.jpg

 

  • After that we add a FSM to the sphere. I added action: Trigger Event in my game as I want to destroy Sphere when a bullet enters in its collider so I added transition of die and lead it to Dying state. 
2.jpg

 

 

  •         In Dying I added an action of Destroy Self.
3.jpg

 

  •  I already showed how to create bullets in my previous tutorial. Just make sure the bullet prefab has a Rigid body and collider in it.
4.jpg
  •   Then I simply uploaded my prefab to STYLY. Now I shoot from my gun and also destroy that sphere. You can add anything as enemy and shoot that with your gun.

Written By : Zubaira Naz

Reusing Playmaker FSMs and Objects in other scenes

Getting access to the controllers and reassigning them different models and functionalities can get redundant and pretty boring. To make this process easier for everyone, I have decided to create a tutorial on how to avoid recreating FSM machines. I will also be sharing a Unity package containing the playmaker prefab. Please make sure you have purchased and installed playmaker when you import the package. Please find the download link at the bottom of this tutorial.

1.JPG

To solve this issue, you can create Unity packages of the Playmaker empty objects containing controller settings and FSM machines. To begin, simply right click the prefab and click "Export Package...".

This will open up a Unity window allowing you to select and deselect what you want to export. Only select the prefab and click export.

3.jpg

You now have a Unity package which contains the controller settings. To access them again in another project, simply install Playmaker in that project and import this unity package into it. You can use this technique to create prefabs of different playmaker FSMS and export them to other projects without making anything redundant or wasting time.

Please download the already created basic controller settings from here.

Here is a video tutorial on how to create unity packages of controllers.

For URDU or HINDI version of this tutorial, please click here.

 

Created by: Abdullah Sajjad

How to use Virtual reality controllers to create an Amazing bow and arrow Experience in STYLY

Hello Everyone! Today we are going to learn how to use Virtual reality controllers to create an amazing bow and arrow experience. Please make sure you are following the tutorial in a series so you are clear on how to access controllers. Also make sure you have read the STYLY X Playmaker tutorial series here. The basic reason for this tutorial is to guide users on how to infuse kinetics and elasticity into objects. The gist of the tutorial is to multiply a constant with the distance between the 2 hand held controllers for virtual reality. You can checkout a simple Archery scene I created using UNITY X PLAYMAKER X STYLY here.

 

To start off, download free bow and arrow models from 3dwarehouse.sketchup.com. Make sure to turn the models into prefabs and making them a child of an empty object. We will do this as sometimes; models can be tricky to deal with so it is better to envelope them in a game object. 

Now that we have the prefabs ready, setup the uploadable prefab for STYLY. Follow the setup state in this tutorial. Once one of the controller is ready, simply copy that object, duplicate it, change its name to whatever seems appropriate. You will need to change a few other things such as the name of the object you are trying to find from “Controller (right)” to “controller (left)”. Similarly, change event names from “Global_TriggerDown_R” and “Global_TriggerUp_R” to “Global_TriggerDown_L” “Global_TriggerDown_L”. If you feel you have no idea about what I am talking about, please read this tutorial.

7.JPG
8.JPG

Once both the controllers are setup, play around with the new models placement until you feel the placement of the objects is realistic in Virtual Reality. Once done, move on towards setting up the right controller which is what I will be using as an arrow.

State 1 is empty. State 2 is where we create the object. Notice how the transitions in the state machine help release only 1 arrow at a time.

3.JPG

Now the fun part starts. We want the arrow to go the furthest when our arms are stretched and we are in an archery position. We do not want the arrow to go too far if the arrow has not been pulled back enough. The key here is distance. The distance between the 2 controllers. We can simply get the distance in 3 easy actions in the arrow. We will use the following actions:

 

  • Find Game object (find: “Controller (left)”, store in: Controller_L )
  • Find Game object (find: “Controller (right)”, store in: Controller_LR)
  • Get distance (Game Object: controller_L, target: controller_R, store in: forceMultiplyer)

 

9.JPG

Now that we have the distance, we need to multiply it with a constant so we can get the resulting force we want to apply to the arrow. For that we will use Float multiply action to get a force. I multiplied the forceMultiplyer with 5000. Now add the resultant into the z axis of the arrow and keep the world set to self. Finally, reset the forceMultiplyer variable to zero by using action Set Float Value. We now have simple bow and arrow dynamics. This version is still faulty and works even if the arrow is not pointing to the bow. We can fix this issue by continuously pointing the arrow towards the bow by using the action Look at.

 

Congratulations! You can now enjoy practicing your archery skills. 

10.JPG

For URDU or HINDI version of this tutorial, please click here.

 

 

 

Created by: Abdullah Sajjad

How to add bullet in controller? STYLY X PlayMaker

In this tutorial we learn about how we add bullet in the controller through playmaker and then upload it into STYLY.

  •  I took a 3D sphere and made it Bullet. Then I apply yellow shade on it, so it’s looks like Bullet.
  •  After that I added rigid body component on it and also added capsule collider so when it collides to something it will perform specific action. After that I put this bullet into an empty game object named “bullet” and made a prefab of that bullet.
1.jpg

 

  • After that I selected that bullet and then added an FSM in Playmaker and named that state as Moving forward. I follow this tutorial that already available on STYLY website. I added 2 actions of “add force” and “wait” and set their values that how much force required to a bullet when it move forward and how many second it wait until it destroy. Then I added another state of Dying and set its action as self-destroy.
2.JPG
  • Now we have to set controller Right so it works as gun to fire the bullet. In the previous tutorial we access the controller Right. Now add a transition finished in Setup state. After that I added state waiting for trigger in playmaker by selecting guncontroller_R and added events on it of Global_TriggerPressDown_R and Global_TriggerPressUp. Next I added Transition of Global_TriggerPressDown_R in waiting for trigger state.
  • Next I added new state spawning bullet with a transition from waiting from Trigger. I added action an action of get rotation in the Spawning bullet state and also get the rotation of spawn sphere.  Next i added a state waiting and apply action of "wait" on it and set the value of wait to 0.2.
3b.JPG

 

  •  After that I added another action of create object and drag Bullet prefab in Game Object option.
4.jpg

 

  • After that I Uploaded my complete prefab of shooting gun game in STYLY. 
5.png

 

  • I simply drag my scene of shooting gun game from "My Models" in STYLY. And then publish it and test it through HTC Vive its working. I can fire bullet from my Gun.
 Please Look at the tutorial video for better Understanding.

Please Look at the tutorial video for better Understanding.

Please make sure you add the name "spawnPoint" in the Get Child action. I forgot to do that part at 6:15 of the video.

For URDU or HINDI version of this tutorial, please click here.

 

 

Written by: Zubaira Naz

How to access the controller through Playmaker and change it's default model controller to any other Model

How to access the controller and change it's default model controller to any other Model:

  • For accessing controller, first we create an empty game object in playmaker hierarchy. The tutorial is already available Here. After that add a state in FSM by selecting  gunController_R.
1.jpg
  •  By following that tutorial I use action find game object and then get position and get rotation of the controller.
  •   After getting position we create variable to store position value of position of controller.

 

2.jpg

 

  • Same as above after using action “Get rotation” create variable to store the value of controller.
3.jpg

 

  • Then, add a 3D model gun “SciFiHand” that will work as shooting gun in this scene. You can add anything. Then add a sphere as child object in front of SciFiHand so it behaves as Spawn point. After that, uncheck its mesh renderer so it’s not visible. We hide it’s mesh because we want its functionality not its mesh. So spawn point is basically the point from where we fire bullet from the gun.
4.jpg
  •  Now use action “create game object” and apply position and rotation controller on it.
5.jpg

 

  •  Next create a Set Parent action and set the “SciFiHand” parent to be the controller. Setting the “SciFiHand” as a child of the controller with move the “SciFiHand” around with the controller at all times. Next, add a Get Child action and locate a child of the SciFiHand object called spawnPointSphere.
  • After storing all values of controller now we delete the controller prefab that we can use our own model instead of controller. So for that purpose we have to delete the controller model. So, I add an action of Destroy object.

 

6.jpg

 

  •  As in this scene gun is used for shooting purpose. Now controller is fully functional and we can use it to perform any task. I uploaded my model in STYLY and then test it by HTC Vive so my controller converted to gun.
    Please look at our tutorial video for more clarification.

 

Please look at our tutorial video for more clarification.

For URDU or HINDI version of this tutorial, please click here.

 

 

Written By: Zubaira Naz

Cricket Stadium Tutorial: Using Playmaker to throw objects from controller

Hello Everyone! Before we get started, Please make sure you satisfy the following requirements:

  • ·         Your browser is compatible with STYLY. You can check that out once you sign in to STYLY.
  • ·         Your Machine must have at-least 4gb RAM to ensure fluid content creation.
  • ·         Make sure you have installed Unity 5.6.3p1 with the required components.
  • ·         You have purchased and installed Playmaker Plugin for Unity.
  • ·         You have downloaded the STYLY plugin for uploading scenes created in Unity from here.

This tutorial assumes you have gone through the Unity X Playmaker X STYLY tutorial series. Please go through this before you start this tutorial. Now that that’s out of the way, let's begin the actual Development. We will develop all the content in Unity and then export it to the STYLY account linked to Unity via the STYLY plugin.

I would like to show you how we can use playmaker to make STYLY scenes intractable. For that purpose, we will be developing a simple ball game. To set up a simple environment, we will need a cricket stadium model freely available on 3dwarehouse. The wickets in this stadium can't be used for our purpose as its part of the mesh. So, we will delete that part of the mesh in the stadium and create our own wickets using Unity's own 3d objects.

1.png

To make the wickets, simply use 3 vertical cylinders as the stumps and 2 cuboids as the bails. Next, add a rigid body to all parts of the wicket. Make sure to decrease the mass of the bails as otherwise, they might fall through the stumps.

2.png

Once your wicket is ready, place it in inside the stadium object in the hierarchy and then move the wickets at the edge of the pitch.

Now that the environment is ready, let's move towards the fun stuff. We will now replace the VR hand held controller model with a Ball. To do so, first, create a prefab of a Unity sphere and name it ball. We will add a rigid body to it so that we can access the controller's position and rotation. Then, add a similar ball directly on top of it and turn off the mesh renderer of the second ball. The purpose of the second ball is to provide us with the spawn position of the ball we throw.

3.png

You can also look at this STYLY Tutorial for more reference.

Once we have the controller model ready, let's create another ball of the same size. This will be the projectile we throw.

4.png

Now that we have all the models ready, let's begin using playmaker. If you haven’t installed Playmaker yet, please consult this guide. Once we have the playmaker set up, proceed by creating an empty object in Unity. Our intent is to add all necessary objects in this empty object, create its prefab and upload it to STYLY. Next add the modified stadium containing wickets into the empty object. The real purpose of playmaker starts from here.

Since we cannot write scripts in STYLY, we will use playmaker to take care of that part without a single line of code. We first create another empty object and name it BallController_R. This object will hold State machines dealing with the right controller. We will now proceed to do the following actions in the FSM:

  • ·         Find Game Object (Object name: "Controller (right)", store in new variable "controller")
  • ·         Get Position(Game Object: "controller", store in new variable "controllerPosition")
  • ·         Get Rotation(Game Object: "controller", store in new variable "controllerRotation")
  • ·         Create Object(Game Object "ball" prefab, with position : "controllerPosition" and rotation "controllerRotation", store in "Ballcontroller")
  • ·         Set Parent(set "controller" as parent of "Ballcontroller")
  • ·         Get Child(Get child "spawnPoint" of object : "Ballcontroller", store in new variable "spawnpoint")
  • ·         Get Child(get child "Model" of object : "controller", store in new variable "controllerModel")
  • ·         Destroy Object(Destroy "controllerModel")

Next, Add 2 Global Events "Global_TriggerPressDown_R" and "Global_TriggerPressUp_R". These events are compatible with STYLY engine. We will use these events to trigger release of ball and will also use them to release one ball per throw.

6.png

Add 2 states waiting for trigger and create ball and add transition as shown in the picture.

Next, we want to create a ball which has the direction and velocity of the controller. To do so, add the following actions in state create ball:

  • ·         Get Velocity(of Object: "controller", store in Vector in new variable "ball_Velocity")
  • ·         Get Rotation(of Object: "spawnpoint", store Euler Angles  in new variable "spawnpointRotation")
  • ·         Create Object(Game object: ball_game with Spawn point: "spawnpoint" and rotation as "spawnpointRotation")

Now that we are able to create a new ball, we need to give it the velocity of the controller. We do so by adding a FSM in the object ball_game.

  • ·         Get FSM Variable(get object "ballController_R", store in new variable "ball_Velocity")
  • ·         Set Velocity(Set owner velocity to be "ball_Velocity")

Our game is now set to play. Simply drag the object from hierarchy to assets to make it into a prefab. Finally upload the prefab to STYLY! Congratulations! You just made your first game in STYLY! Now open up STYLY editor, set and rotate the new imported model, Publish the scene and share it with your friends!

 

 

 

Created by: Abdullah Sajjad

How to create animation in UNITY and then upload it into STYLY

First of all, I created a room environment by using 3D plane in UNITY for my Scene. You can select any environment for that purpose. So now we are going to learn how to create an animation in unity and then how we upload that in STYLY.

  •  First I created a 3D Sphere which I used as ball. After that I went to window tab in Unity and added animation in it and created the animation for moving a ball. You can add which ever movement you like. In my scene, I added animation of moving right, left, up and down.
ani2.JPG

 

  • After adding one ball, I added 3 more balls and added animation on them.
ani3.JPG
  • After that I uploaded my animation in STYLY. For that purpose, I added all my spheres in one empty game object. I named it “balls” and made a prefab of this. Then I uploaded that prefab into STYLY via the STYLY plugin available. Simply right click the prefab and move your curser to the STYLY option and then select upload..

 

ANIM3.png

 

  • Same as above, I uploaded my room in STYLY.

 

ANI5.png

 

  • Then, I simply imported my room and animation in STYLY from My Model tab in assets. Here you can see it’s working nicely.
ST.JPG

For URDU or HINDI version of this tutorial, please click here

 

Written By: Zubaira Naz

How to use viewpoint in STYLY

You can change the point of view within any given scene by adjusting the viewpoint in STYLY Editor. This allows you to view a scene or object from any angle.  The viewpoint can be changed easily using your mouse and keyboard - without the need for any coding.

To begin, open STYLY Editor (click here to learn how to open STYLY)

You will be greeted with the initial pop up window after the Editor has loaded. From here, you can create a new scene or continue with one that you created previously. Go ahead and create a new scene or load one from before.  Everything that you do is saved in real time in the cloud space.

First, select an object in the scene by clicking on it. (Objects may also be selected by from the list of assets on the left.) 

viewpoint1.png

To focus perspective on the object, click the F key on your keyboard. This will bring it into central view.

viewpoint2.png

To change the viewpoint up/down/left/right, click and hold the right mouse button, then drag the mouse.

To zoom in and out, scroll using the scroll wheel on your mouse. This can also be done by dragging two fingers across a notebook touchpad.

viewpoint3.png

To orbit around the object, press and hold the left mouse button + ALT.  Dragging the mouse will now move around the object in all 3 dimensions.

viewpoint4.png

 

If at any time you wish to return to the original (default) viewpoint, click on the 'reset position' eye icon to the right.

screenshot-webeditor.styly.cc-2018-01-08-15-35-08-649.png

Thanks, STYLY users! We hope you have found this tutorial useful. We’re looking forward to seeing what’ve created. Please free to post any questions and comments.

How to scale objects in STYLY

It is easy to adjust the size of 3D objects in STYLY Editor. You can shrink or enlarge an object while keeping the same aspect scale. Alternatively, you can squeeze and stretch it to suit your needs. 

To begin, open STYLY Editor (click here to learn how to open STYLY)

You will be greeted with the initial pop up window after the Editor has loaded. From here, you can create a new scene or continue with one that you created previously. Create a new scene or load one from before.  Everything that you do is saved in real time in the cloud space.

scale1.png

Select an object and press the R key. This will bring up the scaling view. You will see four square boxes.

                       

When you press and hold on one of the arrows it would change its color to yellow and let you manipulate the object's size with respect to its axis. You can scale object's size with exact proportions by clicking and holding the center box.

First, try increasing & decreasing the size of the object while maintaining the aspect ratio. The white box at the origin point is there for proportional resizing. Click on the white box and drag your mouse up and down (or right and left).

scale2.png

Then, try to stretch or squeeze the object at only one axis.

Click the X, Y, or Z box and drag your mouse. The red square box is for resizing the 3D object horizontally (along the X-axis), the yellow box is for resizing vertically, (along with the Y-axis), and the blue one is for resizing along the Z-axis.

scale3.png

Remember W/E/R are the three keyboard shortcut keys to move, rotate, & scale. We recommend that you get a good grip on these shortcuts so that you can quickly and easily manipulate objects within STYLY Editor

Thanks, STYLY users. We hope you have found this tutorial useful. Please keep sending us your comments, questions, and creations!

How to rotate objects in STYLY

Using STYLY Editor, you can spin and rotate objects three-dimensionally. This is something that needs to be done when positioning objects in a scene. 

The position of an object in three-dimensional space can be specified in three coordinates. These are represented simply as X, Y, Z axes. The three axes are also color coded: red, green, and blue.

Select an object and press the ‘E’ shortcut on your keyboard to bring up the rotation view. You can also do this by clicking on the Move/Rotate/Scale icon to toggle through the three modes.

How to rotate objects in STYLY1.png

A set of three rotational circles will appear when in rotation view. Clicking and dragging each of these circles will enable you to rotate the object along the X, Y, or Z axes (ie., red, green, or blue).   Each axis circle will turn yellow when selected.

How to rotate objects in STYLY2.png

Remember W, E, R are the three keyboard shortcut keys to move, rotate, & scale. We recommend that you get a good grip on these shortcuts so that you can quickly and easily manipulate objects within STYLY Editor

Thanks, STYLY users! We hope you have found this tutorial useful. If you create something with this technique, please be sure to post your comments.

How to move objects in STYLY

You can specify the positions of your 3D objects in STYLY.  Both linear and non-linear movements can be applied to place your objects in the desired spot.

The MOVE feature [shortcut: “W” on the keyboard] of STYLY allows you to do this. It provides you with a set of squares and arrows.  The arrows are for linear movements along a single axis.  And the squares pinned to the object control the object more freely and non-linearly (along two axes simultaneously).  Just left click on and hold the appropriate square or arrow, and drag the mouse to move the object.

Open STYLY editor or click here to learn how to use STYLY editor

Once the Editor is loaded, you can see a pop-up window. Using the two options on the pop-up, you can either create a scene or use a scene you have already created. It requires no download and at the same is automatically saved in the cloud space. You can either create a scene or go to a previously created scene.

30.png

Then, after pressing the W key, you will see a three-colored box and three arrowheads. The three arrows are there for moving the object along a single Cartesian axis.

adad.png

Particularly, the red arrow is for moving the 3D object horizontally (along the x-axis).

The green arrow is for moving it vertically (along with the y-axis).

And the blue arrow is for moving it forward and backward (along the z-axis).

While the arrows move the object only along a single axis, the squares move it along two axes simultaneously. Specifically, the blue square is for moving the object simultaneously along the x and y-axes.

screenshot-webeditor.styly.cc-2018-01-05-17-33-34-261.png

When you press and hold on one of the arrows it would change its color to yellow and let you manipulate the object's position with respect to its axis. You can move object's location freely by click and hold in the center box.

screenshot-webeditor.styly.cc-2018-01-05-17-37-27-605.png

So, with this set of arrows and squares that STYLY provides, you can move your object(s) to anywhere you would like.

Thanks, STYLY users. We hope you have found this tutorial useful. If you create something with this technique, please be sure to post your comments.

How to import PDF files in STYLY

Portable Document Format (PDF) is a universal file format that allows users to embed the fonts, images, layout and graphical designs from any source document, regardless of the application tools that are used to create it. For a user working on advanced data, the graphical design integrity of PDF display provides the exact same visual and graphical content. The multi-dimensional format of PDF allows a user to integrate various types of content including text, images and vector graphical visuals, videos, animations, and 3D models. All of these elements can be combined within the same PDF file and organized as a presentation or a demonstration.

Users can save their time using PDF for graphical visual display without getting into the complexity of code-based tools. And STYLY provides PDF imports so that importing PDF files a user can create and add more VR variables with the features of STYLY in VR view. You can start it with the help of a web-browser.

Go to STYLY web-page.Click on the EDITOR tab.

1.png

A separate web-browser tab would be launched. Now you just have to click on Launch STYLY Editor option button.

2.png

This will take you to the STYLY Editor.

3.png

Once the Editor is loaded you can see a pop-up window. Using the two options on the pop-up you can either create a scene or use the scene you have created. As it requires no downloading at the same time it provides auto-save mode on cloud-space.

4.png

As this blog is about demonstrating the Post Effects of STYLY Editor therefore it is named so. One you have your scene you can click on the Assets option in the top-right of you screen.

1.png

You can see the default option set on the left translucent screen of the window. You can remove them if you do not need them.When you click on the Assets option it would pop-up an insert Asset window.

Then click on the PDF tab.

1.png

Here you can select your desired PDF from your PC.

screenshot-webeditor.styly.cc-2017-12-22-17-05-59-912.png

Click on to Upload button.

sds.png

It will start Uploading PDF file to STYLY.

saddsfs.png

Hit Next button

sdsfsasasas.png

Choose Accessory.

screenshot-webeditor.styly.cc-2017-12-22-17-15-01-660.png

The PDF file will be imported and will be available to see in STYLY.

end.png

Thanks, PDF users. We hope you have found this tutorial useful. If you create some distinctive imports with this technique, please be sure to post your comments.

Importing 3D Models from mixamo to STYLY

Mixamo is a web-based service providing 3D models and animation sequences established with Adobe’s Creative Cloud. Mixamo makes the entire process of animating easier for a user. A user does not have to define a character, nor have to rig the character for movement. With Mixamo generated characters you can get pretty much of any animation you want. Just to name a few running, idle, walking, dancing, shooting, and even more. And you can even adjust the animation.

users can save their time using this tool. Mixamo provides a user with 3D objects having default size and default object movements without complexity of code-based tools. That can be adjusted for the animations created by a user.

Now this will not end here importing Mixamo files to STYLY would allow a user to create endless environment of opportunities for their animations to be visualized in VR view. You can start it with the help of a web-browser.

Go to STYLY web-page.Click on the EDITOR tab.

1.png

A separate web-browser tab would be launched. Now you just have to click on Launch STYLY Editor option button.

2.png

This will take you to the STYLY Editor.

3.png

Once the Editor is loaded you can see a pop-up window. Using the two options on the pop-up you can either create a scene or use the scene you have created. As it requires no downloading at the same time it provides auto-save mode on cloud-space.

4.png

Go to Assets Tab on the top-right of the screen.

1.png

You can see the default option set on the left translucent screen of the window. You can remove them if you do not need them.When you click on the Assets option it would pop-up an insert Asset window.

Then click on the 3D Model tab.

5.png

Go to Upload tab.

6.png

Go to mixamo.com or click here

web.png

To choose a character, hit character and browse to select your desired model.

ch.png

Now click on animation tab to find and apply an animation to your character. You can use their default animation settings or tweak them yourself on the right side.

ani.png

When you are happy with the settings you can hit download button to save on your PC.

down.png

Set your file format, skin type and keyframe to your desired states and click on download button. set file format to .fbx for STYLY. This would start downloading the file.

lod.png

Now back to STYLY editor, give your model a name and select the exported file from mixamo and hit upload.

21.png

The files would start to upload.

14.png

When uploading is done. The status would show completed.

22.png

Now go to My Models tab and select Sketchup file.

23.png

Your exported files form Adobe Mixamo are now in STYLY.

screenshot-webeditor.styly.png

Thanks Mixamo users. We hope you have found this tutorial useful. If you create some distinctive imports with this technique, please be sure to post your comments.

How to access 3D warehouse files in STYLY

The Google 3D Warehouse gives you access to millions of 3D web-based models so a user can upload or download them in SketchUp. There are vast oceans of 3D content available in layers with each layer containing catalogues.

The 3D Warehouse is a data source to 3D models from real-world architects, game modelers and designers. These catalogs are benefitting designers and consumers to visualize their specifications for the 3D content.

If you are an architect or civil engineer using Autodesk Revit, or a game developer using Maya or even the Open Source Blender. And you want to increase the impact of an interactive environment. That’s where STYLY allows you to incorporate with 3D Warehouse. You can start it by the help of a web-browser.

Go to STYLY web-page.Click on the EDITOR tab.

1.png

A separate web-browser tab would be launched. Now you just have to click on Launch STYLY Editor option button.

2.png

This will take you to the STYLY Editor.

3.png

Once the Editor is loaded you can see a pop-up window. Using the two options on the pop-up you can either create a scene or use the scene you have created. As it requires no downloading at the same time it provides auto-save mode on cloud-space.

4.png

Go to Assets Tab on the top-right of the screen.

1.png

You can see the default option set on the left translucent screen of the window. You can remove them if you do not need them.When you click on the Assets option it would pop-up an insert Asset window.

Then click on the 3D Model tab.

5.png

Go to Upload tab.

6.png

Go to 3D WareHouse or click here

24.png

Browse and download your model.

3.png

WareHouse file will be downloaded in .skp extention so open in SketchUp and export it from there.

4.png

In Sketchup go to File option on the top-left of the screen and select Export to save an object and hit 3D Model.

1.png

Now select file type in the drop-down menu. You can import .obj, .fbx and .3dx files from Sketchup.

2.png

The file will be exported with a pop up window.

5.png

Now back to STYLY editor, give your model a name and select exported file from SketchUp and hit upload.

21.png

The files would start to upload.

14.png

When uploading is done. The status would show completed.

22.png

Now go to My Models tab and select Sketchup file.

23.png

Your exported files form 3D WareHouse are now in STYLY.

screenshot-webeditor.styly.png

Thanks 3D WareHouse and SketchUp  users. We hope you have found this tutorial useful. If you create some distinctive imports with this technique, please be sure to post your comments.

How to import sketchup files in STYLY

Sketchup is 3D modeling tool developed for users providing them with architectural, civil, and mechanical engineering tools by lowering 3D modeling barriers. So that, almost anyone can make quality 3D models including video game designers, interior designers, landscape architects and film editors.

You can build visuals quickly using different scales, dimensions, metric or imperial measurements with accuracy. The credibility of design modeling is built on accuracy and with tools of Sketchup you can have Arch Cutouts for Creating Dimensions, 3-dimensional geometry Rotation Axis, Layers for Labeled Presentations and to Simulate Animation and moreover you can have Layers to Explore Design Options.

STYLY allows a user of Sketchup to import their files and have a VR view of your on-screen accuracy to be transcended beyond just 3-dimensional axis and to explore in detail the minute designs so before you have your project executed in real time you are sure of the credibility coming with it. You can start it with the help of a web-browser.

Go to STYLY web-page.Click on the EDITOR tab.

1.png

A separate web-browser tab would be launched. Now you just have to click on Launch STYLY Editor option button.

2.png

This will take you to the STYLY Editor.

3.png

Once the Editor is loaded you can see a pop-up window. Using the two options on the pop-up you can either create a scene or use the scene you have created. As it requires no downloading at the same time it provides auto-save mode on cloud-space.

4.png

Go to Assets Tab on the top-right of the screen.

1.png

You can see the default option set on the left translucent screen of the window. You can remove them if you do not need them.When you click on the Assets option it would pop-up an insert Asset window.

Then click on the 3D Model tab.

5.png

Go to Upload tab.

6.png

Now open StetchUp and export your file.

1.png

In Sketchup go to File option on the top-left of the screen and select Export to save an object and hit 3D Model.

2.png

Now select file type in the drop-down menu. You can import .obj, .fbx and .3dx files from Sketchup.

3.png

The file will be exported with a pop up window.

4.png

Now back to STYLY editor, give your model a name and select exported file from SketchUp and hit upload.

21.png

The files would start to upload.

14.png

When uploading is done. The status would show completed.

22.png

Now go to My Models tab and select Sketchup file.

23.png

Your exported files form SketchUp are now in STYLY.

30.png

Thanks Sketchup users. We hope you have found this tutorial useful. If you create some distinctive imports with this technique, please be sure to post your comments.