让编辑器显示场景内的相机视角
2023-03-07 09:11:45 时间
环境
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
}
}
}
将脚本文件拖入场景中
填充脚本参数
- 选中脚本节点
- 拖入想要显示的相机
- 勾上 refresh,会自动跟随相机视角
当前脚本丢失焦点时,就不会继续自动跟随相机视角了。
效果
勾上后显示相机的视角
可以通过修改脚本节点的位置角度,同时修改相机的视角。
原理
找到隐藏在编辑器中相机cce.Camera.camera
,复制想要显示的相机参数。
注意!!! 直接改编辑相机的参数可能会出现意外情况,出现异常时重启编辑~~
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的