求教: 使用tween.to进行3d物体旋转时,出现缩放现象

我想要沿z轴旋转指定的一个Cube 90度。使用tween实现,但旋转过程中出现了缩放操作,如何让物体只旋转而不进行缩放?求大神指教!

旋转功能代码:

tween(this.node)
            .to(2, { rotation: Quat.fromEuler(new Quat(0, 0, 0), 0, 0, 90) })
            .start()

我打印了旋转过程中Cube的scale变化情况:

update(deltaTime: number) {
        console.log(this.node.worldScale
}

Cube初始scale为(x: 2, y: 1, z: 0.5)在缩小过程中,部分打印结果如下:

Object { x: 1.9401026795846192, y: 0.9700513397923096, z: 0.5 }
Object { x: 1.9365246142946702, y: 0.9682623071473351, z: 0.5 }
Object { x: 1.9328506817269369, y: 0.9664253408634684, z: 0.5 }
Object { x: 1.9290837611389167, y: 0.9645418805694583, z: 0.5 }
Object { x: 1.924983002955012, y: 0.962491501477506, z: 0.5 }
Object { x: 1.9205349007134391, y: 0.9602674503567196, z: 0.5 }

如果将 tween(this.node).to 方法改为 tween(this.node).by,则缩放操作更明显,且scale不会再返原为(2, 1, 0.5)

请问如何让3d物体进行正确的旋转操作?感谢大神指点!

直接使用eulerAngles最方便了

    tween(this.node).to(2, {
        eulerAngles: new Vec3(0, 90, 0)
    }).start();

非常有效,而且不用再烦恼四元数的计算,无论使用to还是by方法都可以按预期移动与旋转。

你的回复让我一下明白了第二个参数的意义,它可以针对node的所有属性进行缓动,我之前一直只限制在rotation和postion两个属性上!

学到了,非常感谢!

tween是线性插值,对四元数来说,这个数学意义是不正确的

我借楼反馈了V1.1.0的tween的Bug吧。如果我们对node进行tween。在节点被销毁的时候,这个tween会自动停止不会报错。但是如果我对节点上的 spriteComponent 的color进行tween的话。那么当节点被销毁的时候,这个Tween不会停止,而且会在tween里报错哦。

tween 现在只对节点有自动销毁机制,这个我们会考虑优化一下对组件的支持