h5实现街景

使用Three.js实现基础街景

Three.js是一个基于WebGL的JavaScript库，适合创建3D场景。通过加载全景图片可以实现街景效果。

安装Three.js库：

npm install three

创建基础场景：

import * as THREE from 'three';

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 geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // 反转球体使其面向内侧
const material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('panorama.jpg')
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

camera.position.set(0, 0, 0.1);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

使用全景图片资源

高质量全景图片是街景效果的关键。可以从以下途径获取：

• 使用专业全景相机拍摄
• 下载现成的全景图片资源
• 使用Google Street View API获取数据（需授权）

典型全景图片规格：

• 等距圆柱投影(Equirectangular Projection)
• 2:1宽高比
• 建议分辨率至少8000×4000像素

添加交互控制

实现鼠标拖拽查看不同角度：

let isUserInteracting = false;
let lon = 0, lat = 0;
let phi = 0, theta = 0;

document.addEventListener('mousedown', () => {
    isUserInteracting = true;
});

document.addEventListener('mousemove', (e) => {
    if(isUserInteracting) {
        lon = (e.clientX - window.innerWidth/2) * 0.1;
        lat = (e.clientY - window.innerHeight/2) * 0.1;
    }
});

document.addEventListener('mouseup', () => {
    isUserInteracting = false;
});

function updateCamera() {
    lat = Math.max(-85, Math.min(85, lat));
    phi = THREE.MathUtils.degToRad(90 - lat);
    theta = THREE.MathUtils.degToRad(lon);

    camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
    camera.position.y = 100 * Math.cos(phi);
    camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
    camera.lookAt(scene.position);
}

性能优化技巧

对于移动端和低配设备，可采取以下优化措施：

• 使用较低分辨率的全景图片
• 减少球体的分段数
• 实现渐进式加载（先加载低清图，再替换高清图）
• 添加加载进度指示器

内存管理方案：

// 释放纹理内存
function disposeTexture() {
    material.map.dispose();
    material.dispose();
    geometry.dispose();
}

高级功能扩展

实现多场景切换：

const panoramaUrls = ['scene1.jpg', 'scene2.jpg', 'scene3.jpg'];
let currentScene = 0;

function loadNewScene(index) {
    disposeTexture();
    material.map = new THREE.TextureLoader().load(panoramaUrls[index]);
    currentScene = index;
}

添加热点标记：

function addHotspot(x, y, z, callback) {
    const hotspot = new THREE.Mesh(
        new THREE.SphereGeometry(5, 16, 16),
        new THREE.MeshBasicMaterial({color: 0xff0000})
    );
    hotspot.position.set(x, y, z);
    hotspot.userData = {callback: callback};
    scene.add(hotspot);

    // 添加射线检测
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    document.addEventListener('click', (e) => {
        mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObject(hotspot);

        if(intersects.length > 0) {
            intersects[0].object.userData.callback();
        }
    });
}