新手cocos使用遇到问题汇总

黄鑫元
2,013 阅读3分钟

本菜鸡最近用cocos尝试做了一些事情，遇到了一些问题，可能大部分都是新手可能会遇到的，这篇文章做个记录和总结。（以下内容全部基于cocos creator 3.4版本，如果是更高版本的cocos，可能会有一定程度api的更改）

物体缩放和旋转

3D场景开发过程中经常会遇到的一个基本功能可能是需要物体缩放或者场景缩放，实现这个需求主要靠操控相机来实现。一般来说控制main camera就可以了。

实现旋转主要需要用四元数来实现，旋转通常的场景是按照某个轨迹来旋转、绕轴旋转、自身任意角度旋转。这里有一个旋转例子四元数与3D旋转实例！ Cocos Creator 3D Quternion可以参考。我在cocos 3.3.2版本可以正常打开。

实现物体缩放主要通过相机拉近拉远来实现。PC端可以通过监听鼠标滚轮，然后触发this.node.translate(changeVec),就可以更改节点位置，实现相机的位置更改。

移动端放大缩小，需要通过双指触摸点检测。通过检测开始触摸和结束触摸的距离，来决定放大和缩小的幅度。判断放大还是缩小函数大致可以写成这样：

private isEnlarge(oldPos1: Vec2, oldPos2: Vec2, tempPos1: Vec2, tempPos2: Vec2): boolean {
    const len1 = Vec2.distance(oldPos1, oldPos2)
    const len2 = Vec2.distance(tempPos1, tempPos2)
    // 放大手势
    if (len1 < len2) {
        return true
    }
    // 缩小手势
    if (len1 > len2) {
        return false
    }
}

颜色调整

游戏或者3D场景中经常会有颜色变化的需求，目前cocos暂时还不支持通过脚本直接改颜色，而要通过脚本给shader传值的方式。cocos的shader要通过effect文件的方式来定义和修改。具体cocos shader的基本使用和介绍可以看放空的这个视频：Cocos Creator Shader 入门教程合集

在视频的具体案例贴图溶解里面已经说明了该如何将脚本定义的值如何传递给shader，这里再单独说一遍。

首先要写一个脚本，其中property要写一个Node，来添加将来想要改变颜色的具体物体，假设命名为ChangeColorMesh吧。在这个ChangeColorMesh中会有很多的Material，假如说我们想要改Material[0]里面effect的颜色值。可以写成这样：

@property({
    type: Node
})
ChangeMesh: Node | null = null;

const tryVal = this.ChangeMesh.getComponent(MeshRenderer)

假如说，你的material里面的effect有一个属性"mainColor"，那么我们就可以通过给effect里面的"mainColor"传值的方式来改变material的颜色。大致写法可以参考这样：

 let test = new Color()
 if (paintVal.getProperty("mainColor")) {
    paintVal.setProperty("mainColor", Color.set(test, randomVal1, ramdomVal2, 47, 255))
}

跨域通信

如果想将cocos的内容嵌入到自己的web页面中，可以考虑使用iframe方案。但如果使用iframe来分开部署的话，可能需要考虑跨域通信问题。使用postMessage跨域通信有个注意事项，可以参考我这篇文章：postMessage跨域问题Failed to execute 'postMessage' on 'DOMWindow'解决

射线检测

cocos要实现3D物体的触摸或碰撞等需要用到射线检测，UITransform是针对2D物体上的，不能用在3D触碰检测上面。cocos提供了3种不同的检测方式，分别是基于物理碰撞器的射线检测、基于模型的射线检测、基于 UITransform 组件的射线检测，具体如何使用可以参考下面文档： 浅析射线检测 raycast 的使用 ！Cocos Creator 3D 和这篇文章 Cocos 3.x 3D物理系统 射线检测

avatar
文章
阅读
粉丝