三个JS枢轴点 [英] Three JS Pivot point

问题描述

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

What I'm trying to achieve is a rotation of the geometry around pivot point and make that the new definition of the geometry. I do not want te keep editing the rotationZ but I want to have the current rotationZ to be the new rotationZ 0.

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

This way when I create a new rotation task, it will start from the new given pivot point and the newly given rad.

我尝试过的方法，但是旋转点移动了:

What I've tried, but then the rotation point moves:

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

我还尝试添加一个组并旋转该组，然后删除该组.但是我需要保持旋转状态而没有所有其他对象.我创建的代码

I also tried to add a Group and rotate that group and then remove the group. But I need to keep the rotation without all the extra objects. The code I created

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旋转点.最终轮换

So my question, how do I save the current rotation as the new 0 rotation point. Make the rotation final

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

EDIT I added an image of what I want to do. The object is green. I have a 0 point of the world (black). I have a 0 point of the object (red). And I have rotation point (blue).

如何围绕蓝点旋转对象?

How can I rotate the object around the blue point?

推荐答案

我不建议更新顶点，因为您会在使用法线时遇到麻烦(除非您也使它们保持最新状态).基本上，执行转换矩阵所要执行的操作很麻烦.

I wouldn't recommend updating the vertices, because you'll run into trouble with the normals (unless you keep them up-to-date, too). Basically, it's a lot of hassle to perform an action for which the transformation matrices were intended.

您通过平移，旋转和取消平移非常接近，因此您处在正确的轨道上.有一些内置的方法可以使超级简单.

You came pretty close by translating, rotating, and un-translating, so you were on the right track. There are some built-in methods which can help make this super easy.

// 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 仍然存在.下次调用该方法时，它将把对象从其当前状态转换为下一步您定义的输入.

After this method completes, the rotation/position IS persisted. The next time you call the method, it will transform the object from its current state to wherever your inputs define next.

还请注意使用世界坐标的补偿.通过将对象的position向量转换为正确的坐标系，您可以在世界坐标或局部空间中使用一个点.尽管您的观察结果可能有所不同，但最好在您的点和对象处于不同坐标系时以这种方式使用它.

Also note the compensation for using world coordinates. This allows you to use a point in either world coordinates or local space by converting the object's position vector into the correct coordinate system. It's probably best to use it this way any time your point and object are in different coordinate systems, though your observations may differ.

这篇关于三个JS枢轴点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！