Three.js Object3D.applyMatrix() 设置不正确的比例

Question

Three.js r.71

我刚刚进入 Three.js（顺便说一句，太棒了）但我遇到了问题。我正在尝试使用 Socket.io 和 NodeJS 在客户端之间流式传输几何和 position/scale/rotation 更改。在服务器上，我存储 JSON 客户端之间场景和流对象变化的表示。

当对象的矩阵发生变化（位置、比例、旋转）时，我将新矩阵传输到服务器并将其转发给其他客户端。在其他客户端上，我使用流对象（源对象的矩阵）调用 applyMatrix()。

我运行遇到的问题是，当调用 applyMatrix(sourceMatrix) 时，它似乎将现有比例乘以在 sourceMatrix 中找到的比例。例如，当前对象的比例为x: 2，y:1，z:1，我应用了一个相同比例的矩阵，调用applyMatrix后，目标对象的比例为x:4, y:1, z:1.

这对我来说似乎是一个错误，但我想仔细检查一下。

// Client JS:
client.changeMatrix = function (object) {

    // Set the object's scale to x:2 y:1 z:1 then call this twice.

    var data = {uuid: object.uuid, matrix: object.matrix};
    socket.emit('object:changeMatrix', data);

};

socket.on('object:matrixChanged', function (data) {

    var cIdx = getChildIndex(data.uuid);

    if (cIdx >= 0) {
        scene.children[cIdx].applyMatrix(data.matrix);

        // At this point, the object's scale is incorrect

        ng3.viewport.updateSelectionHelper();
        ng3.viewport.refresh();
    }

});

// Server JS:
socket.on('object:changeMatrix', function (data) {

    socket.broadcast.emit('object:matrixChanged', data);

});

Answer 1

@WestLangley 说得对，我真的不明白apply matrix 是干什么的（现在也不太清楚它的用途）。

我通过手动设置源矩阵中的每个元素并调用分解解决了我的问题：

// Client JS:
socket.on('object:matrixChanged', function (data) {

    var cIdx = getChildIndex(data.uuid);
    var child = null;
    var key;

    if (cIdx >= 0) {
        child = scene.children[cIdx];

        for (key in child.matrix.elements) {
            if (child.matrix.elements.hasOwnProperty(key)) {
                child.matrix.elements[key] = data.matrix.elements[key];
            }
        }

        child.matrix.decompose(child.position, child.quaternion, child.scale);
    }
}

不幸的是，一旦服务器拾取 Matrix 对象，调用：

child.matrix.copy(data.matrix);

不起作用。这就是我最终手动设置每个元素的原因。

Three.js Object3D.applyMatrix() 设置不正确的比例

Three.js Object3D.applyMatrix() setting incorrect scale

javascript

node.js

three.js

socket.io