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

标签 javascript animation 3d three.js blender

我已经使用 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 轴,这是我特定应用所需的全部。但是,这似乎不是解决问题的“正确”方法。

关于javascript - 如何使用 Three.js 定位 Blender 动画导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23691406/

相关文章:

javascript - GWT 在 Internet Explorer 8 中不起作用

javascript - RegExp测试方法中的 "g"如何交替工作?

javascript - 每个卷轴都会带您到一个新的 div 以启用动画

javascript - 让动画运行多次

javascript - 获取一个按钮触发两个事件

Matlab 3D View 矩阵

java - 损坏的 Java 3D 图形

javascript - 如何修复“对象作为 React 子对象无效(找到 : object with keys {})

javascript - 多个日期选择器字段 id

c# - 在 Unity 中仅将纹理应用于立方体的某些面