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

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.