2d场景中用鼠标拖动旋转3d节点（四元数表示旋转）

Creator 2.x
#1

版本：cocoscreator2.2.x

系统：windows

最近入职了一家 教育公司，改行去做课件了。。。。

有几道题目需要用到3d模型来实现。

cube
cube897×837 63.9 KB

开始时用的threejs 实现了3d模型和旋转和一些其他需求。 但是后面考虑到实现难易程度性能和效率，于是改用了cocoscreator的3d来实现 即在2d场景内添加3d模型实现题目需求。在开发过程中 遇到一个鼠标拖动3d节点旋转的问题，起初是根据移动时x,y向量 算出是 左，右，上，下 移动，改变 节点 欧拉角 下x,y,z。经过测试这种方法不是很流畅 而且有时候不受控制。于是寻求其他方法-- 旋转四元数

首先感谢 白玉无冰 同学在cocoscreator社区共享的cocoscreator3.0四元数

与3d旋转实例的知识： 四元数与3D旋转实例！

今天先分享下 2d场景中用鼠标拖动旋转3d节点的小功能，后面再把其他的小功能写一下。

关键代码如下

private touchMove(event:cc.Event.EventTouch) {

        let disPos = event.getDelta();

        let axis = new cc.Vec3(-disPos.y, disPos.x, 0);

        //向量归一化

        axis.normalizeSelf();

        //转换欧拉角到四元数

        let quat = cc.Quat.prototype.fromEuler(this.node.eulerAngles)

        //旋转四元数 

        let out_q = cc.Quat.prototype.rotateAround(quat, axis, Math.PI * 0.05);

        //设置节点quaternion旋转角

        this.node.setRotation(out_q.x, out_q.y, out_q.z, out_q.w);

    }

代码如有 不合理之处，请指点一二 :smiley:
关注我的公众号 亮亮同学TT 发送3d旋转。获取完整源码及资源