【threejs 】添加标签和射线

上一篇文章我们说了世界坐标和屏幕坐标的准换那么有什么应用呢？

应用

可以实现该效果：鼠标移动该模块的时候展示该模块的标签。或者可以常显，射线就是当鼠标移动到该模块该模块变化颜色

创建一个标签js文件作为封装的方法

// 创建一个HTML标签
function tag() {
  // 创建div元素(作为标签)
  var div = document.createElement('div');
  div.style.visibility = 'hidden';
  div.innerHTML = 'GDP:'+0;
  div.style.padding = '4px 10px';
  div.style.color = '#fff';
  div.style.fontSize = '16px';
  div.style.position = 'absolute';
  div.style.backgroundColor = 'rgba(25,25,25,0.5)';
  div.style.borderRadius = '5px';
  // 该上面设置的发小都是屏幕坐标大小
  //div元素包装为CSS2模型对象CSS2DObject
  var label = new CSS2DObject(div);
  div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
  // 设置HTML元素标签在three.js世界坐标中位置
  // label.position.set(x, y, z);
  return label;//返回CSS2模型标签      
}

// 创建一个CSS2渲染器CSS2DRenderer
var labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
// // 避免renderer.domElement影响HTMl标签定位，设置top为0px
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left = '0px';
// //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);

export {tag,labelRenderer}

     var label = tag();
    scene.add(label);//标签插入场景中
    
    var chooseMesh = null;//标记鼠标拾取到的mesh
    function choose(event) {
      if (chooseMesh) {
        // 把上次选中的mesh设置为原来的颜色
        chooseMesh.material.color.copy(chooseMesh.color);
      } else {
        label.element.style.visibility = 'hidden';//没有选中mesh，隐藏标签
      }
      var Sx = event.clientX; //鼠标单击位置横坐标
      var Sy = event.clientY; //鼠标单击位置纵坐标
      //屏幕坐标转WebGL标准设备坐标
      var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
      var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标
      //创建一个射线投射器`Raycaster`
      var raycaster = new THREE.Raycaster();
      //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
      raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
      //返回.intersectObjects()参数中射线选中的网格模型对象
      // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
      var intersects = raycaster.intersectObjects(meshGroup.children);
     
      // intersects.length大于0说明，说明选中了模型
      if (intersects.length > 0) {
        chooseMesh = intersects[0].object;
        chooseMesh.material.color.set(0x00ffff);//选中改变颜色
        // 根据鼠标位置设置标签位置(射线与mesh表面相交点世界坐标intersects[0].point)
        // intersects[0].point.y+=0.5;//偏移
        label.position.copy(intersects[0].point);
      
        if (chooseMesh.gdp) {
          label.element.innerHTML = chooseMesh.name + 'GDP：' + (chooseMesh.gdp / 1000000000000).toFixed(3) + '万亿美元';
        } else {
          label.element.innerHTML = '缺失数据';
        }
        label.element.style.visibility = 'visible';
      } else {
        chooseMesh = null;
      }
    }