Question

Three.js r.71

我刚刚进入Three.js（真棒btw），但我遇到了问题。我正在尝试使用Socket.io和NodeJS在客户端之间传输几何和位置/缩放/旋转更改。在服务器上，我存储场景的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是正确的，我真的不明白矩阵正在做什么（并且仍然不太清楚它的用途）。

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

// 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（）设置不正确的比例

1 个答案: