three.js制作全景地图

// 引入Three.js库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景、相机和渲染器
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 loader = new THREE.CubeTextureLoader();
loader.setPath('path/to/your/panorama/images/');
const texture = loader.load([
    'right.jpg', 'left.jpg',
    'top.jpg', 'bottom.jpg',
    'front.jpg', 'back.jpg'
]);

scene.background = texture;

// 创建球体几何体
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // 反转球体以正确显示全景图像

// 添加相机控制
const controls = new OrbitControls(camera, renderer.domElement);

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

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();