如何在three.js中添加360全景图中的div元素或热点？

// 创建全景场景
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建全景背景
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('全景图路径');
var sphereGeometry = new THREE.SphereGeometry(500, 60, 40);
var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

// 创建div元素或热点
var divElement = document.createElement('div');
divElement.style.position = 'absolute';
divElement.style.width = '100px';
divElement.style.height = '100px';
divElement.style.backgroundColor = 'red';
divElement.innerHTML = '热点';
var cssObject = new THREE.CSS2DObject(divElement);
cssObject.position.set(0, 0, -500); // 设置div元素的位置
scene.add(cssObject);

// 渲染场景
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建CSS2D渲染器
var cssRenderer = new THREE.CSS2DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
document.body.appendChild(cssRenderer.domElement);

// 添加交互事件
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseClick(event) {
    event.preventDefault();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObject(sphere);

    if (intersects.length > 0) {
        // 点击了全景图中的热点
        // 执行相应的操作或显示相关信息
    }
}

window.addEventListener('click', onMouseClick, false);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    cssRenderer.render(scene, camera);
}

animate();