CocosCreator之KUOKUO带你V2.1.0的3D尝鲜以及欧拉角和四元数简单使用

本次引擎2.1.0

编辑工具VSCode

啊哈，终于盼到了官方发布3D的这一天。这么鲜的事怎能自己独享？

 

来，我们一起开封CocosCreatorV2.1.0

嗯，，，熟悉的界面！

诶？人性化了，‘浏览’的位置终于变了！！！

啊哈！开封第一印象不错。

来，新建个项目。

让我们来找不同！！

嗯，找到了，第一个：

灰色变成了蓝色：

第二个：

边距变小了大约5像素的样子（我是有多无聊！！）

这是V2.0.5版本的：

V2.1.0的：

好了，让我们找找第三个：

颜色和字体大小换了！！！

emmm，还有一些色彩的调整。

界面上的找不同我们先告一段落吧！！！

干点正事，，比如来个白色背景，再来个红色方块。

嗯，找找节点的3D转化在哪？看到了。。。不过为啥是2.5D呢？

具有x,y,z三个自由度（数学中）就是3D。

嗯,看看官方说法，好吧，编辑器未来还要升级，我接受了！！！

行了，不讨论这个话题，我们试着改变节点属性看一看：

给y轴45度，嗯，效果还是不错的嘛！

为了让效果明显，我去换个图片。

emmm，不错。

建个脚本绑一下：

诶！换位置了，‘其他组件’的位置往上挪了！

嗯，更顺手了！

好了，我写个翻转动作吧！

嗯，这是y轴在不停的翻转的代码：

运行一下。

看看效果：

嗯，挺有感觉的，步入3D了。

但是。。。

原来Cocos在新版本中要求使用欧拉角！（可以用Vec3表示）

欧拉角记录了x，y，z三个轴上对应的旋转角度。

试一试：

cc.Class({
    extends: cc.Component,

    properties: {
        speed : 200,
    },

    start () {
        // 欧拉角可以用3维向量表示
        this.euler = new cc.Vec3(0 , 0 , 0);
    },

    update (dt) {
        this.euler.y += this.speed * dt;
        // 该节点的欧拉角
        this.node.eulerAngles = this.euler;
    },
});

嗯，两个人欢乐滴转着，还没警告！

既然欧拉角都弄了，我再弄弄四元数。

因为，在新版本中setRotation()和getRotation（）还有一些其他的地方传参都需要用四元数；

也就是新引入的cc.Quat

什么是四元数呢？？

我们知道欧拉角代表x，y，z三个轴上对应旋转角度。

但是，想一想，是不是在3维空间中，有参考点且静态，欧拉角才能使用？

如果不是呢？四元数是在（x，y，z）三个矢量分量基础上还加了一个w。一个表示位置的标量。

四元数 = （w，（x，y，z））

但是注意：四元数中的x，y，z是需要经过复杂的计算才能得到的，不是欧拉角上的。

//----------------

 

看不懂？没关系，在Cocos中提供了换算的方法。我就是简单提个概念。^_^

举个例子：

cc.Class({
    extends: cc.Component,

    properties: {
        speed : 200,
    },

    start () {
        // 欧拉角可以用3维向量表示
        this.euler = new cc.Vec3(0 , 0 , 0);
        // new一个四元数
        this.quat = new cc.Quat(0 , 0 , 0 , 0);
    },

    update (dt) {
        // 欧拉角y轴的角度变化
        this.euler.y += this.speed * dt;
        // 转换为四元数并设置
        this.node.setRotation(this.quat.fromEuler(this.euler));
    },
});

其中fromEuler（）是四元数的一个方法，可以转化欧拉角为四元数。

效果是跟之前一样的：

之前没接触过3D的小伙伴们要加油补充知识喽！！！

精美的游戏在向我们招手哦！

啊！！！又发现一个更新点，之前的版本：

不关闭Vscode是不会弹出项目面板的，这回不用了，直接弹出来啦！

~~~

今天就说到这里吧！

O(∩_∩)O~~