cocos中实现3d人物角色头顶信息跟随功能,UI跟随3D/2D对象移动,例如昵称血条跟随人物移动

这次没有使用cocos自己的UICoordinateTracker,而是使用了自己写的逻辑,因为cocos的组件问题真的挺多的,就最开始使用角色控制器的时候,检测碰撞墙壁有时候竟然碰到墙之后不会动了.....这次使用UICoordinateTracker这个组件也是很不灵活,就像上篇文章写的那样,偏差很大,这次索性也自己写了一个,效果如图所示。

添加UI节点

创建一个label的ui节点,用于显示昵称,要显示血条等也是一样的,添加一个Sprite节点

创建跟随脚本

脚本逻辑如下:

获取3D对象的世界坐标(World Position)

将3D坐标转换为屏幕坐标(Screen Position)

将屏幕坐标转换为UI坐标(通常是Canvas下UI节点坐标)

设置UI节点位置,实现UI跟随3D对象移动

javascript 复制代码
import {
    _decorator,
    Camera,
    Component,
    Node,
    UITransform,
    Vec3,
} from 'cc'
const { ccclass, property } = _decorator

@ccclass('follow')
export class follow extends Component {
    @property({ type: Node })
    playerNode: Node = null

    @property({ type: Node })
    uiNode: Node = null // 血条/昵称UI节点

    @property({ type: Camera })
    mainCamera: Camera = null // 3D摄像机

    @property({ type: Node })
    canvasNode: Node = null // Canvas节点

    // 头顶偏移
    private _offset: Vec3 = new Vec3(0, 2, 0)

    update(dt: number) {
        if (
            !this.playerNode ||
            !this.uiNode ||
            !this.mainCamera ||
            !this.canvasNode
        )
            return

        // 1. 计算头顶世界坐标
        const headWorldPos = this.playerNode
            .getWorldPosition()
            .add(this._offset)

        // 2. 世界坐标转屏幕坐标
        const screenPos = new Vec3()
        this.mainCamera.worldToScreen(headWorldPos, screenPos)
        console.log('screenPos', screenPos)

        // 3. 屏幕坐标转UI坐标
        const canvasUITrans = this.canvasNode.getComponent(UITransform)
        const widgetPos = canvasUITrans.convertToNodeSpaceAR(
            new Vec3(screenPos.x, screenPos.y, 0)
        )

        console.log('widgetPos', widgetPos)
        // 4. 设置UI节点位置
        this.uiNode.setPosition(widgetPos)
    }
}

关联到节点

将节点关联到脚本上,PlayerNode就是你的角色节点,UINode就是昵称或血条节点,Main Camera就是主摄象机,CancasNode就是Canvas节点

特别注意

还有非常重要的一点就是屏幕分辨率,一定不要设置缩放,不然就会有移动偏差,这个问题困扰了我好久........后面还需要优化适配不同的分辨率

相关推荐
周小码12 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
大嘴带你水论文12 小时前
震惊!仅用10张照片就能随意编辑3D人脸?韩国KAIST最新黑科技FFaceNeRF解析!
论文阅读·人工智能·python·科技·计算机视觉·3d·transformer
Coovally AI模型快速验证2 天前
3D目标跟踪重磅突破!TrackAny3D实现「类别无关」统一建模,多项SOTA达成!
人工智能·yolo·机器学习·3d·目标跟踪·无人机·cocos2d
研梦非凡2 天前
CVPR 2025|基于粗略边界框监督的3D实例分割
人工智能·计算机网络·计算机视觉·3d
逻辑羊驼2 天前
VSCode+MobaXterm+X11可视化界面本地显示
运维·服务器·ubuntu·3d
二川bro2 天前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
二川bro2 天前
第24节:3D音频与空间音效实现
3d·音视频
新启航半导体有限公司3 天前
[新启航]《超薄碳化硅衬底 TTV 测量:技术挑战与解决方案》
科技·3d·制造
咔咔一顿操作3 天前
第六章 Cesium 实现简易河流效果
microsoft·3d·cesium
桃花键神3 天前
如何选择合适的 3D 建模工具:我的经验和思考
3d