如何在网页中实现多个可交互的3D建筑模型（悬停显示文字 + 点击弹出模态框）-js教程-PHP中文网

本文详解如何使用three.js和raycaster为多个3d模型（如城市中的不同建筑）添加鼠标悬停提示与点击响应功能，涵盖坐标转换、射线检测、事件模拟及模态框触发逻辑。

本文详解如何使用three.js和raycaster为多个3d模型（如城市中的不同建筑）添加鼠标悬停提示与点击响应功能，涵盖坐标转换、射线检测、事件模拟及模态框触发逻辑。

在Three.js中实现3D模型的交互性（如悬停高亮、信息提示、点击弹窗）完全可行，核心依赖于 THREE.Raycaster —— 它通过从相机向屏幕坐标发射一条虚拟射线，检测该射线是否与场景中的指定对象相交，从而精准定位用户操作的目标模型。

✅ 基础准备：统一管理可交互模型

首先，将4栋建筑模型（假设已加载为 THREE.Mesh 实例）存入数组，便于统一检测：

const buildings = [building1, building2, building3, building4];
// 确保每个模型都设置了唯一标识（推荐），便于后续逻辑区分：
building1.userData.id = 'office-tower';
building2.userData.id = 'shopping-mall';
building3.userData.id = 'residential-block';
building4.userData.id = 'city-hall';

⚠️ 注意：务必为每个模型设置 userData 或其他自定义属性（如 name），避免直接用 === 比较对象引用（易因重渲染或克隆失效）。

✅ 鼠标坐标映射与射线投射

在渲染循环（requestAnimationFrame）中实时更新射线起点与方向：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 监听鼠标移动，将屏幕像素坐标归一化到 [-1, 1] 区间
window.addEventListener('mousemove', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

// 渲染循环内（如 animate() 函数中）
function render() {
    raycaster.setFromCamera(mouse, camera); // 关键：从相机位置沿鼠标方向发射射线
    const intersects = raycaster.intersectObjects(buildings);

    // 模拟 mouseenter / mouseleave
    if (intersects.length > 0) {
        const target = intersects[0].object;
        if (!currentHoverTarget) {
            // 首次悬停：显示浮动文本（例如使用 DOM 元素绝对定位）
            showTooltip(target.userData.id, intersects[0].point);
            currentHoverTarget = target;
        }
    } else {
        if (currentHoverTarget) {
            hideTooltip();
            currentHoverTarget = null;
        }
    }
}

✅ 实现悬停文本提示（DOM 方式示例）

创建一个轻量级

three.js积木模型森林瀑布流动特效

一款three.js积木模型森林瀑布流动特效

下载

作为 tooltip，并动态定位在模型世界坐标投影后的屏幕位置：

const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.style.cssText = 'position: absolute; pointer-events: none; background: rgba(0,0,0,0.8); color: white; padding: 8px 12px; border-radius: 4px; font-size: 14px; z-index: 10;';
document.body.appendChild(tooltip);

function showTooltip(id, worldPosition) {
    const screenPosition = worldPosition.clone().project(camera);
    const x = (screenPosition.x * 0.5 + 0.5) * window.innerWidth;
    const y = (-screenPosition.y * 0.5 + 0.5) * window.innerHeight;

    tooltip.textContent = `? ${id.replace('-', ' ')}`;
    tooltip.style.left = `${x + 15}px`;
    tooltip.style.top = `${y - 25}px`;
    tooltip.style.display = 'block';
}

function hideTooltip() {
    tooltip.style.display = 'none';
}

✅ 绑定点击事件：打开对应模态框

监听全局 click 事件，结合当前悬停目标触发业务逻辑：

let currentHoverTarget = null;

window.addEventListener('click', () => {
    if (!currentHoverTarget) return;

    // 根据模型 ID 打开专属模态框（此处以 Bootstrap Modal 为例）
    switch (currentHoverTarget.userData.id) {
        case 'office-tower':
            $('#buildingModal').find('.modal-title').text('金融大厦');
            $('#buildingModal').find('.modal-body').html('<p>42层甲级写字楼，入驻企业超200家。</p>');
            $('#buildingModal').modal('show');
            break;
        case 'shopping-mall':
            $('#buildingModal').find('.modal-title').text('星光购物中心');
            $('#buildingModal').find('.modal-body').html('<p>集购物、餐饮、娱乐于一体的地标综合体。</p>');
            $('#buildingModal').modal('show');
            break;
        // ... 其他建筑同理
    }
});

✅ 性能与健壮性建议

性能优化：若模型数量较多，可对 intersectObjects() 的检测列表做动态过滤（如仅检测可见/启用状态的模型）；
抗抖动处理：为避免频繁触发 mouseenter/leave，可添加简单时间阈值（如 Date.now() - lastHoverTime > 50）；
移动端适配：需补充 touchstart/touchmove 事件，并将 event.touches[0] 替代 event.clientX/Y；
无障碍支持：为模型添加 aria-label，并确保模态框支持键盘关闭（ESC）与焦点管理。

通过以上结构化实现，你不仅能精准响应每栋建筑的交互行为，还能轻松扩展至数十个模型——Raycaster 是 Three.js 中实现真实3D UI交互的基石工具，掌握它，即掌握了通往沉浸式Web体验的关键钥匙。