threejs渲染HTML标签中挂载vue组件

threejs在使用CSS2DRenderer或CSS3DRenderer渲染的HTML标签中添加vue组件
创建标签的方法如下（CSS2DObject、CSS3DObject、CSS3DSprite同理）：

import myLabel from './myLabel.vue'

const createLabel = (id, data) => {
  let myDiv = document.createElement('div')
  myDiv.id = id
  document.getElementById('container')?.appendChild(myDiv)
  let vueComInstance = createApp(myLabel, {
    msg: data,            //向组件内部传值（组件内部props定义msg以接受数据）
    onClick:()=>{}	//子组件内部可通过emit('click')触发该方法
  })

  //用于后续调用组件内部的方法，假设组件内部暴露出updateData方法，
  //则通过labelCom.updateData()调用即可
  let labelCom = vueComInstance.mount(`#${id}`)
  //当场threejs的一个模型一样去设置位置.position或添加到场景
  let label = new CSS3DSprite(myDiv)
  return {
    label
    labelCom
  }
}

CSS2DObject：渲染的标签默认保持自身像素值。
CSS3DObject：渲染结果就像一个矩形平面网格模型一样。你通过相机控件OrbitControls旋转、缩放三维场景，CSS3模型对象CSS3DObject跟着旋转、缩放。
CSS3DSprite：CSS3DSprite对应的HTML标签，可以跟着场景缩放，位置可以跟着场景旋转，但是自身的姿态角度始终平行于canvas画布，不受旋转影响，就像精灵模型一样Sprite；CSS3DSprite尺寸、位置、缩放等渲染规律和CSS3对象模型CSS3DObject基本一致。