Question

我有一个使用three.js的简单3D模型编辑器。

这是我的相机：

new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.01, 10);

这是我的网格几何：

new THREE.BoxGeometry(0.3, 0.3, 0.3);

我正在使用THREE.TransformControls缩放网格。

当网格具有单位~100时，缩放工作完全正常，但当对象介于0和1之间时，缩放非常慢。使用 slow ，我的意思是当您将缩放滑块拖动到画布大小的一半时，网格的大小会增加或减少几个百分比。我对其他TransformControls模式没有这个问题。

JSFiddle demonstrating slow scaling

我可以切换到更大的单位，但我想知道这是否可以解决，而无需在我的应用程序代码中替换所有单位。

所以我的问题：在THREE.TransformControls中，有没有办法在处理小单位时以更自然的方式将拖动转换为缩放？

Answer 1

问题在于TransformControls在1/50函数中将鼠标移动的距离缩小了看似任意的量（onMouseMove）：

        } else if (_mode == "scale") {

            point.sub(offset);
            point.multiply(parentScale);

            if (scope.space == "local") {

                if (scope.axis == "XYZ") {

                    scale = 1 + ((point.y) / 50);

                    scope.object.scale.x = oldScale.x * scale;
                    scope.object.scale.y = oldScale.y * scale;
                    scope.object.scale.z = oldScale.z * scale;

                } else {

                    point.applyMatrix4(tempMatrix.getInverse(worldRotationMatrix));

                    if (scope.axis == "X") scope.object.scale.x = oldScale.x * (1 + point.x / 50);
                    if (scope.axis == "Y") scope.object.scale.y = oldScale.y * (1 + point.y / 50);
                    if (scope.axis == "Z") scope.object.scale.z = oldScale.z * (1 + point.z / 50);

                }

            }

        }

此参数（50）有效地控制对象缩放的“速度”（与拖动鼠标的距离相比）。您需要修补TransformControls才能更改它;通过将50更改为更小的内容（例如1。

），我可以更好地发挥作用

        } else if (_mode == "scale") {

            point.sub(offset);
            point.multiply(parentScale);

            // by default this is 50; set it to smaller values if you're using smaller units
            scaleSpeed = 1;

            if (scope.space == "local") {

                if (scope.axis == "XYZ") {

                    scale = 1 + ((point.y) / scaleSpeed);

                    scope.object.scale.x = oldScale.x * scale;
                    scope.object.scale.y = oldScale.y * scale;
                    scope.object.scale.z = oldScale.z * scale;

                } else {

                    point.applyMatrix4(tempMatrix.getInverse(worldRotationMatrix));

                    if (scope.axis == "X") scope.object.scale.x = oldScale.x * (1 + point.x / scaleSpeed);
                    if (scope.axis == "Y") scope.object.scale.y = oldScale.y * (1 + point.y / scaleSpeed);
                    if (scope.axis == "Z") scope.object.scale.z = oldScale.z * (1 + point.z / scaleSpeed);

                }

            }

        }

工作小提琴：http://jsfiddle.net/494uvxfg/。

three.js r68

使用THREE.TransformControls缩放小对象

1 个答案: