


Here, there are two tutorials to make a walk & run cycle, blend files & source files of this part of the process: rigging.zip 6. (my model only has a thumb and other bone for the rest of the fingers).īe careful with Vertex Groups, if you have made your own groups when you were modelling remove all before you execute ‘Armature deform with automatic weights’ because their names are similar to bones can produce undesired effects when you animate the character. I learned with this tutorial but in this case I simplified hands with less bones
EXPORT BLENDER ANIMATION DOWNLOAD
You can download the project at this point on ‘texturing’ branch of the github project. Three.js exporter settings to export a static mesh json file of this static Mesh from Blender, use the default settings and check 'Face Materials' & 'Textures'. Scale your model to obtain the desired height and press ctrl+A to Apply ‘Location’ & ‘Rotation & Scale’. REMEMBER - Axis in three.js and Blender are different. For this reason our character will measure z = 1,7. Especially if you work for VR, to have the real measures is very important. Now is a good moment to decide the size of our model. Now we need to scale & grab to the correct one. Be sure your model will be placed and scaled in an undesired position. If you need to work with shadows & more lights be careful with the performance because is very painful, especially on mobile devices. To be focused on animation on this post, I decided work without shadows and with one ambient light, with this setup we will have a pure colored And more cartoon style character. In this case (cartoon style) I changed Diffuse to #ffffff and 1.0 of intensity and Specular intensity to 0.0 (and automatically our material change from MeshPhongMaterial to MeshLambertMaterial when we export it). Be careful with the name of your materials & textures to prevent errors, because if you don’t change them, by default Blender use ‘Material’ and ‘Texture’ and if you have two different models with the same name only render the first that was loaded. Now you will have the option ‘File > Export > Three.js (.json)’ activated. Press ’Save User Settings’ & close de ‘User Preferences’. If you move the exporter to the correct folder you could see the Add-on ready to be checked. After in Blender, Open ‘Flie/User Preferences’ and with the ‘Add-ons’ tab selected search for ‘three’. I used the three.js 79 revision for this tutorial but in the future is recommendable to use the last ‘master’ one. First, you need to move from ‘/utils/exporters/blender/addons/' the ‘io_three’ folder to ‘scripts/addons/‘ folder where your Blender app is isntalled. Exporting a textured Mesh (not animated yet) to three.js blend files & source files of this part of the process: texturing.zip Eva textured on Blender 4. You can learn how I made it and download on step 4.

I use Photoshop to draw the texture, but before to start texturing, I have prepared a basic three.js template to view the changes on a webGL scene instead on Blender. Is recommended to reserve more space for important/detailed parts of the model as face, and reduce the size of less important parts as hair, legs or arms. First, I make the UV Mapping making all the seams that I consider necessary to obtain something like the below image. Mapping/Texturingįollowing this tutorial you could have the basic motions to made it. blend files & source files of this part of the process: modelling.zip Eva model has around 700 faces (1400 triangles) 3. I think there are many ways to model a character as 3D artists, I guess you have to understand how we will animate it and what performance you need to add more or less polygons. To become familiar with Blender there are a lot of videos & post related, I started with these tutorials .Īnd one more specific was this Creating A Low Poly Ninja Game Character Using Blender that was very helpful to make our character.

I made this character with Blender 2.77, but if you start this workflow in the future, try to use the last stable version in that moment. Is a good practice to draw the model in front & side view to use as background image/template on Blender. modelling.zip | texturing.zip | rigging.zip | animating.zip 1. blend files & source files of the different part of the process. Here is the github project with the code. This article aims to explain and share the work process I use to animate characters with Blender and to use them in WebGL projects based on three.js View final character animated (Double click to change the animation) The goal Double click to change the animation
