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

【问题标题】：Three.js Object3D.applyMatrix() setting incorrect scaleThree.js Object3D.applyMatrix() 设置不正确的比例
【发布时间】：2015-08-05 21:06:35
【问题描述】：

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

});

【问题讨论】：

你不明白applyMatrix()在做什么。查看该方法的源代码。
@WestLangley 感谢您的指点。我之前仔细研究了代码，但我对 3D 渲染真的很陌生，并且不太了解矩阵是如何使用的。我想我现在可以使用它，尽管可能有更好的解决方案
applyMatrix( matrix ) 将矩阵表示的变换应用于现有变换——它不会覆盖现有变换。
如果 applyMatrix 方法不正确，有没有简单的解决方案？将每个元素重新应用于矩阵似乎有点冗长。

标签： javascript node.js socket.io three.js

【解决方案1】：

@WestLangley 是正确的，我真的不明白 apply 矩阵在做什么（并且仍然不太清楚它的用途）。

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

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

没有用。这就是我最终手动设置每个元素的原因。

【讨论】：

matrix.copy( newMatrix ) 后跟 matrix.decompose() 应该可以工作。