cocoscreator3D 模型上添加一个2d的组件

Creator 3.x
#1

怎么在模型上添加进度条等组件

#2

不是添加，而是2D跟随3D物体

#3

那么2d还是在canvas上吗例如这张图片的进度条

#4

还有就是跟随的话是不是不能实现近大远小的效果

#5

2DUI的话，UICoordinateTracker这个是之前的实现方法，说是1.2删除了，但是也没有相关的替代方案。

#6

官方人员在不在，回复一下怎么解决

#7

嗯嗯，下午还在看大佬回复cube六面加label的帖子

#8

如果是加进度条的话，我想应该可以添加一个平面模型，使用shader来控制进度显示。可以参考下大佬们写的shader教程。（纯理论派）

#9

不用组件，直接上代码即可
https://github.com/cocos-creator/demo-ui/tree/v3.0/assets/scene
其中有一个rocker.scene场景，参考里面代码就行，不用添加组件，添加了也用不了，直接抄里面的代码
例如，我的需求比较简单就血条跟随，你可以参考下我的代码

// 血量跟随 lateUpdate(deltaTime: number) { // 血量 this.hp.getWorldPosition(_v3_0); this.camera.convertToUINode(_v3_0, this.HPNode.parent, _v3_0); this.HPNode.setPosition(_v3_0); }

1赞
#10

cube六面加label怎么实现的？

#11

已封闭好相应的组件。可直接使用。

import { Camera, Vec3, _decorator, Node, Component } from "cc";
// import SceneUtil from "../utils/SceneUtil";
const { ccclass, property } = _decorator;
/**
 * 一般挂在待follow 的2D节点上，并指定被跟踪节点。
 */
@ccclass("UITrack3dComponent")
export default class UITrack3dComponent extends Component {

    private _trackCamera: Camera = null;

    // 要跟随的3D世界的物体节点，比如一个头部节点。
    private _trackNode: Node = null;

    // 跟随3D移动的UI节点。是显示在2D世界中的节点，比如一个进度条。
    private _followNode: Node = null;

    private _last3DPos: Vec3 = new Vec3();

    // 临时pos
    private _tempUiPos: Vec3 = new Vec3();

    // 3d物件与相机的距离比例，调节此值可以修改2D物体的远小近大。
    private _distance: number = 1;
    // 是否启用远小近大功能。
    private _useScale: boolean = false;

    public set trackNode(n: Node) {
        this._trackNode = n;
    }

    public set trackCamera(c: Camera) {
        this._trackCamera = c;
    }

    public set followNode(f: Node) {
        this._followNode = f;
    }
    public set distance(d: number) {
        this._distance = d;
    }
    public set useScale(s: boolean) {
        this._useScale = s;
    }
    onEnable() {
        // 默认跟踪节点为自己本身。
        this.followNode = this.node;
        // 默认相机为主相机。
        // this._trackCamera = SceneUtil.getMainCamera();
    }

    lateUpdate() {
        if (!this._trackCamera || !this._trackNode
            || !this._followNode || !this._trackNode.parent || !this._followNode.parent) {
            return;
        }

        // @ts-ignore
        if (!this._trackCamera._camera ||
            this._last3DPos.equals(this._trackNode.worldPosition)) {
            return;
        }

        this._last3DPos.set(this._trackNode.worldPosition);
        const camera = this._trackCamera;
        // [HACK]
        // @ts-ignore
        camera._camera.update();
        camera.convertToUINode(this._last3DPos, this._followNode.parent, this._tempUiPos);
        this._followNode.setPosition(this._tempUiPos);
        console.log(">>>", this._tempUiPos.x, this._tempUiPos.y, this._tempUiPos.z);
        if (this._useScale) {
            // @ts-ignore
            Vec3.transformMat4(this._tempUiPos, this._trackNode.worldPosition, camera._camera.matView);
            const ratio = this._distance / Math.abs(this._tempUiPos.z);
            const value = Math.floor(ratio * 100) / 100;
            this._followNode.setScale(value, value, 1);
        }
    }
}

使用方法：
直接挂在 2D节点上比例一个血条节点。 然后在代码中设置3D相机，和被跟踪的3D物体节点。

......

    @property(UITrack3dComponent)
    private followNode: UITrack3dComponent = null;

...... 
    this.followNode.trackNode = this.test3DNode;
    this.followNode.trackCamera = this.mainCamera; // 自己获取主相机。
2赞
#12

宝刀未老 :+1:

#13

有链接吗？