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.
Related
I have two character meshes, both with identical skeletons. I’m wanting to import another .glb file containing animations for these characters, and then apply these animations to each character. I made a post on the Babylinjs forum, but the one recommended solution doesn't seem to work.
Here is my post in the Babylonjs forum: https://forum.babylonjs.com/t/how-to-import-animation-groups-then-assign-them-to-different-meshes/36187
And here is the playground that I'm currently struggling with: https://playground.babylonjs.com/#AHQEIB#1825
I'm investigating the possibility to be able to render 3D objects in a web application. Imagine I have a 3D cube looking something like the left in the figure below.
I then want a slider that sets a threshold value of what to be rendered. Let's say the value was to be set to 1.2. Then I would want only the red parts of the cube to be visible, like to the right in the figure. I also (of course) want to be able to rotate the object freely.
In the figure the cube consists of points in a grid, but I would like a nice looking model out of it instead, like an isosurface.
Is this possible to achieve in an online application via React or something alike? I've read a bit about Three.js but I have only seen usages of pre-made models.
So in short, what I'm asking is if it is possible to go from points -> model -> view, ideally without having to reload the page.
Take a look at this project, it's made with Three.js, on its site you will find more detailed information, but I would recommend creating the model in a 3D program like Blender and then playing with the textures and geometries to achieve the desired effect.
Also check out OrbitControls, a very simple tool to explore your 3D scene
I did this project that responds to the microphone, it's a bit messy but you can play with it and find other projects on my github
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.
I am attempting to take a babylon.js model in the .babylon format and export it to .obj or .stl (any other format readable by maya). I found no method to do this with babylon.js itself, however three.js has an save as obj function in its editor. The editor is able to load the babylon.js object fine, it displays it however when I attempt to save it, I get an empty file, this happens for any option other than geometry or scene.
Is there something I am missing that needs to be done in order to complete the export?
This is a bug that has been fixed in the the dev branch. http://threejs.org/editor/ will be updated next week (15th).
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.