three.js 射线拾取 弹出HTML标签

    <div id="messageTag" style="visibility:hidden;width:500px;height:400px;position: absolute;color: #fff;z-index: 2;font-size: 16px;">
        <div style="position:relative;">
            <div style="position: absolute;left: 0px;top: 0px;">
                <img src="./assets/信息背景.png" alt="" style="width:400px;opacity: 1.0;">
            </div>
            <div id="granaryName" style="position:absolute;left:25px;top:40px;font-size:16px">平房仓 P_01</div>
            <div style="position:absolute;left:290px;top:25px">
                <img src="./assets/温度.png" alt="" style="width:50px;">
            </div>

            <div style="position:absolute;left:330px;top:40px">
                <span id="temperature">19</span>℃
            </div>
            <div id="grain" style="position:absolute;left:170px;top:50px">
                <span id="grain">红豆</span>(吨)
            </div>
            <div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
                <img id="grainImg" src="./assets/豆子/红豆.png" alt="" style="width:60px;">
            </div>
            <div style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">
                <span id="weight">3600</span>t
            </div>
            <div style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;">
                仓高—<span id="granaryHeight">12</span>m</div>
            <div style="position:absolute;left:225px;top:170px;padding:8px 25px;">
                粮高— <span id="grainHeight">5</span> m
            </div>
        </div>
    </div>

/
/
/
/
/

var granaryArr = [];

loader.load("./scene/model.glb", function(gltf) {
    gltf.scene.traverse(function(object) {
            if (object.type === 'Mesh') {
                // 批量更改所有Mesh的材质
                object.material = new THREE.MeshLambertMaterial({
                    map: object.material.map, //获取原来材质的颜色贴图属性值
                    color: object.material.color, //读取原来材质的颜色
                })
            }
        })
        // 所有粮仓模型的父对象名称：'粮仓'
    var group = gltf.scene.getObjectByName('粮仓');
    console.log('粮仓', group);
    group.traverse(function(obj) {
        if (obj.type === 'Mesh') {
            granaryArr.push(obj);
        }
    })
    model.add(gltf.scene);
})


scene.add(model);



import {
    CSS2DRenderer,
    CSS2DObject
} from '../../../three.js-r123/examples/jsm/renderers/CSS2DRenderer.js';

// 创建一个HTML标签对象
function tag(domID) {
    var dom = document.getElementById(domID);
    var label = new CSS2DObject(dom);
    dom.style.pointerEvents = 'none';
    return label;
}

// 创建一个CSS2渲染器CSS2DRenderer
var labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '200px';
labelRenderer.domElement.style.left = '250px';
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);

// 鼠标单击射线拾取meshArr中的某个粮仓Mesh
var chooseMesh = null

var mainCanvas = document.querySelector('body>canvas')

function choose(event, messageTag) {
    if (chooseMesh) {
        chooseMesh.material.color.set(0xffffff); // 把上次选中的mesh设置为原来的颜色
    }

    var Sx = event.clientX;
    var Sy = event.clientY;

    var x = ((event.clientX - mainCanvas.getBoundingClientRect().left) / mainCanvas.offsetWidth) * 2 - 1;
    var y = -((event.clientY - mainCanvas.getBoundingClientRect().top) / mainCanvas.offsetHeight) * 2 + 1;

    var raycaster = new THREE.Raycaster();

    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);

    var intersects = raycaster.intersectObjects(granaryArr);
    // console.log("射线器返回的对象", intersects);
    // console.log("射线投射器返回的对象 点point", intersects[0].point);
    // console.log("射线投射器的对象 几何体",intersects[0].object.geometry.vertices)
    // intersects.length大于0说明，说明选中了模型
    if (intersects.length > 0) {
        chooseMesh = intersects[0].object;
        chooseMesh.material.color.set(0x00ffff); //选中改变颜色，这样材质颜色贴图.map和color颜色会相乘
        chooseMesh.point = intersects[0].point;
    } else {
        chooseMesh = null;
    }
}

addEventListener('click', choose); // 监听窗口鼠标单击事件,鼠标单击选中某个国家Mesh
// addEventListener('mousemove', choose);//鼠标滑动事件


var messageTag = tag("messageTag"); //创建粮仓标注的标签
scene.add(messageTag); //id"messageTag"对应的HTML元素作为three.js标签

import messageData from './messageData.js' //粮仓数据模拟

// 内容需要改变的HTML元素对应的id
var idArr = ["granaryName", "temperature",
    "grain", "grainImg", "weight", "granaryHeight", "grainHeight"
];

// click mousemove
addEventListener('click', function() {
    if (chooseMesh) {
        messageTag.element.style.visibility = 'hidden'; //隐藏标签
    }
    choose(event, messageTag); //执行射线拾取的代码

    // 选中不同粮仓，HTML标签信息跟着改变
    if (chooseMesh) {
        //批量更新粮仓chooseMesh的标签信息
        idArr.forEach(function(id) {
            var dom = document.getElementById(id);
            dom.innerHTML = messageData[chooseMesh.name][id];
        })
        messageTag.element.style.visibility = 'visible';
        // messageTag.position.copy(chooseMesh.getWorldPosition()); //通过粮仓世界坐标设置标签位置
        messageTag.position.copy(chooseMesh.point); //射线在粮仓表面拾取坐标
    }
});


function render() {
    labelRenderer.render(scene, camera); //渲染HTML标签对象
    renderer.render(scene, camera); //执行渲染操作
    requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();


/
/
/
/
/

var messageDaa = {
  L_01:{
    granaryName:"L_01",
    temperature:"35.3",
    grain:"aaa",
    grainImg:"./imh.png",
    weight:6700,
    granaryHeight:36,
    grainHeight:"25.0"
  },
  L_02:{
    granaryName:"L_02",
    temperature:"35.3",
    grain:"aaa",
    grainImg:"./imh.png",
    weight:6700,
    granaryHeight:36,
    grainHeight:"25.0"
  },
  L_03:{
     granaryName:"L_03",
    temperature:"35.3",
    grain:"aaa",
    grainImg:"./imh.png",
    weight:6700,
    granaryHeight:36,
    grainHeight:"25.0"
  }
}