I have loaded an animated Blender model into LibGDX, but it is not displaying correctly. It is difficult to tell exactly what is happening. Just taking a guess, the pieces of my model seem to be rotating in both world space and local space.
Here are GIF animations of how it should look and how it appears in LibGDX:
The correct blender version:
The incorrect LibGDX version:
I'm really not sure where to start with this problem. I am using several different bone constraints, and I assume this might be the cause. Does LibGDX, fbx-conv, or even the .fbx file format simply not support certain blender constraints.
Here are just the relevant portions of my LibGDX code, in case I did something wrong:
Animation setup code:
Model model = assetManager.get("pump.g3db", Model.class);
instance = new ModelInstance(model);
instances.add( instance );
// Run all animations on a loop
for( Animation animation : instance.animations ) {
AnimationController controller = new AnimationController( instance );
controller.setAnimation( animation.id, -1 );
animationControllers.add( controller );
}
Render loop code:
Iterator<AnimationController> acIteratore = animationControllers.iterator();
while ( acIteratore.hasNext() ){
AnimationController ac = acIteratore.next();
ac.update( Gdx.graphics.getDeltaTime() );
}
Here is the .blend file, if anyone wants to look at the armature and constraints:
http://www.pasteall.org/blend/31195
Anyone have any ideas how to solve this problem, or at least what the cause might be?
My problem was caused by my settings on Blender's FBX exporter. To fix the problem, turn off the following two setting:
NLA Strips
All Actions
An explanation of these setting can be found on this page, under "Baked animation": http://code.blender.org/index.php/2014/06/supporting-game-developers-with-blender-2-71/
Here is a screenshot with the settings to be turned off outlined in red:
This answer is only relevant to Blender 2.71 or higher(probably)
Related
I’m begginer with aframe and I’ve an animated glb model (from Mixamo then Blender) on this page https://glitch.com/edit/#!/danseuse?path=index.html%3A30%3A7
It works correctly with this script :
<a-entity gltf-model="#danseuse"
id="danseuseHHP"
position="0 -.5 -6"
animation-mixer=" timeScale: .5 "
></a-entity>
But I would like the animation begin when I click on the glb model.
I read the post https://stackoverflow.com/questions/51058224/how-can-i-control-a-gtlf2-mesh-animation-in-aframe-with-onmouseover-event/69876030#69876030 but I dont understand the second part of the answer of this post (sorry I don’t know javascript).
I use the aframe-extra, how do I change the entity, with for exemple :
event-set__start="_event: click; ??????
Thanks for your help.
You've run into a few different problems here...
First up, event-set doesn't work well with component names with '-'s in them.
https://github.com/supermedium/superframe/issues/296
So using event-set is out (apart from this, it would probably work). You need to write a small component like this.
<script>
AFRAME.registerComponent('animate-on-click', {
init: function() {
this.el.addEventListener("click", (e)=> {
this.el.setAttribute("animation-mixer", "timeScale: .5")
});
}
});
</script>
Then you can include this on your object:
position="0 -.5 -6"
animate-on-click
></a-entity>
See this glitch...
https://glitch.com/edit/#!/animate-on-click
Now for the final problem (and the reason I used a different GLTF in my glitch).
Your GLTF appears to be a skinned mesh. I don't know much about raycasting with a skinned mesh (when I learn more I will come back & update this), but I do know it involves some complications.
See e.g. https://github.com/mrdoob/three.js/pull/19178
Using your GLTF model, I wasn't able to get any raycasting to work at all. So I think there is a further issue that's to do with your GLTF model, and not a problem with the code you posted.
Hope that helps a bit.
Update after investigatng the issues with raycasting on this model.
I haven't completely understood what is going on here, but as far as I can tell...
Raycasting is correctly checking against each body part.
The first check is against a bounding sphere - the idea is to check whether more detailed raycast calcs are worth doing. This is done just with the base model, without any of the bone transformations applied.
These bounding sphere checks consistently fail.
As far as I can tell that is because the base model components are tiny, and only get scaled up to proper size in the process of having the bone transforms applied.
Because THREE.js does the bounding sphere checks against the components before applying these bone transforms, there is virtually zero chance of the raycaster detecting any collisions.
Potentially you could make some changes to the model to address these issues, but I suspect it will be far simpler just to put an invisible plane directly in front of the model, and use raycasting against that to trigger the start of the animation.
Here's a glitch showing that solution:
https://glitch.com/edit/#!/danseuse2
I try to use threeGLTFLoader to load gltf ,problem with the material,the model is a man’s head but now i could see the back
here is the code:
var threeGLTFLoader = new THREE.GLTFLoader();
var objPositions;
threeGLTFLoader.load("../resources/untitled.gltf", function (gltf) {
model = gltf.scene;
model.name = "man";
model.scale.set(300, 300, 300);
root.matrixAutoUpdate = false;
root.updateMatrix();
root.add(model);
});
The link of 3D model
Without the model it's hard to guess what's going on here, but I'll wager a guess based on seeing this kind of back-is-in-front rendering before.
I think your glTF model probably has materials that are marked "alphaMode": "BLEND".
In most realtime 3D rendering systems, including ThreeJS, blended or translucent materials will disable the depth buffer, and can be rendered out of order. There are ways for some engines to fix or work around this, but they can cost performance and increase complexity.
For opaque materials in a glTF file, the best thing to do is leave alphaMode set to its default value OPAQUE. Only materials that really need to be translucent should be set to BLEND.
Ed Mackey’s answer on GitHub is a good explanation of why this is happening. If you’re the author of the model, it’s an issue you could fix by disabling transparency on parts of the model that aren’t meant to be transparent. If you’re not the author of the model, you can override the incorrect transparency settings after loading the model in three.js:
model.traverse((object) => {
if (object.isMesh) object.material.transparent = false;
});
This code will disable transparency everywhere on the model. In more complex cases you may need to select specific parts of the mesh to override, and that is easier to do in Blender, using Alpha Clip or Opaque modes.
I load a dae model created in Sketctup (https://graviditetsberegner.dk/square.skp) in Three.js. I found that dae models were the best regarding texture placement and hierarchical placement of the different components when going from Sketchup to Three.js. I load the model using the below code without any modification to meshes:
var modelLoader = new THREE.ColladaLoader();
modelLoader.load("https://www.graviditetsberegner.dk/square.dae", function (dae) {
model = dae.scene.clone();
scene.add(model);
...
The model loads fine, but when I rotate the camera (and sometimes just when it loads), it looks really blurry and white lines appear.
Is there an option or something I can set to make it looks smooth and without the white lines? I have tried antialias for the renderer without much effect.
A fiddle can be found here: https://jsfiddle.net/35wc6myf/
It looks like this in SketchUp:
Not sure about the export settings on your Sketchup file, but it looks like it's adding quite a few LineSegments objects with their color set to white. Could be that these exist in your scene hierarchy, but their visibility has been turned off, or they get added upon export. I was able to remove the white lines in your fiddle by adding this code right after you clone your scene:
model = dae.scene.clone();
model.children[0].children.forEach(child => {
if (child.type == "LineSegments") {
child.visible = false;
}
});
Result:
I have playing a little with clara.io and i want to reproduce an image done with it.
I have searched the web for days looking up to reproduce what they call "Realistic" rendering.
As you can see on the image the six round part have they own shadows on the (one piece) brick from multiple lights sources.
I have no idea how they done that, if it is a simple setup, or a complex shader.
the best i can do is that and i have no idea how to proceed to make and object shadowing itself depending of it's geometry.
any trails ?
actually you need:
renderer.shadowMapEnabled = true;
light.castShadow = true;
object.castShadow = true;
object.receiveShadow = true;
i know its a little counter-intuitive that both the light and the mesh have the same attribute "castShadow", but that's how it works.
also remember to check the near, far, and size of the shadow camera of your light if the shadow doesn't appear or appears incorrectly.
here is an example i made:
http://shahar.thenachts.com/threejs/examples/selfShadow.html
it takes some time to load the model (the model is the floor and walls) and it's textures, so be patient.
to see the code, right click anywhere and choose "inspect element".
ie. Actually it is a very simple setup. The THREE.Object3D has two attributes castShadow and receiveShadow You can achieve the effect you are looking for (ie. self-shadowing) by setting both to true
How make an Update function in Three.js, like in Unity3d?
I mean, that i create an object:
var torus = new THREE.Mesh(
new THREE.TorusKnotGeometry(60,20,100),
reflectionMaterial
);
and when i click on the body, i change a reflectionMaterial. But the image don't change, i see a not changed reflectionMaterial (last figure). Always redrawing a render image???
Thank's for attention. Sorry for my English (I'm from Ukrainian).
P.S.: I work with Three.js onn my netbook and on (not my) notebook. On netbook i don't see a shaders. Why?? Did the Three.js support Shader Model number 3 and 0?
If I understand your question, you are having issues changing a material after you click on something? You may need to change a flag depending on if you already have a material or not, there are some dependencies - check the link below:
material.needsUpdate = true;
There is an article on How to update things in Three.js