(Three.JS) 用于翻译的转换控件（大小问题）答案

【问题标题】：(Three.JS) Transform controls for translation (Size Issue)(Three.JS) 用于翻译的转换控件（大小问题）
【发布时间】：2018-07-28 17:24:06
【问题描述】：

我正在为我的项目自定义 three.js 中可用的转换控件。我已经改变了旋转部分，现在正在处理翻译部分。如果您在翻译 Gizmo 中注意到，中心有一个 XYZ 八面体。我已经删除了所有其他平面和箭头，并仅在该中心网格上编写了所有功能，这工作正常。现在我只遇到一个小问题，那就是那个控制器的大小和位置。我将该 Octahedron 更改为 boxGeometry 并编写代码以使该控制器的大小与所选对象的大小完全相同。为此，我想使控制器的大小与 boxHelper 的大小相同，它们充当对象的轮廓。当我在示例代码中尝试此逻辑时，我在其中创建了一个盒子，并获取盒子助手的大小并创建另一个相同大小的盒子，它工作正常。但是当我在threejs转换控件中编写相同的代码时，结果不一样。

下面是几何代码初始化

 XYZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.1, 0.1, 0.1 ), pickerMaterial )]],

然后我在附加到任何对象时得到 box3 的大小

  this.addBoxHelper = function () {
        this.removeBoxHelper();

        if(this.object.box3) {
            **this.object.box3.getSize(selectionBoxSize);**
            console.log(selectionBoxSize)

            this.objectBoxHelper = new THREE.Box3Helper(this.object.box3, 0xffff00);
            this.objectBoxHelper.canSelect = function () {
                return false;
            }
            this.object.add(this.objectBoxHelper);
        }
    }

下面是我的变换控件的更新功能

    this.update = function () {

        if ( scope.object === undefined ) return;

        scope.object.updateMatrixWorld();
        worldPosition.setFromMatrixPosition( scope.object.matrixWorld );
        worldRotation.setFromRotationMatrix( tempMatrix.extractRotation( scope.object.matrixWorld ) );
        scope.object.box3.getSize(selectionBoxSize);
        scope.object.getWorldPosition(selectionBoxPos);

        camera.updateMatrixWorld();
        camPosition.setFromMatrixPosition( camera.matrixWorld );
        camRotation.setFromRotationMatrix( tempMatrix.extractRotation( camera.matrixWorld ) );

        **scaleT = selectionBoxSize;** 

//below three lines are for dynamic size change based on camera position..for 
//next level functionality

         //scaleT.x = worldPosition.distanceTo( camPosition ) / 6 * selectionBoxSize.x;
         //scaleT.y = worldPosition.distanceTo( camPosition ) / 6 * selectionBoxSize.y;
         //scaleT.z = worldPosition.distanceTo( camPosition ) / 6    * selectionBoxSize.z;


        this.position.copy( selectionBoxPos );


        this.scale.set( scaleT.x, scaleT.y, scaleT.z);
        this.updateMatrixWorld();

下面是控制台日志的输出

TransformControls.js:526 Vector3 {x: 10.020332336425781, y: 2.621583938598633, z: 3.503500819206238}

TransformControls.js:601 Vector3 {x: 10.020332336425781, y: 2.621583938598633, z: 3.503500819206238}

如您所见，比例相同，但结果不同。在下图中查看结果。

正如您在图像中看到的那样，底部的红色框是翻译控制器，但比选择框小。另一个问题是我的对象的枢轴位于底部，我希望这个控制器位于选择框的中心，而 box3 的 getCenter 方法也不会发生这种情况。

请帮忙！！如果我在解释问题时不清楚，请告诉我

【问题讨论】：

标签： javascript three.js transform

【解决方案1】：

如果您从对象的几何图形中获取对象的边界框，那将是错误的，因为它没有考虑对象的变换。您必须改用 box3.setFromObject (yourObject) 。这有帮助吗？

【讨论】：

我尝试了所有可能的方法来使其大小相同。仍然无法正常工作。下面是代码...`if(!this.box3) { this.box3 = new THREE.Box3().setFromCustomObjects(this); //this.box3 = new THREE.Box3().setFromObject(this); }'
什么是“setFromCustomObjects”？我在文档中没有看到它。您可能应该发布一些显示您的问题的最小示例。你运行的是哪个版本的三？
setfromcustomobjects 是我的项目功能。我的愚蠢错误是我在发帖之前取消了它的注释。我想告诉你的是我也尝试过 setFromObjects 但它不起作用。你可以看到它，我只是在发布之前发表了评论。关于最小的可行示例，这是一个巨大的项目。我会尝试将控制文件拿出来并在一段时间内发布一个示例。