Анимация в three.js модернизированной модели в блендере - PullRequest
Новая
       46

Анимация в three.js модернизированной модели в блендере

0 голосов
/ 05 января 2019

У меня есть 3d модель, которую я установил в blender, а затем экспортировал в three.js. Я пытаюсь оживить это, как сделать это (ходить, прыгать, бегать и так далее).

Я пытался добавить элементы управления и манипулировать отдельными частями тела (перемещая кости). В моей сетке 42 кости. Но это не работает так, как должно быть. Я не хочу экспортировать уже анимированную модель в блендер. Мне нужно, чтобы он был полностью анимирован в самом ThreeJS.

index.html 

function init(){
    /*creates empty scene object and renderer*/
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000 );
    renderer = new THREE.WebGLRenderer({antialias:true});

    renderer.setClearColor(0x838510);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled= true;
    renderer.shadowMapSoft = true;

    /*add controls*/
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', render );

    camera.position.x = -5;
    camera.position.y = 8;
    camera.position.z = 18;    
    camera.lookAt(scene.position);

    /*datGUI controls object*/
    guiControls = new function(){
        this.Bone_0 = 0.0;
        this.Bone_1 = 0.0;
        this.Bone_2 = 0.0;
        this.Bone_3 = 0.0;
        this.Bone_4 = 0.0;
        this.rotationX  = 0.0;
        this.rotationY  = 0.0;
        this.rotationZ  = 0.0;

        this.lightX = 131;
        this.lightY = 107;
        this.lightZ = 180;
        this.intensity = 1.5;       
        this.distance = 373;
        this.angle = 1.6;
        this.exponent = 38;
        this.shadowCameraNear = 34;
        this.shadowCameraFar = 2635;
        this.shadowCameraFov = 68;
        this.shadowCameraVisible=false;
        this.shadowMapWidth=512;
        this.shadowMapHeight=512;
        this.shadowBias=0.00;
        this.shadowDarkness=0.11;

        this.scene = function(){
            console.log(scene);
        };

    }


/*add loader call add model function*/
    loader = new THREE.JSONLoader();
    loader.load( 'modelling/LASTMODEL3.json', addModel );


    /*adds controls to scene*/
    datGUI = new dat.GUI();

    /*edit bones*/
    datGUI.add(guiControls, "scene");
    var cfolder = datGUI.addFolder('Controls');

    cfolder.add(guiControls, 'Bone_0' ,-0.1, 0.1);
    cfolder.add(guiControls, 'Bone_1' ,-0.1, 0.1);
    cfolder.add(guiControls, 'Bone_2' ,-0.1, 0.1);
    cfolder.add(guiControls, 'Bone_3' ,-0.1, 0.1);
    cfolder.add(guiControls, 'Bone_4' ,-0.1, 0.1);
function render() { 
    spotLight.position.x = guiControls.lightX;
    spotLight.position.y = guiControls.lightY;
    spotLight.position.z = guiControls.lightZ;

    scene.traverse(function(child){
        if (child instanceof THREE.SkinnedMesh){  

            child.rotation.x += 0.00;
            child.rotation.y += 0.00;
            child.rotation.z += 0.00;

            child.skeleton.bones[0].rotation.y = guiControls.Bone_0;
            child.skeleton.bones[1].rotation.z = guiControls.Bone_1;
            child.skeleton.bones[2].rotation.x = guiControls.Bone_2;
            child.skeleton.bones[3].rotation.z = guiControls.Bone_3;
            child.skeleton.bones[4].rotation.z = guiControls.Bone_4;
}
        else if  (child instanceof THREE.SkeletonHelper){
            child.update();
        }
    }); 

}

Вот полный код А также файл модели с кодом

Я хочу, чтобы сетка следовала за костями, как в блендере. Любая помощь будет оценена.

...