Create a new texture, here and assign the R2D2_Diffuse.dds from the Maps directory. Select that one, and then select the texture tab.

Select one of the components of the model (e.g the left foot), and in the material tab you'll see a texture named R2D2.001. Now, we can just add the diffuse map, and we should see a correctly rendered model (also make sure you set the lights correctly, or else you'll get a completely black model). The advantage is that the UV mapping, luckily, is present for this model: What the problem is, is that the image files aren't correctly mapped in the obj files (I assume they are in the Element 3D file format, but I don't have After Effects or Element 3D, so can't check). So, there seems to be something wrong with the materials. When you import the model, and try to render it for the first time, or use material or texture viewport shading, you won't see a detailled R2D2 model, but just a gray one: We however, need to take a couple of steps to 'fix' the model in Blender. After the model is loaded you might need to zoom ut a bit to see the real model:Īlready looks cool, right? It's a relatively low-poly model, which uses textures to create the renders. For this short tutorial, I've used the R2D2 model. Navigate to the directory where you extraced the models and select the one you want to load. Remove the standard cube in the middle and use file->Import Once you've downloaded the models, extract them somewhere and startup Blender. In this case, however, we'll just use the obj format, which is also supported by three.js. An advantage, though, of using Blender together with Three.js, is that you can use the Three.js Blender plugin, to export models in a format easily readable by Three.js. I'm using Blender for the conversion and some testing, but you can use other tools as well. Use Three.js to render the final model.Resize and convert the texture files to a more manageable format.Use blender to explore the provided materials and textures.In this short article we'll take the following steps:

If your're impatient you can view the result here: In this short article, I'll show you the workflow of converting these models into a format more easy to use in Three.js, and show you how you can render these in your browser. This model pack, which is over 400MB big) contains highly detailed model with a number of very high-quality textures.

Recently video copilot released a free set of high-definition professional grade 3D models (which you can download for yourself from here). Render 3D Star Wars: The Force Awakens models in Blender and Three.js

Video copilot element 3d star wars