三个JS Pivot点

Question

我想要实现的是围绕枢轴点旋转几何体并使其成为几何体的新定义.我不希望继续编辑rotationZ,但我想让当前的rotationZ成为新的rotationZ 0.

这样,当我创建一个新的旋转任务时,它将从新的给定枢轴点和新给定的rad开始.

我尝试了什么,但旋转点移动了:

// Add cube to do calculations
var box = new THREE.Box3().setFromObject( o );
var size = box.getSize();
var offsetZ = size.z / 2;

o.geometry.translate(0, -offsetZ, 0)

// Do ratation
o.rotateZ(CalcUtils.degreeToRad(degree));

o.geometry.translate(0, offsetZ, 0)

我还尝试添加一个组并旋转该组,然后删除该组.但是我需要在没有所有额外物体的情况下保持旋转.我创建的代码

var box = new THREE.Box3().setFromObject( o );
    var size = box.size();

    var geometry = new THREE.BoxGeometry( 20, 20, 20 );
    var material = new THREE.MeshBasicMaterial( { color: 0xcc0000 } );

    var cube = new THREE.Mesh( geometry, material );

    cube.position.x = o.position.x;
    cube.position.y = 0; // Height / 2
    cube.position.z = -size.z / 2;

    o.position.x = 0;
    o.position.y = 0;
    o.position.z = size.z / 2;

    cube.add(o);

    scene.add(cube);

    // Do ratation
    cube.rotateY(CalcUtils.degreeToRad(degree));

    // Remove cube, and go back to single object
    var position = o.getWorldPosition();

    scene.add(o)
    scene.remove(cube);
    console.log(o);

    o.position.x = position.x;
    o.position.y = position.y;
    o.position.z = position.z;

所以我的问题是,如何将当前旋转保存为新的0旋转点.轮换最终

编辑 我添加了我想要做的图像.对象是绿色的.我有0点世界(黑色).我有一个0点的对象(红色).我有旋转点(蓝色).

如何围绕蓝点旋转物体？

Answer 1

对于任何试图快速更改对象枢轴点的人来说，作为一个简单的解决方案，我建议创建一个组并将网格添加到组中，然后围绕该组旋转。

完整示例

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube)

现在，它只会绕其中心旋转

cube.rotation.z = Math.PI / 4

创建一个新组并添加立方体

const group = new THREE.Group();
group.add(cube)
scene.add(group)

此时我们又回到了起点。现在移动网格：

cube.position.set(0.5,0.5,0)

然后移动组

group.position.set(-0.5, -0.5, 0)

现在使用 yourgroup来旋转对象：

group.rotation.z = Math.PI / 4

Answer 2

我不建议更新顶点,因为你会遇到法线问题(除非你让它们保持最新).基本上,执行转换矩阵所针对的操作会很麻烦.

你通过翻译,旋转和非翻译来接近,所以你走在了正确的轨道上.有一些内置的方法可以帮助使这非常容易.

// obj - your object (THREE.Object3D or derived)
// point - the point of rotation (THREE.Vector3)
// axis - the axis of rotation (normalized THREE.Vector3)
// theta - radian value of rotation
// pointIsWorld - boolean indicating the point is in world coordinates (default = false)
function rotateAboutPoint(obj, point, axis, theta, pointIsWorld){
    pointIsWorld = (pointIsWorld === undefined)? false : pointIsWorld;

    if(pointIsWorld){
        obj.parent.localToWorld(obj.position); // compensate for world coordinate
    }

    obj.position.sub(point); // remove the offset
    obj.position.applyAxisAngle(axis, theta); // rotate the POSITION
    obj.position.add(point); // re-add the offset

    if(pointIsWorld){
        obj.parent.worldToLocal(obj.position); // undo world coordinates compensation
    }

    obj.rotateOnAxis(axis, theta); // rotate the OBJECT
}

此方法完成后,旋转/位置IS保持不变.下次调用方法时,它会将对象从当前状态转换为接下来输入定义的位置.

还要注意使用世界坐标的补偿.这允许您通过将对象的矢量转换为正确的坐标系来使用世界坐标或局部空间中的点position.尽管您的观察结果可能不同,但是只要您的点和物体位于不同的坐标系中,最好以这种方式使用它.