首次提交

2025-03-18 14:19:20 +08:00
parent 8efe0e8b6f
commit c0bc1a0bb0
15 changed files with 59572 additions and 0 deletions
@@ -0,0 +1,128 @@
+import * as THREE from './three.module.js';
+import { OrbitControls } from './OrbitControls.js';
+import * as dat from './lil-gui.module.min.js';
+import { api } from './api.js';
+
+// 获取 DOM 元素
+const visualizer = document.getElementById("visualizer");
+const container = document.getElementById("container");
+const progressDialog = document.getElementById("progress-dialog");
+const progressIndicator = document.getElementById("progress-indicator");
+
+// 设置 GUI 控件
+const gui = new dat.GUI({ width: 150 });
+const initialFov = 75;
+const params = {
+    fov: initialFov
+};
+
+// 添加 FOV 控件
+gui.add(params, 'fov', 10, 120).name('缩放').step(0.1).onChange(() => {
+    camera.fov = params.fov;
+    camera.updateProjectionMatrix();
+});
+gui.hide();
+
+// 初始化渲染器
+const renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    extensions: { derivatives: true }
+});
+renderer.setPixelRatio(window.devicePixelRatio);
+renderer.setSize(window.innerWidth, window.innerHeight);
+container.appendChild(renderer.domElement);
+
+// 创建 PMREM 生成器
+const pmremGenerator = new THREE.PMREMGenerator(renderer);
+
+// 创建场景
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x000000);
+
+// 添加环境光
+const ambientLight = new THREE.AmbientLight(0xffffff);
+scene.add(ambientLight);
+
+// 设置相机
+const camera = new THREE.PerspectiveCamera(initialFov, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 0, 5);
+
+// 添加点光源
+const pointLight = new THREE.PointLight(0xffffff, 15);
+camera.add(pointLight);
+scene.add(camera);
+
+// 初始化轨道控制器
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.target.set(0, 0, 0);
+controls.enablePan = true;
+controls.enableDamping = true;
+
+// 处理窗口大小调整
+window.addEventListener('resize', onWindowResize, false);
+
+//显示控制
+gui.show();
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+
+// 状态变量
+let lastpanoImage = "";
+let needUpdate = false;
+
+// 帧更新函数
+function frameUpdate() {
+    const panoImage = visualizer.getAttribute("pano_image");
+
+    if (panoImage === lastpanoImage) {
+        if (needUpdate) {
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        requestAnimationFrame(frameUpdate);
+    } else {
+        needUpdate = false;
+        scene.clear();
+        progressDialog.open = true;
+        lastpanoImage = panoImage;
+        main(JSON.parse(lastpanoImage));
+    }
+}
+
+// 主函数：加载 pano 图像并设置场景
+async function main(panoImageParams) {
+    let panoTexture;
+    console.log("加载 pano 参数:", panoImageParams);
+
+    if (panoImageParams?.filename) {
+        const panoImageUrl = api.apiURL('/view?' + new URLSearchParams(panoImageParams)).replace(/extensions.*\//, "");
+        const panoLoader = new THREE.TextureLoader();
+        try {
+            panoTexture = await panoLoader.loadAsync(panoImageUrl);
+            console.log("加载 pano 纹理:", panoTexture);
+            panoTexture.mapping = THREE.EquirectangularReflectionMapping;
+            panoTexture.colorSpace = THREE.SRGBColorSpace;
+        } catch (error) {
+            console.error("加载 pano 图像失败:", error);
+        }
+    }
+
+    if (panoTexture) {
+        scene.environment = panoTexture;
+        scene.background = panoTexture;
+    }
+
+    needUpdate = true;
+    progressDialog.close();
+
+    frameUpdate();
+}
+
+// 初始化调用
+main();
+