当前位置：首页 > JavaScript

js实现街景图

2026-02-03 03:00:34JavaScript

使用Google Maps JavaScript API实现街景

在HTML文件中引入Google Maps JavaScript API库，确保替换YOUR_API_KEY为实际API密钥。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=streetView" async defer></script>

创建包含街景的div容器并设置样式：

<div id="street-view" style="width: 100%; height: 500px;"></div>

初始化街景视图的JavaScript代码：

js实现街景图

function initMap() {
  const location = { lat: 40.7580, lng: -73.9855 }; // 纽约时代广场坐标
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view"),
    {
      position: location,
      pov: { heading: 165, pitch: 0 },
      zoom: 1
    }
  );
}

使用Three.js自定义街景

通过Three.js加载全景图像实现基础街景效果：

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 texture = new THREE.TextureLoader().load('panorama.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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

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

移动端适配处理

添加触摸事件支持实现街景旋转：

js实现街景图

let isDragging = false;
let previousTouchPosition = { x: 0, y: 0 };

window.addEventListener('touchstart', (e) => {
  isDragging = true;
  previousTouchPosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
});

window.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const deltaX = e.touches[0].clientX - previousTouchPosition.x;
  camera.rotation.y -= deltaX * 0.01;
  previousTouchPosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
});

window.addEventListener('touchend', () => {
  isDragging = false;
});

性能优化技巧

使用WebWorker预处理全景图像：

// worker.js
self.onmessage = function(e) {
  const imgData = e.data;
  // 图像处理逻辑
  postMessage(processedData);
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(imageData);
worker.onmessage = function(e) {
  texture.image.data = e.data;
  texture.needsUpdate = true;
};

实现LOD(细节层次)控制：

const lod = new THREE.LOD();
for (let i = 0; i < 3; i++) {
  const geometry = new THREE.SphereGeometry(500, 60 - i*20, 40 - i*10);
  geometry.scale(-1, 1, 1);
  const mesh = new THREE.Mesh(geometry, material);
  lod.addLevel(mesh, i * 100);
}
scene.add(lod);