CODEWITHSUNDEEP
javascriptanimation3dthree.jsblender
FredL
FredL

Reputation: 1045

How to position a Blender animation export using Three.js

I've successfully exported an animation from Blender using the Three.js export utility, and can add it to a Three.js scene:

http://jsfiddle.net/frogt/6HxRP/1/

However, once I've added the object to my scene, I can't seem to position it manually. Here's the code I'm using to create the mesh and animation from the Blender export:

var callback = function (geometry, materials) {

        var skinnedMesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
            color: 'green'
        }));
        skinnedMesh.receiveShadow = true;

        THREE.AnimationHandler.add(skinnedMesh.geometry.animation);

        var animation = new THREE.Animation(skinnedMesh,
                "ArmatureAction",
                THREE.AnimationHandler.CATMULLROM
        );

        animation.interpolationType = THREE.AnimationHandler.CATMULLROM_FORWARD;

        // This positioning doesn't work....
        skinnedMesh.position.y = 50;
        skinnedMesh.position.x = 50;
        skinnedMesh.position.z = 50;

        animation.play();

        scene.add(skinnedMesh);

    };

and here's the animation in the Blender export:

"animation": {
    "name": "ArmatureAction",
    "fps": 24,
    "length": 4.125,
    "hierarchy": [{
        "parent": -1,
        "keys": [{
            "time": 0,
            "pos": [0, -0.998347, -0],
            "rot": [0, 0, -0, 1],
            "scl": [1, 1, 1]
        }, {
            "time": 2,
            "pos": [0, 3.92237, -0],
            "rot": [0, 0, -0, 1]
        }, {
            "time": 4.125,
            "pos": [0, -0.667432, 1.77636e-15],
            "rot": [0, 0, -0, 1],
            "scl": [1, 1, 1]
        }]
    }]

The position of the animation appears to be locked to the 'pos' array in the exported animation.

My question is: how can I manually position (and move) the animation once added to my Three.js scene?

Am using Three.js r67

Upvotes: 4

Views: 442

Answers (1)

FredL
FredL

Reputation: 1045

I managed to find a solution by modifying the Three.js source. Inside the THREE.Animation.prototype.update() method I replaced 

vector.x = vector.x + ( currentPoint[ 0 ] - vector.x ) * proportionalWeight;
vector.y = vector.y + ( currentPoint[ 1 ] - vector.y ) * proportionalWeight;
vector.z = vector.z + ( currentPoint[ 2 ] - vector.z ) * proportionalWeight;

with 

var xOrig = this.root.position.x;
var yOrig = this.root.position.y;
var zOrig = this.root.position.z;

vector.x = (vector.x + ( currentPoint[ 0 ] - vector.x ) * proportionalWeight) + xOrig;
vector.y = (vector.y + ( currentPoint[ 1 ] - vector.y ) * proportionalWeight);
vector.z = (vector.z + ( currentPoint[ 2 ] - vector.z ) * proportionalWeight) + zOrig;

This only applies to the X and Z axis, which is all I need for my specific application. However, this doesn't seem like the "correct" way to solve the problem.

Upvotes: 2

Related Questions