如何使用Three.js定位Blender动画导出

How to position a Blender animation export using Three.js

本文关键字：动画 Blender 定位 何使用 Three js      更新时间：2023-09-26

我已经使用Three.js导出工具成功地从Blender导出了一个动画，并且可以将它添加到Three.js场景中:

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

然而，一旦我将对象添加到我的场景中，我似乎无法手动定位它。以下是我用来从Blender导出创建网格和动画的代码:

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);
    };

这是Blender导出的动画:

"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]
        }]
    }]

在导出的动画中，动画的位置似乎被锁定在'pos'数组中。

我的问题是:我如何才能手动定位(和移动)动画一旦添加到我的Three.js场景?

我用的是Three.js r67

我设法通过修改Three.js源代码找到了解决方案。在THREE.Animation.prototype.update()方法中，我替换了

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;


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;

这只适用于X和Z轴，这是我的特定应用程序所需要的。然而，这似乎不是解决问题的"正确"方法。

相关文章：