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节点

特别注意

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

相关推荐
大橘5 小时前
【qml-11】Quick3D实现机器人欧拉旋转、拖动视角
qt·3d·机器人·qml
DisonTangor5 小时前
腾讯混元3D团队开源 P3-SAM: 原生3D零件分割
人工智能·3d·开源·aigc
xhload3d1 天前
智慧停车场合集 | 图扑数字孪生静态交通一网统管
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·智慧停车·智慧交通·轻量化·电力能源·智慧停车场·智慧停车楼
小于小于大橙子1 天前
3D Gaussian Splatting理论详解
计算机视觉·3d·图形渲染
一只一只1 天前
Unity 3D笔记——《B站阿发你好》
笔记·3d·unity
大橘1 天前
【qml-12】Quick3D实现机器人鼠标拖拽转换视角(无限角度)与滚轮缩放
qt·3d·机器人·qml
m0_743106461 天前
NeRF+3DGS——提升渲染质量与压缩模型参数
论文阅读·人工智能·计算机视觉·3d·几何学
Zuckjet_1 天前
第 5 篇:WebGL 从 2D 到 3D - 坐标系、透视与相机
前端·javascript·3d·webgl
luoganttcc1 天前
什么是 mmdet3d
3d
Min;2 天前
cesium-kit:让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图