THREE.JS 可视化标签

笔记记录篇、记录THREE.JS下构建可视化标签的几种方法和它们的区别点。

前言：

最近工作比较繁忙，相对与平时而言，更新的次数大幅度降低了，本篇为记录篇，主要为THREE.JS下构建可视化标签的几种方法和它们的区别点。

一精灵标签

精灵标签依托精灵模型（Sprite）实现吗，实用该模型作为标签的主要表现为，它的面永远平行于视角，换个方法说就是不管从那个视角看向它，它都永远面向你

优点：

缩放与视角：根据摄像机的远近动态自动缩放，这让它在3D场景中表现的更加自然。

性能：精灵对象它们只是一个简单的平面纹理贴图不许计算复杂的几何体或HTML元素，这使得它在某些场景中存在大量静态标签时表现更佳。

互动：由于精灵模型本身是Three.js中的一个3D对象，所以它也支持被射线所检测，这使得它与其它3D元素或模型交互的更加自然。

效果与动画：精灵模型本身也属于模型中的一种，所以它也支持光照、阴影、透明度、物体的变形、粒子效果、反射、折射等等并且也可以在精灵模型上应用THREE中的各种动画效果。

缺点：

不适用于大型场景中的动态标签，尤其是不断在运动的标签，在大项场景中的表现到后期会卡顿甚至卡死。

由于精灵模型会随着摄像机的远近而变大变小，所以不适用于那种大小固定不变的标签，比如地图上的人员标记。

核心代码：

  import * as THREE from 'three';
  
  // 贴图
  const texture = new THREE.TextureLoader().load(firePng); // firePng 为图片地址
  
  // 精灵模型
  const spriteMaterial = new THREE.SpriteMaterial({
    map: texture
  });

  const sprite = new THREE.Sprite(spriteMaterial);
  sprite.scale.set(10, 10, 10)
  sprite.position.set(0, 30, 0);
  scene.add(sprite)

二 CSS2D

CSS2D依托于HTML元素和CSS2DRenderer，该方法的表现为在body层添加一个DIV，将标签通过CSS2DObject转为一个HTML元素挂载至外层的DIV中。

优点：

固定大小：由于是挂载在外层DIV上的所以不会随着相机的放大缩小而改变。

定制化：使用HTML元素构建而成，这就意味着你可以使用CSS等样式对它进行定制化开发，在信息弹窗上表现得更加合适，同时它也支持click事件的绑定，这意味着更好的交互。

缺点：

与精灵模型相比它在静态表现上稍差一点，不适用于大量的静态标签，但在大型场景下动态标签表现上优于精灵模型。

CSS2D 标签是基于 HTML 元素渲染的，它不会直接集成在 three.js 的 3D 渲染管线中，而是通过 2D 层叠的 HTML 元素实现。虽然 CSS2D 标签也会随着摄像机的运动而调整，但它更像是在渲染过程中“叠加”在 3D 场景之上，无法和 3D 场景的元素互动得那么自然。

核心代码：

  import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
  
  // 添加CSS2D标签渲染器
  const cssRenderer = new CSS2DRenderer();
  cssRenderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(cssRenderer.domElement);

  // 创建标签
  const div = document.createElement('div');
  div.className = 'custom-tag'

  const tag = new CSS2DObject(div);
  tag.position.set(0, 80, 0)

  scene.add(tag);
  

  // css2d渲染器，在帧动画中渲染，更新
  function requestAnimation() {
    cssRenderer.render(scene, camera);
    requestAnimationFrame(requestAnimation);
  }

  requestAnimation();

三 CSS3D

与CSS2D一致，不同点是CSS3D是将元素转换后挂载在3D场景下的，它和精灵模型一样会随着相机的大小而改变。