引言

3D模型渲染到2D界面的模型展示效果

在 游戏开发 中常常需要在 UI界面 上 显示 一个 3D模型 ，例如 时装界面 里 人物换装 展示、 Boss挑战界面 里 选择Boss 展示等等。

本文将介绍一下在 Cocos 游戏开发中实现 和平精英 中 3D模型渲染到2D界面 的模型展示效果。

本期知识点

1.RenderTexture

渲染贴图是 Camera 或 Canvas 组件的渲染目标对象，渲染管线会使用它的 RenderWindow 作为渲染的目标窗口。

我们可以把相机画面渲染到它上面，然后将精灵Sprite的贴图资源设置成它。

2.Camera

渲染场景中的相机对象，由项目层的 Camera 管理。

我们可以通过它的targetTexture指定此相机的渲染输出目标贴图，默认为空，直接渲染到屏幕。

3.SpriteFrame

精灵帧资源。

我们通过SpriteFrame的texture设置贴图对象资源，可以是 TextureBase 类型。

3D模型渲染到2D界面实例

接下来我们来实现和平精英中3D模型渲染到2D界面的模型展示效果。

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

创建一个新工程，笔者用3.8.2体验，大家用3.8.1打开项目即可。

按照下面结构拼一下UI。cocos是背景图，ModelSprite是渲染到的目标精灵，Camera是拍模型的摄像机。

然后把商城上的鸡带走并做成预制体借用一下。

3.编写代码

新建一个ModelRtt组件，并且拖到ModelSprite上。其中包含几个属性。

• modelUrl,模型的路径，直接通过resources.load加载。
• modelOffsetY,模型的偏移，用于调整模型显示的位置。
• orthoHeight,相机的正交视角高度，用于调整模型的大小。
• modelSprite,目标精灵。

export class ModelRtt extends Component {
    @property(CCString)
    modelUrl: string = "";
    @property(CCFloat)
    modelOffsetY: number = 0;
    @property(CCFloat)
    orthoHeight: number = 0;
    modelSprite: Sprite = null;
}

然后编写 loadPrefab 方法通过 resources.load 加载模型。

loadPrefab() {
    if (!this.modelUrl || !this.modelSprite) {
        error('Please provide a valid prefab path and target sprite.');
        return;
    }

    resources.load(this.modelUrl, Prefab, (err, prefab) => {
        if (err) {
            error('Failed to load the prefab:', err);
            return;
        }

        this.createModel(prefab);
    });
}

最后 通过以下步骤完成 3D模型渲染到2D界面 。

• 创建 RenderTexture ，大小建议512、1024或者2048。

const size = this.node.getComponent(UITransform).contentSize;
const modelRtt = new RenderTexture();
modelRtt.reset({
    width: size.width,
    height: size.height
});

• 创建模型 ，并且 设置偏移 。

const newNode = new Node();
newNode.parent = find("/");
const modelNode: Node = instantiate(prefab);
modelNode.parent = newNode;
modelNode.setPosition(new Vec3(0, this.modelOffsetY, 0));

• 进行 拖拽事件的监听 和 实现模型转动 。

let flag = false;
this.node.on(NodeEventType.TOUCH_START, () => { flag = true; }, this);
this.node.on(NodeEventType.TOUCH_END, () => { flag = true; }, this);
this.node.on(NodeEventType.TOUCH_MOVE, (event: EventTouch) => {
    if (flag) {
        modelNode.eulerAngles = new Vec3(0, modelNode.eulerAngles.y + event.getDeltaX(), 0);
    }
}, this);

• 获取 我们在 场景中 创建的 摄像机 ，并且设置一些 相关参数 。(这里面用 动态添加 的 Camera 不会动态渲染， 暂时不做研究 )。

// const camera = new Node("Camera").addComponent(Camera); //todo：动态添加的Camera模型不会动 
const camera = this.node.getComponentInChildren(Camera);
camera.clearFlags = Camera.ClearFlag.SOLID_COLOR; //设置缓冲清楚标志位
camera.projection = renderer.scene.CameraProjection.ORTHO; //设置相机投影类型
camera.orthoHeight = this.orthoHeight; //设置正交视角高度
camera.clearColor = new Color(0, 0, 0, 0); //设置透明
camera.targetTexture = modelRtt; //设置目标RenderTexture
camera.node.parent = newNode;
camera.node.position = new Vec3(0, 0, 10);

• 设置 目标精灵的 精灵帧 。

const spriteFrame = new SpriteFrame();
spriteFrame.texture = modelRtt;
spriteFrame.flipUVY = true;
this.modelSprite.spriteFrame = spriteFrame;

4.效果演示

【100个Cocos实例】实现和平精英中3D模型渲染到2D界面的模型展示效果原文链接：https://juejin.cn/post/7311603519601147945