三个JS Pivot点

时间:2017-03-15 14:38:50

标签: javascript three.js

我想要实现的是围绕枢轴点旋转几何体并使其成为几何体的新定义。我不希望te继续编辑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点的对象(红色)。我有旋转点(蓝色)。

如何围绕蓝点旋转物体?

enter image description here

1 个答案:

答案 0 :(得分:8)

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

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



// 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向量转换为正确的坐标系来使用世界坐标局部空间中的点。只要您的点和物体位于不同的坐标系中,这可能最好以这种方式使用它,尽管您的观察结果可能不同。