在旋转轴的特定对象中的任何地方Three.js - 包括网外 [英] Rotate object on specific axis anywhere in Three.js - including outside of mesh

问题描述

试图绕任意轴的对象。

例如像门铰链（对物体的边缘），或绕太阳（对象外）的行星。

For example like a door hinge (on edge of object) or planet around the sun (outside of object).

这个问题似乎被定义轴。下面的单位向量导致轴剩余对象的原点（中心）为此等同于标准旋转：

The problem seems to be defining the axis. The below unit vector results in axis remaining on object's origin (centre) therefor identical to standard rotation:

object2.rotateOnAxis(new THREE.Vector3(1,0,0), 0.01);
// same as
object1.rotation.x += 0.01;

请参阅code例如：的jsfiddle

See code example: JSFiddle

编辑：寻找一种方式，人们可以绕轴心旋转，不使用嵌套子。旋转一个孩子的父母提供了一种简单的方法来处理孩子的轴点，但修改的支点是不可行的。

Looking for a way that one can rotate around a pivot without using nested children. Rotating a child's parent provides an easy way to manipulate the child's pivot point, but modifying the pivot point is not viable.

下面的例子，如果你想旋转立方体的8字形，这将是实现这种方法通过改变父母。但是，一个人必须要确保新的父的位置和方向是pcisely配置使孩子的父母，和复杂的动作不重复或循环播放将会非常复杂之间无缝跳转$ P $。相反，我想（我会意译的问题标题）旋转，在一个特定的轴的对象，而无需使用场景中的物体筑巢的任何地方，包括对象的网格之外。

Example below, if you wanted to rotate the cube in a figure 8 motion, it would be achievable with this method by changing the parent. But one would have to assure that the new parent's position and orientation is precisely configured to make the child seamlessly jump between parents, and complex motions that do not repeat or loop would be very complicated. Instead, I would like to (and I will paraphrase the question title) rotate an object on a specific axis without using object nesting anywhere in the scene, including outside of the object's mesh.

请参阅code例如：的jsfiddle与支点

See code example: JSFiddle with pivots

推荐答案

如果要旋转一个物体围绕一个独断专行的世界空间，你可以使用下面的方法。该生产线是由3D 点指定和方向向量（轴）。

If you want to rotate an object around an arbitrary line in world space, you can use the following method. The line is specified by a 3D point and a direction vector (axis).

THREE.Object3D.prototype.rotateAroundWorldAxis = function() {

    // rotate object around axis in world space (the axis passes through point)
    // axis is assumed to be normalized (important!)
    // angle is in radians

    var q1 = new THREE.Quaternion();

    return function ( point, axis, angle ) {

        q1.setFromAxisAngle( axis, angle );

        this.quaternion.multiplyQuaternions( q1, this.quaternion );

        this.position.sub( point );
        this.position.applyQuaternion( q1 );
        this.position.add( point );

        return this;

    }

}();

three.js r.71

three.js r.71

这篇关于在旋转轴的特定对象中的任何地方Three.js - 包括网外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！