在 3d 场景中显示 spine 的一种实现方法

[zjsmzhq]

思路其实很简单，就是新建一个canvas在canvas节点下面放3d节点和spine，并且把canvas相机的参数调整和3dcamara参数一致。

这里对官方的taxi项目做了部分修改，就可以配合3d节点展示spine

之前论坛里面一个spine场景的实现解决

目前这个方案和2.x的区别就是2.x里是根据节点树顺序影响渲染顺序，而现在这个方案canvas和camera的渲染顺序是分开的，只能通过camera分层来实现不同层级的渲染顺序。

主要内容就一个camera参数调整脚本

import { _decorator, Component, Node, Canvas, Camera, SystemEventType, toRadian } from ‘cc’;

const { ccclass, property } = _decorator;

@ccclass(‘canvasCameraAdapter’)

export class canvasCameraAdapter extends Component {

@property(Canvas)

canvas: Canvas  = null!;

@property(Camera)

camera: Camera = null!;

private _onResizeCamera: () => void = () => {};

start () {

    let canvasCamera = this.canvas.camera!;

    canvasCamera.node.setPosition(this.camera.node.getWorldPosition());

    canvasCamera.node.eulerAngles = this.camera.node.eulerAngles;

    canvasCamera.node.scale = this.camera.node.scale;

    canvasCamera.projectionType = this.camera.projection;

    canvasCamera.fovAxis = this.camera.fovAxis;

    canvasCamera.fov = toRadian(this.camera.fov);

    canvasCamera.orthoHeight = this.camera.orthoHeight;

    canvasCamera.nearClip = this.camera.near;

    canvasCamera.farClip = this.camera.far;

    canvasCamera.forward = this.camera.camera.forward;

    canvasCamera.frustum = this.camera.camera.frustum;

    this._onResizeCamera = this.onResizeCamera.bind(this);

    this.canvas.node.on(SystemEventType.TRANSFORM_CHANGED, this._onResizeCamera);

    this.camera.node.on(SystemEventType.TRANSFORM_CHANGED, this._onResizeCamera);

    

}

onResizeCamera () {

    let canvasCamera = this.canvas.camera!;

    canvasCamera.node.setPosition(this.camera.node.getWorldPosition());

    canvasCamera.node.eulerAngles = this.camera.node.eulerAngles;

    canvasCamera.node.scale = this.camera.node.scale;

}

onDestroy (){

    this.canvas.node.off(SystemEventType.TRANSFORM_CHANGED, this._onResizeCamera);

    this.camera.node.off(SystemEventType.TRANSFORM_CHANGED, this._onResizeCamera);

}

}

[441829663 (啊安)]

能麻烦下楼主提供个demo吗~

[zjsmzhq]

已经发在另一个主题里了，之前没删减官方项目中的内容，太大了传不上来
https://forum.cocos.org/t/topic/101420

[441829663 (啊安)]

好的，谢谢大佬

[t22222k (Kent)]

感謝，我正在煩惱2D的東西怎麼放到3D上，以及3D的物件層級如何在2D UI之上，這教學感覺能找到方法！