threejs 热点创建、点击捕捉事件

在 Three.js 中，热点（Hotspots）通常用于增强交互体验，例如在全景图中添加可点击的区域或图标，用户点击后可以触发特定事件（如切换视角、显示信息等）。以下是关于如何实现和使用热点的相关 API 和方法的详细介绍。

---

结论

Three.js 本身没有专门的“热点 API”，但可以通过结合 THREE.Mesh、Raycaster 和事件监听器来实现热点功能。

---

详细展开

1. 核心概念

• 热点：一个可交互的对象，通常是三维空间中的一个几何体（如球体、立方体等），用户可以点击它触发事件。
• Raycaster：用于检测鼠标或触摸位置是否与场景中的对象相交。
• 事件监听：通过监听鼠标点击事件，判断用户是否点击了热点。

---

2. 实现步骤

(1) 创建热点

使用 THREE.Mesh 创建一个几何体作为热点，并将其添加到场景中。

// 创建热点几何体（例如球体）
const hotspotGeometry = new THREE.SphereGeometry(0.1, 32, 32); // 半径为0.1，细分度为32x32
const hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色材质
const hotspot = new THREE.Mesh(hotspotGeometry, hotspotMaterial);

// 设置热点位置
hotspot.position.set(1, 1, -2); // 设置热点在三维空间中的位置

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

(2) 使用 Raycaster 检测点击

THREE.Raycaster 是用来检测鼠标或触摸位置是否与场景中的对象相交的核心工具。

// 初始化 Raycaster 和鼠标位置
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 监听鼠标点击事件
window.addEventListener('click', (event) => {
    // 计算鼠标在屏幕上的归一化坐标 (-1 到 1)
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 更新 Raycaster 的射线方向
    raycaster.setFromCamera(mouse, camera);

    // 检测与场景中对象的相交
    const intersects = raycaster.intersectObjects(scene.children);

    // 如果有相交对象
    if (intersects.length > 0) {
        const intersectedObject = intersects[0].object; // 获取第一个相交的对象

        // 判断是否点击了热点
        if (intersectedObject === hotspot) {
            console.log('热点被点击了！');
            // 在这里可以添加热点点击后的逻辑，例如切换视角或显示信息
        }
    }
});

(3) 添加热点提示或图标

为了让用户知道某个位置是可交互的，可以在热点上添加提示图标。可以通过加载纹理并应用到热点材质上来实现。

// 加载纹理作为热点图标
const textureLoader = new THREE.TextureLoader();
const iconTexture = textureLoader.load('icon.png'); // 替换为你的图标路径

// 创建带有图标的热点材质
const hotspotMaterialWithIcon = new THREE.MeshBasicMaterial({
    map: iconTexture, // 使用纹理贴图
    transparent: true // 启用透明效果
});

// 应用材质到热点
hotspot.material = hotspotMaterialWithIcon;

(4) 动态更新热点位置

如果需要动态更新热点的位置，可以直接修改热点对象的 position 属性。

hotspot.position.set(x, y, z); // 设置新的位置

---

3. 完整示例代码

以下是一个完整的热点实现示例：

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

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

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

// 加载纹理作为热点图标
const textureLoader = new THREE.TextureLoader();
const iconTexture = textureLoader.load('icon.png'); // 替换为你的图标路径

// 创建热点几何体
const hotspotGeometry = new THREE.SphereGeometry(0.1, 32, 32);
const hotspotMaterial = new THREE.MeshBasicMaterial({
    map: iconTexture,
    transparent: true
});
const hotspot = new THREE.Mesh(hotspotGeometry, hotspotMaterial);

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

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

// 初始化 Raycaster 和鼠标位置
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 监听鼠标点击事件
window.addEventListener('click', (event) => {
    // 计算鼠标在屏幕上的归一化坐标 (-1 到 1)
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 更新 Raycaster 的射线方向
    raycaster.setFromCamera(mouse, camera);

    // 检测与场景中对象的相交
    const intersects = raycaster.intersectObjects(scene.children);

    // 如果有相交对象
    if (intersects.length > 0) {
        const intersectedObject = intersects[0].object;

        // 判断是否点击了热点
        if (intersectedObject === hotspot) {
            console.log('热点被点击了！');
            alert('你点击了一个热点！'); // 弹出提示
        }
    }
});

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

---

相关延展

1. 热点的样式优化

• 使用更复杂的几何体（如圆柱体、箭头形状）作为热点。
• 添加动画效果（如旋转、缩放）以吸引用户注意。

2. 多热点支持

可以通过创建多个热点对象，并将它们存储在一个数组中，方便统一管理。

const hotspots = [];
for (let i = 0; i < 5; i++) {
    const hotspot = new THREE.Mesh(
        new THREE.SphereGeometry(0.1, 32, 32),
        new THREE.MeshBasicMaterial({ color: 0xffffff })
    );
    hotspot.position.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
    scene.add(hotspot);
    hotspots.push(hotspot);
}

// 检测点击时遍历所有热点
window.addEventListener('click', (event) => {
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(hotspots);
    if (intersects.length > 0) {
        console.log('点击了热点:', intersects[0].object);
    }
});

3. 热点交互扩展

• 点击热点后弹出信息框，显示相关内容。
• 点击热点后播放音频或视频。
• 点击热点后切换场景或视角。

---

总结

Three.js 的热点功能通过结合 THREE.Mesh、Raycaster 和事件监听器实现。虽然没有专门的“热点 API”，但通过灵活使用这些工具，可以轻松实现丰富的交互效果。