Hi everybody. thanks in advance for your help.
I am doing a small university project in three.js. One of the requirements is to implement an animation using tween.js but without importing it from blender or external models. So, i would like to import a gltf model (taken from three.js repository) and animate it trough its skeleton procedurally. I succeded into loading the model with a skeleton:
But now I don’t know how to reference bones and try to code a walk animation with tween.js. Once i loaded the model, can i switch to a skinned mesh and rotate bones’joints? if yes, how? Any suggestion will be very appreciated, thanks.
Just in case it is need this is the code i use to load the model:
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'models/character/robot1/RobotExpressive.glb',
// called when the resource is loaded
function ( gltf ) {
model = gltf.scene;
scene.add( model );
model.scale.set( 2, 2, 2);
model.traverse( function ( object ) {
if ( object.isMesh ) object.castShadow = true;
} );
var box = new THREE.Box3().setFromObject( model );
model.position.set(0, -box.getSize().y/2 +0.5, 0);
helper = new THREE.SkeletonHelper( model );
helper.material.linewidth = 5;
helper.visible = true;
scene.add(helper);
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
I suggest you start with the documentation on Skeleton. You will need to fish out relevant bones and modify their transforms. I suggest you stick to rotations only, for that you might like the lookAt API.
Actually I think it can be implemented easily… I found this example from Learning Three JS book:
loader = new THREE.JSONLoader();
loader.load('../assets/models/hand-1.js', function (geometry, mat) {
var mat = new THREE.MeshLambertMaterial({color: 0xF0C8C9, skinning: true});
mesh = new THREE.SkinnedMesh(geometry, mat);
Where it is very easy to get a skinned mesh, but with gltf loader there is no callback that gets geometry and materials of the model
I think you should do more reading. I suggest going through examples and the documentation. It might take a couple of weeks to do a thorough job for a beginner, you might be able to finish quicker. If you just want to hack something together - it should take a lot less time.
Based on your questions I think you have a long road ahead of you. You might want to come up with very specific questions to post here, as you go along. It’s going to be a fun journey - I hope.
Sorry usnul, do not want to be rough but you are not forced to answer. I asked a simple question: is there any easy way to switch from gltf model with skeleton to skinned mesh?. If I am asking is not because I am lazy. I am stuck. I have read all the documentation available but I did not succeed. Since my question is simple you can either answer yes you can do it and maybe give some hint or answer no you don’t end explain why. If you link to me to documentation and that’s all is useless i’ve already been there This is just because your answers are no useful at all. Please, Don’t take it personally.
If this post was simply about loading a SkinnedMesh, it would be quite simple.
Traverse through the gltf scene, grab your skinned meshes and add them to the scene (and also handle animation data if animation data is baked into file). Example below:
However this post is also asking about procedurally programing a run animation within the app. For that Unsul is correct and you will need to (intimately) understand the THREE.Skeleton (property of THREE.SkinnedMesh) system along with the accompanying bone hierarchy (property of THREE.Skeleton).
Hey @Nicola_Di_Santo, no issue. I understand that it can be frustrating to get the information you need when you’re stuck.
Based on my understanding, you are currently aware of a very tiny portion of what Three.js can do, from what I can deduce, you do not understand GLTF format in any detail either. Hence, why I recommended learning more, in a broad sense.
If you just want to brute-force your way through this assignment - you can do that, I believe, but you will not understand what you’re doing without investing a fairly decent amount of time.
In your original post, you have quoted a piece of code:
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'models/character/robot1/RobotExpressive.glb',
// called when the resource is loaded
function ( gltf ) {
model = gltf.scene;
scene.add( model );
model.scale.set( 2, 2, 2);
model.traverse( function ( object ) {
if ( object.isMesh ) object.castShadow = true;
} );
reading that code made me believe that you actually understand what GLTF is and how to extract a (skinned) mesh from it. That is why I pointed you to the documentation that I did.
I hope I have explained my reasoning sufficiently to dispell your annoyance with my answer. All I have to go on is what I see in front of me, and I make mistakes when guessing. It was not my intention to upset you. To avoid further grief - I’ll not post in this topic anymore.
Again, I hope you’ll have a good journey with this task.
