three.js实现全景展厅漫游(项目实战)

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { Pane } from 'tweakpane';
 
// 创建场景、相机和渲染器
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 });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加鼠标控制
const controls = new OrbitControls(camera, renderer.domElement);
 
// 创建全景图
const loader = new RGBELoader();
loader.loadAsync('./assets/textures/radiant_cathedral_1k.hdr').then((texture) => {
  scene.background = texture;
  texture.mapping = THREE.EquirectangularReflectionMapping;
});
 
// 创建参数调整面板
const pane = new Pane();
pane.addInput(camera.position, 'x').name('相机X位置').step(0.1).on('change', () => controls.update());
pane.addI