We Keep Coding

Load a Blender Animation in Three.js using the Three.js (JSON) exporter

I am making my first steps using JavaScript and playing with Three.js too.
I am learning how to export and load a Blender animation to Three.js and to make it I am using this example from the Three.js website: http://threejs.org/examples/#webgl_morphtargets_horse
I made a Blender animation (http://s000.tinyupload.com/?file_id=07429365581548704592) and when I export it an I load it to Three.js using the same code it doesn't run.
Do you know why I can't see the animation? I don't know if it is a limitation of the exporter or if it is a problem of my animation.
Thank you

Having spent many hours trying to get Blender animations working with the current release of three.js it is my conclusion that it is functionally if not completely impossible.
I posted a question here about this awhile back. I ended up having to answer my own question. I cover the convolutions you have to go through to get one of the examples (the simplest) working from the .blend file supplied with three.js itself.
The official examples and documentation recommend using ObjectLoader to load exports from Blender, but this doesn't work at all with the current three.js animation system. The new animation stuff uses skinned meshes, and if you look at the ObjectLoader source (src/loaders/ObjectLoader.js) you'll see it doesn't have any logic which uses THREE.SkinnedMesh. The new animation mixer, THREE.AnimationMixer, is not covered in the official three.js documentation.
Further, the Blender exporter is, depending on how you look at it, either very flaky or just plain broken. I go into greater detail about this in the question I linked above, but for example the exporter changes the state of the model: you have to go into pose mode, select all your bones, Alt-G and Alt-R to reset them to rest mode, then select the mesh and go into object mode before you do an export, and the export will transform all the bones back, so if you just export and then immediately export again, for example, you'll get inconsistent results.
From all of this I conclude that importing Blender animations into three.js is effectively if not completely broken, so if you're working on a project for immediate implementation you need to either change your pipeline to not use Blender or change the render end to not use three.js.

Animate MakeHuman character with BVH using Three.js

I'm trying to animate a mesh via it's skeleton on a webpage using a BVH. Here's the overall process of what I'm trying to do:
Make a character using MakeHuman and export (mhx format? seems to work best).
Import the character into Blender.
Retarget to a BVH using the MakeWalk plugin for Blender.
Export the character to json using the Three.js exporter.
Export the BVH (not sure if this is necessary, but I figured I might have better luck getting the BVH to match up with the skeleton after retargeting)
Load the character into a web page using Three.js
Animate the character using a BVH.
The animation looks great in blender. I'm trying to use the JavaScript BVH viewer code from here modified to use the skeleton created by MakeHuman instead of it creating a skeleton from the BVH data. Whenever I try to animate the character, it gets very distorted.
Here's the desired result (more or less) rendered from Blender:
And this is what is happening on the webpage:
As you can see, it's getting totally messed up. I also had to zoom way out in order to see the whole image.
I've tried using different rigs, different file formats, resaving the BVH after retargeting, you name it. I also tried to follow the example here (scroll down to see the instructions), but it says to delete the armature modifiers and when I do that, no bones get exported and Three.js throws an error.
I am at a loss. Is there an up-to-date example somewhere that shows how to do what I'm trying to do?

The same thing happened to me when I exported from Blender to Three.js.
The solution that worked for me was (after step 3 in your list) to ensure in Blender that there were no object rotations still that hadnt been applied (ctrl-a). In other word the skeleton and the mesh must have no additional rotations or scaling.

Create custom .OBJ / .MTL file and render it with three.js

I tried to create a simple blender model, export it to .obj/.mtl and render it with three.js. But something doesn't work. I downloaded (and uploaded) the complete official three.js-demo. The objmtl-loader works fine. With the original models.
But if I create a new file in blender, import the original obj-model (from the demo), then add a simple cone and export it again to obj, on my demo-page everything will be shown except my cone.
I compared every simple param (cone <-> imported model) - no difference.
My demo-page
My blender-file
What do I have to do to get a render-able obj-model-export from blender?
(I tried multiple file formats, but for my usecase Wavefront (obj) is the best)

Indeed, it must be something with your Blender export.
Not sure how they play exactly but changing these settings in Blender, I can see your Cone:
In Export > Wavefront, check Objects as OJB Groups
Select the Cone, Edition mode, Make Normals Consistent
I understand the first change the type of the Cone from Object3D to Mesh, and the second let the texture to be placed on it.
Hope it helps

How to import model and associated textures into three.js from Blender?

I'm new to Open/WebGL and am having issues getting the textures/skins from a downloaded Blender model to show up in three.js. I can verify from Chrome's Network tab that it is downloading all of the texture files, but for some reason they are not being rendered.
I am using the webgl_loader_collada.html example as a basis to import a sample 3D model from blender into three.js.
For input, I'm using the MESSENGER model available from the NASA website. For reference, the full gallery of NASA 3D Models can be seen here.
My current steps:
Download and open the model in Blender
File->Export->Collada (.dae)
To view:
Modify a copy of threejs/examples/webgl_loader_collada.html to point to the exported .dae file
Remove the scaling on line 59.
Using the default options in blender export the resulting rendering is devoid of all textures. If I enable "Include Material Textures" I end up with the gold coloring on the main part of the model, but none of the other textures are mapped and the solar panels furthermore become completely black. Alternatively, if I also check "Include UV Texture", I get an all-gray rendering with no textures.
I have also tried the three.js JS exporter plugin for Blender, but in that case (using the appropriate demo template) all I get is a JS exception "Cannot read property 'opacity' of undefined".
Am I doing something wrong in the translation process, or is this a problem with the source model? If the latter, how could I go about fixing either the original model or its exported form?
thanks,
- David

Very nice project, thanks for the link.
For the collada export
don't include UV textures
include material textures
don't copy (you can use the provided texture images)
double check textures paths in the .dae file, in the <library_images> tag, use relative ones
I tried on my own, here if you want https://github.com/vincent/three.js-nasa,
but it's not perfect, for example the foil effect with the normal map is not used.

Perhaps try the GLTF format instead of collada? It is a more modern format designed for realtime/web asset delivery and being widely adopted.
Blender exporter:
https://github.com/KhronosGroup/glTF-Blender-Exporter
Once you have exported as .glb file, you can drag it on here to check it:
https://gltf-viewer.donmccurdy.com/
Then use the THREE.GLTFLoader() in THREE to load it.

Three.js - ColladaLoader - Animated model (DAE) - Black texture

I loaded a DAE file based on the ColladaLoader example. I exported from Maya 2012, including a skin. I already had to fix 1 thing by adding the "skeleton" tag in the .dae file otherwise I'd get the error Couldn't find skin. Then I thought if thats a problem perhaps I need to change the localized url of the skin material to just name.jpg because they are in the same folder. But that didn't work.
So my question is: Am I doing something wrong? Or missing something? Already tried of few techniques of editing the material afterwards, they did work but then the model stopped animating.
You can see it live here: http://www.mariusposthumus.nl/playground/webgl

Try exporting with OpenCollada instead:
https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools

Black texture appear when you apply compressed file format texture like png, jpg, tga, or dds , use bmp (bitmap uncompressed) instead it will work.
I've had the same problem but i solved it in this way, seems that colladaloader don't read compressed file format.
It's an old issue that i've had also when i made my first application in OpenGL.
To read compressed file format you need to decode it, and this take a lot of time and a lot of more coding.... ;-)