在不经过编码基础上，能够通过编辑器的动画功能实现旋转。那么同理，通过代码也可以控制模型旋转。这个过程所用到的代码并不多。

那么需要解决的问题是，Cocos 3.x如何创建脚本？这个过程步骤是如何？

如何挂载脚本？

如何旋转？

1 创建一个脚本

首选在资源管理器里面，创建一个文件夹script，将新建的脚本创建在其文件夹下。如创建一个叫Monkey.ts的脚本。如下图1

新建脚本如下，该脚本会继承Component组件类。这里用到语法是TypeScript。

备注：Typescript语法：可以到微软官方查看其写法，https://www.typescriptlang.org/

import { _decorator, Component, Node, math, Vec3, Quat } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Monkey')
export class Monkey extends Component {
 
    start() {
       
    }

    update(deltaTime: number) {
    }
}

2 编写旋转逻辑

模型点击节点的时候可以观察到其坐标系，Y轴是朝上，Z轴正对着我们，X轴在右边。这个时候要围绕Y轴去旋转。要让它产生旋转，就是在每一帧里面对其角度递增。我们将代码写到update方法里面，使产生每一帧刷新。

import { _decorator, Component, Node, math, Vec3, Quat } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Monkey')
export class Monkey extends Component {
   
    private angle:number = 0 //角值
    start() {
       
    }

    update(deltaTime: number) {
        this.angle++; // 不断递增角度
        if(this.angle > 360) {
            this.angle = 0;
        }

        let vec3 = new Vec3(0, this.angle, 0);   //针对Y轴旋转
        this.node.eulerAngles = vec3;//赋值欧拉角
    }
}

3 挂载脚本到其节点身上

要使脚本产生效果，这个时候就要对脚本绑定挂载。鼠标拖住资源管理器的脚本拖拽到对应其节点属性面板。绑定后这个脚本就能成功挂载到脚本身上。

同理，将其他节点也挂载这个脚本，重复上述的操作。完成后进行预览效果。

以上经过脚本后，猴头和骑士就能一起旋转了。若在此刻想打包window给朋友看，这个时候就可以直接打包window平台来实现桌面化平台的支持。

4 不同方向旋转的实现

要其产生不同的方向，只需要修改不同轴的数值就可以实现其效果。如修改X轴的旋转。让猴头基于X轴方向进行旋转。产生效果和基于Y轴并不会一样。

import { _decorator, Component, Node, math, Vec3, Quat } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Monkey')
export class Monkey extends Component {
   
    private angle:number = 0
    start() {
       
    }

    update(deltaTime: number) {
        this.angle++;
        if(this.angle > 360) {
            this.angle = 0;
        }
        let vec3 = new Vec3(this.angle, 0, 0);   
        this.node.eulerAngles = vec3;
    }
}

5 小结

基于TypeScript 的语法，通过挂载脚本到节点中去产生旋转效果，这个过程操作十分便利。当你写好的脚本也可以分享给有需要的朋友来展示你要的效果。由于第一次编写，在书写过程出现很多不熟悉情况。查看官方的API是一个不错的选择。

语法需要到微软官方进行查看 https://www.typescriptlang.org/

cocos 文档APi 可以到https://docs.cocos.com/creator/api/zh/ 官方进行查看