Three.js - Animating Blender Models - catchvar. A few months ago I experimented with using Blender to create 3D models. First, I created a tree that you can see in previous posts. Then I had the idea to create a "troll", that could be used in a game. I followed Blender tutorials and created a humanoid model. Then I rigged the model to move naturally. Finally, I created two animations with the model. Get Three.js For this post I'm using Blender 2.9.
Git clone or Export your Blender animation Open your animation file in Blender. Convert .obj to .js Inside my directory I now have a single troll.obj, a troll_walking_ .obj for each frame, and a troll_standing_ .obj for each frame. Python ~/Three.js/utils/exporters/convert_obj_three.py -i ~/troll/troll_texture.obj -o ~/troll/assets/obj/troll.js -m "/full/path/to/troll/troll_*.obj" change your directories and filenames as needed. Three.js: Very Basic Animation. My previous post described how I created a simplistic 3D model with Blender and how I imported that into a three.js 3D scene.
In this post I look at how a Blender model can be loaded and animated with the aid of the three.js library. Oh, it seems a rather long post too. Give yourself a treat if you manage to read all of the way through! Work in Blender To begin I returned to Blender and created a new 3D model. As I write this post I’m trying to recall where I located the Blender Python script file that allowed me to export a javascript (.js) file from Blender. In order to export my model from Blender I used the Export > Three.js (.js) option from the Blender File menu; thus calling upon the Python export script that I’d previously installed.
Export option in Blender From the Blender export window I then selected the options shown in the next image. Blender Export Options This gave me a .js file that contained the definition of my simple model. Onto the interesting bit… The Code Conclusions. Three.js: Simple Collision Detection. I’ve been spending some time trying to work out how to perform basic collision detection with the three.js library.
After a combination of Googling, looking at the three.js source code and looking at the sample code on the three.js github pages I’ve managed to get something working. I found the best collision detection example at Mr.Doob’s three.js repository on github. In fact that are a number of examples there. These examples use a couple of utility files, namely CollisionUtils.js and Collisions.js that can be found along with the example code.
I’m pretty sure that I checked out the latest revision of the three.js code from github but the CollisionUtils.js and Collisions.js utility files that are available here didn’t seem to come with it. Three.js: Importing a Model. This post discusses a small piece of code that uses the three.js library to load a 3D collada scene.
Upon starting to write this blog post I thought I’d take a look at some of the problems I’d encountered on the way. To my surprise I realised that I probably had enough information for two posts rather than just one. This post will look at the exporting of a 3D model from Blender to be used with three.js. I’ll create another post to look at how I then managed to produce a 3D model in Blender and animate it with three.js.
Blender I had first used Blender several years ago, I even bought one of those ‘For Dummies’ books, but the Blender interface has changed since I last used the software and viewing a video seemed a nice quick way of diving back into it. After some hours playing around with what I’d seen in the video tutorials I managed to make an extremely crude-looking robot. In order to be able to export my model from Blender this post came in handy; again on the Mr. The Source. Mrdoob/three.js. Js - JavaScript 3D library.