coscos3D 基础教程与实践

目录

1.cocos creator 3D坐标系

2.TS 组件代码介绍

3.vec3

4.node基础属性与缩放

5.欧拉角与四元数

6.Node 旋转

7.摄像机

8.模型显示以及动画播放

9.常用3DShader 

10.天空盒的使用

---

待续...

---

1.cocos creator 3D坐标系

   水平向右边  x轴;      竖直向上 y轴;     垂直于屏幕向外: Z;    

   物体的前方: (-z), 右边(+x) 上面(+y)      

    3D坐标系：右手，左手坐标;

2.TS 组件代码介绍

//具体ts 脚本使用教程地址：

https://blog.csdn.net/osuckseed/article/details/103697957

//从指定模块导出对应的符号
import { _decorator, Component, Node,Vec3, CCObject } from "cc";

//装饰器 编辑器装载脚本代码的时候读取的
//ccclass ：指定类为组件类
//property：作为属性绑定为到编辑器

const { ccclass, property } = _decorator;

//装饰器以@开头 编辑器识别后把它作为组件类
//export：导出类 import{gameMgr} frrom "./gameMgr"
@ccclass("gameMgr")
export class gameMgr extends Component {
    /* class member could be defined like this */
    // dummy = '';

    /* use `property` decorator if your want the member to be serializable */
    // @property
    // serializableDummy = 0;
    @property
    is_debug:boolean =true;
    @property(Node)
    test_node:Node=null;
    @property([Node])
    arry_node:Array<Node> =[]; 
    start () {
        // Your initialization goes here.
    }

    // update (deltaTime: number) {
    //     // Your update function goes here.
    // }
}

3.vec3

1: 数据成员: x, y, z;

2: 常用的单位向量: UNIT_X: (1, 0, 0), UNIT_Y(0, 1, 0), UNIT_Y(0, 0, 1); ZERO: (0, 0, 0), ONE: (1, 1, 1),  NEG_ONE (-1, -1, -1);

3: 常用的向量方法:     向量长度 Vec3.Len; 向量加减法: add, sub;     两个向量距离Vec3.distance;     两个向量线性插值: lerp;     两个向量点乘dot, 叉积(cross);     两个向量单位化:normalize;

4: 标量分解到对应向量:     dir: (x, y, z), len 是dir 长度, 标量大小v, 按照dir 分解以后得到的向量：     (v * dir.x / len, v * dir.y / len, v * dir.z / len)

4.node基础属性与缩放

1: 本地坐标系:      position: 获取本地坐标位置 只读不能用于修改坐标位置;      setPosition: 修改物体本地坐标位置;      getPosition: 获取物体的本地坐标位置;

2: 世界坐标系:      worldPosition: 获取世界坐标位置;      setWorldPosition: 设置世界坐标的位置;      getWorldPosition: 获取世界坐标位置;

3: 平移:translate(位置增量，Local/World)     Node.NodeSpace.Local/ Node.NodeSpace.World

4: 本地缩放:      scale: 获取本地坐标位置 只读不能用于修改坐标位置;      setScale: 修改物体本地缩放;      getScale: 获取物体的本地缩放;

5: 世界缩放:      worldScale: 获取世界缩放;      setWorldScale: 设置世界坐标的位置;      getWorldScale: 获取世界坐标位置;

5.欧拉角与四元数

1: 欧拉旋转:       旋转一个物体到任意的角度，总可以表示为分别绕每个轴旋转多少度;     绕x轴旋转 30, 再绕y轴旋转60，再绕z轴旋转70度;     同样的角度, 顺序不一样，结果也不会不一样, XYZ, YZX, ZYX 顺序不一样导致的结果不一样。      优点: 直观，非常好控制,  缺点: 不方便和矩阵结合运算, 有万向节锁的可能性;      用一个向量表示欧拉旋转 Vec3(x, y, z);

2: 四元数:      用来表示旋转的一种数学工具，非常方便和矩阵一起参加运算, 不会有万向节锁的缺点;      缺点：不能直观的表示旋转, 程序一般不直接使用, 引擎内部用四元素计算旋转;       引擎里面使用 Quat来表示四元数;

3:  四元数与欧拉角的互换:      四元数---》欧拉角;  getEulerAngles(out: Vec3): Vec3;      欧拉角---》四元数:fromEluer()       插值:  线性插值，球面插值;

6.Node 旋转

