我想在我用three.js安装的obj扩展模型的某些部分添加一个热点。我该怎么做呢？

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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

// 加载obj模型
var loader = new THREE.OBJLoader();
loader.load('path/to/your/obj/model.obj', function (object) {
    scene.add(object);
});

// 创建热点对象
var hotspotGeometry = new THREE.SphereGeometry(0.1, 32, 32);
var hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var hotspot = new THREE.Mesh(hotspotGeometry, hotspotMaterial);

// 设置热点位置
hotspot.position.set(1, 0, 0);

// 添加热点到场景中
scene.add(hotspot);

// 监听鼠标点击事件
renderer.domElement.addEventListener('click', function (event) {
    var mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true);

    for (var i = 0; i < intersects.length; i++) {
        if (intersects[i].object === hotspot) {
            // 当用户点击热点时触发的操作
            console.log('热点被点击了！');
        }
    }
}, false);

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();