三个 JS 支点

Question

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

这样当我创建一个新的旋转任务时，它将从新给定的枢轴点和新给定的弧度开始。

我试过了，但是旋转点移动了：

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

我不建议更新顶点，因为你会遇到法线问题（除非你也让它们保持最新）。基本上，执行转换矩阵所针对的操作非常麻烦。

您通过翻译、旋转和取消翻译非常接近，因此您走在了正确的轨道上。有一些内置方法可以帮助您轻松完成此操作。

// 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 向量转换为正确的坐标系来使用世界坐标或本地空间中的一个点。当您的点和对象位于不同的坐标系时，最好使用这种方式，尽管您的观察结果可能会有所不同。