How do I create a Skeleton and attach it to a pre-loaded Model (FBX) with Three.JS?

Viewed 10

I'm fairly new to Three.JS and Javascript in general so please bear with me. Basically, I have a model exported from C4D that doesn't have a skeleton. What I'm trying to create is a skeleton to attach to the model so that I can 'animate' onMouseMovements with it, having it respond to the cursor position. This is what I currently have at the moment:

loader2.load(gloopFBX.href, function(e){
    console.log('FBX Loader is Working!')
    const model = e;
    mixer = new THREE.AnimationMixer(e);
    const action = mixer.clipAction(e.animations[0]);
    action.play();
    scene.add(model);
    model.receiveShadow = true;
    model.getObjectByName('Slime').material.wireframe = true;
    const face = model.getObjectByName('Face');

    var plane = new THREE.Plane(new THREE.Vector3(0,0,1), 0);
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    var intersectPoint = new THREE.Vector3();

    window.addEventListener('mousemove', function(e){
        mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse,camera);
        raycaster.ray.intersectPlane(plane, intersectPoint);
        intersectPoint.z = 200;

        face.lookAt(intersectPoint);
    });

    console.log(model);    
});

This moves the face of the model independently from the body. What I want to achieve is to move the entire body naturally. Here is the Skeleton Code:

//Creating Skeleton
const bones = [];

const baseBone = new THREE.Bone();
const middleBone = new THREE.Bone();
const topBone = new THREE.Bone();

baseBone.add(middleBone);
middleBone.add(topBone);

bones.push(baseBone);
bones.push(middleBone);
bones.push(topBone);

middleBone.position.y = 50;
topBone.position.y = 100;

const slimeSkele = new THREE.Skeleton(bones);

Entering 'slimeSkele' into the console does show that a Skeleton object being created, and I'm not getting any error messages. However, I have no clue where to go from here. I don't even know how to display the skeleton in my canvas (SkeletonHelper() doesn't work for me for some reason, I assume that's meant to pull existing skeletons from models). Any help is appreciated!

0 Answers
Related