让编辑器显示场景内的相机视角-技术圈

环境

Cocos Creator 3.6.2

步骤

将下面的脚本放入项目中

    //EditorCamerHelper.ts
import { _decorator, Component, Camera, log, Node } from 'cc';
import { EDITOR } from 'cc/env';
const { ccclass, property, executeInEditMode } = _decorator;
declare const cce: any;

@ccclass('EditorCamerHelper')
@executeInEditMode
export class EditorCamerHelper extends Component {
    _targetCamera: Camera = null!
    get targetCamera() {
return this._targetCamera
    }
    @property(Camera)
    set targetCamera(v) {
this._targetCamera = v;
this.node.worldPosition = this.targetCamera.node.worldPosition
this.node.worldRotation = this.targetCamera.node.worldRotation
    }

    _refresh: boolean = false;
    get refresh() {
return this._refresh
    }
    @property
    set refresh(v) {
this._refresh = v;
this.syncFromCameraTransform()
    }

    start() {
        log('欢迎关注微信公众号【白玉无冰】 https://mp.weixin.qq.com/s/-I6I6nG2Hnk6d1zqR-Gu2g')
this.syncFromCameraTransform()
    }

    onFocusInEditor() {
this.syncFromCameraTransform()
this.node.on(Node.EventType.TRANSFORM_CHANGED, this.onTransfromChange, this)
    }
    onLostFocusInEditor() {
this.node.off(Node.EventType.TRANSFORM_CHANGED, this.onTransfromChange, this)
this.refresh = false
    }

private syncFromCameraTransform() {
if (this.targetCamera) {
this.node.worldPosition = this.targetCamera.node.worldPosition
this.node.worldRotation = this.targetCamera.node.worldRotation
        }
    }

private onTransfromChange() {
if (EDITOR && this.refresh && this.targetCamera) {
this.targetCamera.node.worldPosition = this.node.worldPosition
this.targetCamera.node.worldRotation = this.node.worldRotation
        }
    }

    lateUpdate(deltaTime: number) {
if (EDITOR && this.refresh && this.targetCamera) {
const editorCamera: Camera = cce.Camera.camera;
            editorCamera.cameraType = this.targetCamera.cameraType
            editorCamera.fov = this.targetCamera.fov
            editorCamera.far = this.targetCamera.far
            editorCamera.orthoHeight = this.targetCamera.orthoHeight
            editorCamera.node.worldPosition = this.targetCamera.node.worldPosition
            editorCamera.node.worldRotation = this.targetCamera.node.worldRotation
        }
    }
}