Question

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

下面是几何代码init

 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方法也不会发生这种情况。

请帮助！！让我知道我在解释问题时不清楚

Answer 1

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

（Three.JS）用于翻译的转换控件（尺寸发行）

1 个答案: