Blender export with textures and animation example for Three.js?

[ghost]

Hi,

I'm wondering if someone has created a Three.js example of the blender export with textures and character animation?

I've had a look at the webgl_collada.html example which comes with Three.js. It's a great and simple example, but I would really appreciate a similar example of the Blender exporter. The webgl_scene_test_blender.html example doesn't contain textures or animation, as far as I can see.

I have gotten the impression that the blender exporter is the recommended way of getting models from Blender into Three.js. I'm still trying to learn Three.js, and think that such an example would be useful for other people trying out Three.js also.

Thanks for your great work on Three.js!

Regards, Andreas R.

[alteredq]

I did these using Blender exporter:

http://alteredqualia.com/three/examples/webgl_shadowmap_particles.html http://alteredqualia.com/three/examples/webgl_skull.html http://alteredqualia.com/three/examples/webgl_trex.html

No animated textured character, I didn't find any good model so far, but at least in theory it should work.

[ghost]

Thanks for the response and examples, alteredq.

I would still really appreciate an example of an animated textured character exported from Blender. This would be a very common use-case in game development using Three.js.

[alteredq]

If you find some good Blender model with animated textured character I can make an example.

Good model means mainly something that is ready for real time (as opposed to models made for movies):

• works out-of-box in Blender, you press play and it shows the animation (model is rigged and has animation)
• not too many vertices (should have hundreds to max few thousands of triangles, smaller the better)
• not too long animation (should be max few dozens of keyframes, loops like walk / idle cycle are preferable)
• not too large / too many textures (e.g. not using 2K texture just for eyeball)
• should be just a single mesh, single material, single texture, not composed of different parts / submeshes
• no weird stuff going on in animation (numbers and order of faces and vertices stay the same throughout the animation)
• no weird materials (no procedural textures, no multi-texturing, no texture modifications, no nodes, no shaders, should be as vanilla as possible)
• has permissive license (like some Creative Commons or public domain)

So far I only found: a) nice simple models, rigged but without any animations, b) simple untextured low-poly dummy models with animation (this is what I used) or c) decent models with some animations but too heavy and too complex (like stuff from Sintel).

It should be something like this, just using textures instead of face colors, and be in Blender instead of sequence of OBJs:

http://alteredqualia.com/three/examples/webgl_animals.html http://alteredqualia.com/three/examples/webgl_zombies.html

[ghost]

What about a Blender port of the webgl_collada.html example? It has textures and animation, and is possible to import into Blender.

[alteredq]

Good idea ;)

Here is your example:

http://alteredqualia.com/three/examples/webgl_collada_blender.html

https://github.com/alteredq/three.js/commit/457be13975345dcd53f5a07f38ac09b5bada5f0b

I added also blend file so you could reproduce whole process. I had to do following:

• set far clipping plane of Blender viewport much larger as this Collada model is too big
• restrict animation playback range to frames 1-24 (this is done on JS side for Collada, though there is no need for junk frames to go into file and then into memory)
• export with animation checked
• I put frame step to 1 (meaning every frame in Blender's range would go to JSON) but usually you can skip some frames if model has too dense keyframes as we anyway interpolate morphs on playback (60 fps would be overkill, 24 fps is ok, many times you can get away with much less, e.g. walk cycle in example I posted is just 11 frames for 2 seconds)

[ghost]

Thanks a lot! That's a pretty cool example, and the performance is pretty good given that there are so many models.

[kshitizrimal]

Hi, sorry to re-open this thread. I am also new to three.js and have same problem but mine is not resolved by the above example. i simply copied the provided example and changed the .js model to the one that i made using blender. but the collada model load perfectly and animate with texture but mine model (exported js)doesn't it throws this message in console

PERFORMANCE WARNING: Attribute 0 is disabled. This has signficant performance penalty webgl_collada_blender.html:1 Uncaught TypeError: Cannot read property '0' of undefined webgl_collada_blender.html:75 251 PERFORMANCE WARNING: Attribute 0 is disabled. This has signficant performance penalty webgl_collada_blender.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.

i simple changed the location of monster.js to the the one i have already, in my case its "bird_final.js"

i have a bird model with uv texturing and bone animation exported using three.js export addon in blender.

[WestLangley]

As stated in the guidelines, help requests should be directed to stackoverflow. This board is for bugs and feature requests.

[kshitizrimal]

what about the main question, isn't that a help request??

[WestLangley]

The current help policy was implemented after this issue was posted.

[kshitizrimal]

how can i post it on stackoverflow as i have to completely rewrite the whole situation whereas, this situation is a perfect match to the problem i am facing

[kshitizrimal]

i think there is some problem with the code posted here because the code i directly copied from here, making sure all the required models and libraries are correctly linked in script tag... is also not working without any modifications.

[makranelhoucine]

Hello ,I am trying to load a *.js model created by Blender to my page

however, when I load the model the texture is disappeared,but when I load just a part of my model not all (my big model is a school for example i load just a classroom ) with the same program ,the texture is right ,how can I export the model with texture ?

[WestLangley]

As stated in the guidelines, help requests should be directed to stackoverflow. This board is for bugs and feature requests.