1: 本地旋转:      rotation: 四元数;      eulerAngles: 欧拉角;      setRotationFromEuler: 设置旋转欧拉角      setRotation: 设置旋转四元数       getRotation: 获取旋转四元数;

2: 世界缩放:      worldRotation:世界旋转;      setWorldRotation: 设置世界旋转;      setWorldRotationFromEuler: 设置欧拉角的世界旋转;

3: 旋转:      一般设置欧拉角就可以了; rotate 函数;      lookAt(dst, up); // 前方对准某个物体;   

 

7.摄像机

摄像机的两种成像模式: 透视模式 + 正交模式;

 

1:  节点 + 摄像机组件 cc.CameraComponent;   一个场景要有 >=1个的摄像机;

2:  摄像机组件重要属性:      

clearFlags: 清理屏幕的方式: DONOT_CLEAR, DEPTH_OLNY, SOLID_COLOR, 天空盒;      

Color: 清理屏幕的颜色;      

Priority: 摄像机的深度值，Priority 越小的摄像机，先绘制到屏幕，越大的后绘制到屏幕;       f

ar: 摄像机拍摄的最远距离;       Fov: 透视视角;       near: 最近的拍摄距离;      

Projection: 投影模式 透视 + 正交;      

Rect: 成像的区域;      

TargetTexture: 将摄像机画面绘制到纹理，可以用来作截图;        

Visibility: 摄像机可拍摄的物体类型;

3: 快速调整摄像机视角的方式:  ctrl + shift + F

4.摄影机的视角

a:第三人称: 角色移动多少，摄像机跟着移动多少，但是视角不跟随角色的变化而变化     赛车，跑酷，RPG, Moba 都是第三人称摄像机;

b:第一人称:  摄像机安在角色上，相当于角色的”眼睛”, 角色移动旋转到哪里，眼睛也跟着传到哪里;

8.模型显示以及动画播放

 

1: 3D模型导入与材质的配置;

a:  cc.ModelComponent: 绘制普通的3D网格;

b: cc.SkinedMeshComponent: 绘制蒙皮网格;

c: 绘制网格组件: Mesh, 材质(shader + 参数)

//新建自定义材质，然后拖入

2: 3D模型动画的导入与切割;

a: 动画组件: 根据动画文件，每帧动态改变网格的形状；

b: cc.SkeletalAnimationComponent: 播放动画组件;

c: 动画组件的使用;

import { _decorator, Component, Node ,SkeletalAnimationComponent} from "cc";
const { ccclass, property } = _decorator;

@ccclass("AniMgr")
export class AniMgr extends Component {
    /* class member could be defined like this */
    // dummy = '';

    /* use `property` decorator if your want the member to be serializable */
    // @property
    // serializableDummy = 0;

    onLoad(){
        this.anim=this.node.getComponent(SkeletalAnimationComponent);
    }
    anim:SkeletalAnimationComponent=null;
    start () {
        this.anim.play("attack");
        this.scheduleOnce(function(){
            //一般的动画切换
            this.anim.crossFade("idle");
        }.bind(this),3);
        // Your initialization goes here.
    }

    // update (deltaTime: number) {
    //     // Your update function goes here.
    // }
}

9.常用3DShader 

1:  创建一个材质;

2:  选择Unlit Shader: 不受光照影响  unlight;

3:  设置Shader参数:      

Technique: 普通非透明队列, 透明队列;      

Pass 0: 渲染管道参数设置:            

USE_TEXTURE: 设置模型贴图的纹理: Tiling Offset;            

USE_VERTEX_COLOR: 使用顶点颜色;            

USE_COLOR: 是否叠加一个颜色:  

         

渲染管道的设置参数:          

 cull 模式: 剔除模式;            

dethTest: 开启深度测试;

depthFunc: 深度测试比较的函数;            

depthWrite: 是否将像素深度写入深度缓存区;     

 

PBR Stand Shader

1:  USE NORMAL MAP: 是否携带法线贴图;

2: USE ALBEDO MAP: 是否写带纹理贴图;

3: Albedo:叠加的颜色;

4: PBR 受光照强度的影响;

10.天空盒的使用

1.右键新建cubMap

2.camera设置摄影机剔除

3.场景节点设置新建的天空盒

11.

来源：CSDN

作者：东方快弟

链接：https://blog.csdn.net/osuckseed/article/details/103728598