使用 Babylonjs Sprites 精灵图 做模型标注

效果

// 精灵图
import { SpriteManager, Sprite, Scene, PointerEventTypes } from "@babylonjs/core"
export class ImportSprite {
    static callBackMap = new Map();
    static addSprite(name: string, url: string, scene: Scene, callBack: Function) {
        const spriteManagerTrees = new SpriteManager(name, url, 2000, { width: 500, height: 500 }, scene);
        const tree2 = new Sprite(name, spriteManagerTrees);
        tree2.width = 20;
        tree2.height = 20;
        tree2.position.y = -50;
        spriteManagerTrees.isPickable = true;
        tree2.isPickable = true;
        if (typeof callBack == "function") {
            this.callBackMap.set(name,callBack)
        }
        return tree2
    }
    static removeAllSprite(scene: Scene) {
        if(!Array.isArray(scene.spriteManagers)){
            return;
        }
   		//拷贝一下
        let list = scene.spriteManagers.map(item=>item);
        if(list.length == 0) return;
        const length = list.length;
        for (let index = 0; index < length; index++) {
            //移除事件
            let name = list[index].name;
            this.callBackMap.has(name) && this.callBackMap.delete(name)
            list[index].dispose()

        }
    }
    static runCallBack(name:string){
        if(this.callBackMap.has(name)){
            this.callBackMap.get(name)(name)
        }
    }
}
//使用 
	const sprite = ImportSprite.addSprite("名称", "图片地址", scene, "点击精灵图触发函数");
	//修改精灵图参数; mesh为需要标注的模型
    sprite.width = sprite.height = 5;
    sprite.position = mesh.position;
 //事件触发方式
 //1.给 scene 添加 事件监听
 scene.onPointerObservable.add(sceneClick, PointerEventTypes.POINTERDOWN)
 //2.触发 判断是否点击精灵图 点击则调用 类 ImportSprite 的 runCallBack方法 
 //pickResult.pickedSprite.name 值 和 addSprite名称参数相同
 const sceneClick = (e) => {
    let pickResult = scene.pickSprite(scene.pointerX, scene.pointerY);
    if (pickResult != null && pickResult.hit) {
        ImportSprite.runCallBack(pickResult.pickedSprite.name)  
    }
}