<template>
  <div ref="container" class="container"></div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  name: 'Map2Point5D',
  mounted() {
    this.initThreeJS();
  },
  methods: {
    initThreeJS() {
      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, this.$refs.container.clientWidth / this.$refs.container.clientHeight, 0.1, 1000);
      camera.position.set(0, 5, 10); // 初始位置
      camera.lookAt(0, 0, 0);

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(this.$refs.container.clientWidth, this.$refs.container.clientHeight);
      this.$refs.container.appendChild(renderer.domElement);

      // 创建平面几何体
      const geometry = new THREE.PlaneGeometry(20, 20); // 根据图片比例调整宽高

      // 加载纹理
      const textureLoader = new THREE.TextureLoader();
      textureLoader.load(
        'http://127.0.0.1:8081/bigScreenServer/static/1818946453516185602.jpg', // 替换为你的图片URL
        (texture) => {
          const material = new THREE.MeshBasicMaterial({ map: texture });
          const plane = new THREE.Mesh(geometry, material);
          plane.rotation.x = -Math.PI / 6; // 初始倾斜角度
          scene.add(plane);
        },
        undefined,
        (error) => {
          console.error('纹理加载失败:', error);
        }
      );

      // 添加环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);

      // 添加方向光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
      directionalLight.position.set(5, 10, 7.5);
      scene.add(directionalLight);

      // 鼠标控制
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableRotate = true;
      controls.enableZoom = true;
      controls.enablePan = true;

      // 设置初始倾斜角度和限制
      const initialTiltAngle = Math.PI / 6; // 初始倾斜角度（30度）
      controls.maxPolarAngle = initialTiltAngle; // 最大俯视角度
      controls.minPolarAngle = 0; // 最小俯视角度

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

      // 窗口大小调整处理
      window.addEventListener('resize', () => {
        camera.aspect = this.$refs.container.clientWidth / this.$refs.container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(this.$refs.container.clientWidth, this.$refs.container.clientHeight);
      });
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>
