3D展示与空间智能：从零构建你的第一个空间感知应用

1次阅读

共计 3593 个字符，预计需要花费 9 分钟才能阅读完成。

传统的 3D 展示技术往往只关注模型的渲染效果，却忽略了与真实空间的交互。用户只能被动观看，无法通过移动设备与 3D 内容进行自然互动。这种缺乏空间感知能力的展示方式，大大限制了用户体验的提升空间。

而空间智能技术的引入，让 3D 内容能够感知和理解真实环境的空间关系，实现虚实结合的全新交互体验。想象一下，你可以在手机屏幕上看到一个 3D 模型不仅停留在屏幕上，而是仿佛真实存在于你的房间中，随着你的移动而改变视角，甚至可以绕着它走动观察 – 这就是空间智能带来的魔力。

在 Web 平台上实现 3D 展示与空间智能的结合，目前主要有以下几个主流选择：

Three.js：轻量级的 3D 库，学习曲线平缓，社区资源丰富，适合快速原型开发
Babylon.js：功能更全面的 3D 引擎，内置物理引擎和高级渲染功能，但学习成本较高
A-Frame：基于 Three.js 的声明式框架，适合没有 3D 开发经验的开发者

对于初学者来说，我推荐从 Three.js 入手。它不仅文档完善，还有大量的示例代码可供参考，能够让你快速上手 3D 开发的基础概念。

WebXR 是浏览器中实现 VR/AR 应用的 API 标准。我们先来搭建一个最基础的 3D 场景：

// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});

// 设置渲染器大小并添加到 DOM
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 设置相机位置
camera.position.z = 5;

// 动画循环
function animate() {requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

现代浏览器提供了 DeviceOrientation 和 DeviceMotion API，可以获取设备的朝向和运动数据：

// 监听设备方向变化
window.addEventListener('deviceorientation', (event) => {
    // alpha: 设备绕 z 轴的旋转角度
    // beta: 设备绕 x 轴的旋转角度
    // gamma: 设备绕 y 轴的旋转角度
    console.log(` 方向: ${event.alpha}, ${event.beta}, ${event.gamma}`);
});

// 监听设备加速度
window.addEventListener('devicemotion', (event) => {
    // 加速度数据
    console.log(` 加速度: x=${event.acceleration.x}, y=${event.acceleration.y}, z=${event.acceleration.z}`);
});

结合上述 API，我们可以让 3D 物体对设备移动做出反应：

// 创建一组球体表示空间中的点位
const spheres = [];
for (let i = 0; i < 5; i++) {const geometry = new THREE.SphereGeometry(0.2, 32, 32);
    const material = new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff 
    });
    const sphere = new THREE.Mesh(geometry, material);

    // 随机位置
    sphere.position.x = Math.random() * 10 - 5;
    sphere.position.y = Math.random() * 10 - 5;
    sphere.position.z = Math.random() * 10 - 5;

    scene.add(sphere);
    spheres.push(sphere);
}

// 在动画循环中添加碰撞检测
function checkCollisions() {
    spheres.forEach(sphere => {
        // 简单的距离检测
        const distance = camera.position.distanceTo(sphere.position);
        if (distance < 1) { // 碰撞距离阈值
            sphere.material.color.setHex(0xff0000); // 碰撞时变红
        } else {sphere.material.color.setHex(0x00ff00); // 恢复绿色
        }
    });
}

// 修改动画循环
function animate() {requestAnimationFrame(animate);
    checkCollisions();
    renderer.render(scene, camera);
}

在移动设备上运行 WebGL 内容时，性能是需要特别关注的问题。以下是几个关键优化点：

减少绘制调用 ：合并几何体，使用 InstancedMesh 批量渲染相同物体
纹理优化 ：使用适当分辨率的纹理，避免过大尺寸
合理使用阴影 ：阴影计算很耗性能，仅在必要时开启
帧率控制 ：使用 requestAnimationFrame 的节流版本

// 节流版的动画循环
let lastTime = 0;
const frameRate = 30; // 目标帧率
const frameInterval = 1000 / frameRate;

function animate(time) {requestAnimationFrame(animate);

    const delta = time - lastTime;
    if (delta > frameInterval) {lastTime = time - (delta % frameInterval);

        // 更新场景
        renderer.render(scene, camera);
    }
}

在开发过程中，新手常会遇到以下几个问题：

坐标系混淆 ：Three.js 使用右手坐标系，而某些设备 API 可能使用不同坐标系。记得进行必要的转换
未处理权限请求 ：设备传感器 API 需要用户授权，务必处理权限被拒绝的情况
忽略设备兼容性 ：不是所有浏览器都支持 WebXR 和传感器 API，需要添加特性检测

// 特性检测示例
if (!('DeviceOrientationEvent' in window)) {alert('您的浏览器不支持设备方向 API');
}

// 请求权限
if (typeof DeviceOrientationEvent !== 'undefined' && 
    typeof DeviceOrientationEvent.requestPermission === 'function') {DeviceOrientationEvent.requestPermission()
        .then(response => {if (response === 'granted') {window.addEventListener('deviceorientation', handleOrientation);
            }
        })
        .catch(console.error);
} else {window.addEventListener('deviceorientation', handleOrientation);
}

掌握了基础实现后，你可以尝试以下进阶功能：