js实现360全景
实现360全景的JavaScript方法
使用Three.js库
Three.js是一个强大的3D JavaScript库，适合创建360全景效果。以下是一个基础实现示例：
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 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();使用Panolens.js库
Panolens.js是专门为全景查看设计的轻量级库：
const panorama = new PANOLENS.ImagePanorama('panorama.jpg');
const viewer = new PANOLENS.Viewer({
container: document.getElementById('panorama-container')
});
viewer.add(panorama);纯CSS实现简单全景
对于简单的需求，可以使用CSS 3D变换：
<div class="panorama-container">
<img src="panorama.jpg" class="panorama-image">
</div>
<style>
.panorama-container {
width: 100%;
height: 100vh;
overflow: hidden;
perspective: 1000px;
}
.panorama-image {
width: 300%;
height: 100%;
transform-style: preserve-3d;
animation: rotate 60s linear infinite;
}
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
</style>移动设备支持
为支持移动设备陀螺仪控制：
window.addEventListener('deviceorientation', (event) => {
const beta = event.beta; // -180到180
const gamma = event.gamma; // -90到90
// 根据陀螺仪数据更新相机位置
camera.rotation.set(
THREE.MathUtils.degToRad(beta * 0.5),
THREE.MathUtils.degToRad(gamma * 0.5),
0
);
}, true);性能优化建议
- 使用压缩的等矩形全景图（建议分辨率不超过8000x4000）
- 启用WebGL抗锯齿
- 对于Three.js，考虑使用BufferGeometry代替常规Geometry
- 实现动态分辨率调整
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});交互功能实现
添加热点和交互控制：
// Three.js中添加热点
const hotspotGeometry = new THREE.SphereGeometry(1, 16, 16);
const hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const hotspot = new THREE.Mesh(hotspotGeometry, hotspotMaterial);
hotspot.position.set(0, 0, -10);
scene.add(hotspot);
// 点击事件
window.addEventListener('click', (event) => {
const mouse = new THREE.Vector2(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1
);
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
console.log('点击了全景中的对象');
}
});
