cesium_three/src/threeTool/ThreeLabel.js

import * as THREE from 'three';
// // 标注位置对应的模型对象obj
// export function createSprite(obj, state) {

//     // 创建一个包裹模型的立方体对象
//     const box = new THREE.Box3().setFromObject(obj);
//     // 获取模型的尺寸信息
//     const size = box.getSize(new THREE.Vector3());

//     // 输出模型的宽度、高度和深度
//     const { x, y, z } = size;

//     const texLoader = new THREE.TextureLoader();
//     let texture = texLoader.load("/static/img/labelBg.png");
//     const spriteMaterial = new THREE.SpriteMaterial({
//         map: texture,
//     });

//     const sprite = new THREE.Sprite(spriteMaterial);
//     sprite.name = `${obj.name || "模型"}标记`;

//     // 控制精灵大小
//     sprite.scale.set(x + 10, y / 2, 1);
//     // sprite.position.y = 5 / 2; // 标签底部箭头和空对象标注点重合
//     obj.add(sprite); //tag会标注在空对象obj对应的位置
// }

import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

// 创建一个HTML标签
function tag3D(name) {
    // 创建div元素(作为标签)
    var div = document.createElement('div');
    div.innerHTML = name;
    div.classList.add('tag');
    //div元素包装为CSS3模型对象CSS3DObject
    var label = new CSS3DObject(div);
    div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
    // 设置HTML元素标签在three.js世界坐标中位置
    // label.position.set(x, y, z);
    //缩放CSS3DObject模型对象
    label.scale.set(0.2, 0.2, 0.2);//根据相机渲染范围控制HTML 3D标签尺寸
    label.rotateY(Math.PI / 2);//控制HTML标签CSS3对象姿态角度
    // label.rotateX(-Math.PI/2);
    return label;//返回CSS3模型标签    
}

// 创建一个HTML标签
export function createSprite(obj) {

    // 创建一个包裹模型的立方体对象
    const box = new THREE.Box3().setFromObject(obj);
    // 获取模型的尺寸信息
    const size = box.getSize(new THREE.Vector3());

    // 输出模型的宽度、高度和深度
    const { x, y, z } = size;

    // 创建div元素(作为标签)
    var div = document.createElement('div');
    div.innerHTML = "风力发电机";
    div.classList.add('modelLabel');
    //div元素包装为CSS3模型对象CSS3DSprite
    var label = new CSS3DSprite(div);
    div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
    // 设置HTML元素标签在three.js世界坐标中位置
    label.position.set(x + x / 10, y / 2, z);
    //缩放CSS3DSprite模型对象
    label.scale.set(1, 1, 1);//根据相机渲染范围控制HTML 3D标签尺寸
    // label.rotateY(Math.PI / 2);//控制HTML标签CSS3对象姿态角度
    // label.rotateX(-Math.PI/2);

    label.name = `${obj.name || "模型"}标记`;
    label.userData.isLabelTag = true;

    console.log(1122, { x, y, z })

    obj.add(label);
}

// 创建一个CSS2渲染器CSS2DRenderer
function labelRenderer(container) {
    var labelRenderer = new CSS3DRenderer();
    labelRenderer.setSize(container.offsetWidth, container.offsetHeight);
    labelRenderer.domElement.style.position = 'absolute';
    // 相对标签原位置位置偏移大小
    labelRenderer.domElement.style.top = '0px';
    labelRenderer.domElement.style.left = '0px';
    // //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
    labelRenderer.domElement.style.pointerEvents = 'none';
    container.appendChild(labelRenderer.domElement);
    return labelRenderer;
}