把原生 DOM 标签转换后加入到 3D 场景空间中显示

把原生 DOM 标签转换后加入到 3D 场景空间中显示

function domTo3D() {
  // 1. 准备原生 DOM 标签
  const tag = document.createElement('span')
  tag.innerHTML = '我是文字'
  tag.style.color = 'white'

  // 2. 引入 CSS3DObject, CSS3DRenderer 并把 DOM 转换成 3D 物体并加入到场景中
  // 原生标签的 px 的值会平移到 3d 空间中作为单位
  const tag3d = new CSS3DObject(tag)
  tag3d.scale.set(1 / 16, 1 / 16, 1 / 16)
  scene.add(tag3d)

  labelRenderer = new CSS3DRenderer()
  labelRenderer.setSize(window.innerWidth, window.innerHeight)
  labelRenderer.domElement.style.pointerEvents = 'none' // 在什么条件下让标签触发鼠标交互事件
  labelRenderer.domElement.style.position = 'fixed'
  labelRenderer.domElement.style.left = '0'
  labelRenderer.domElement.style.top = '0'
  document.body.appendChild(labelRenderer.domElement)

  // 重要：CSS3DRenderer 是一个新的渲染器，需要在渲染循环调用并适配
}
基于 CSS3DRenderer 会设置单独的一个 div 容器用于加载显示旋转位移缩放标签物体

基于 CSS3DObject 把获取/创建的 DOM，转成 three.js 的 3D 物体