大屏地图改造

黄何裕

2024-07-29 131b17d3e845cc5e394283f85acc8cb88824d3e0

大屏地图改造

 src/views/screen/components/screen-map-three/experience/camera.js

@@ -16,15 +16,17 @@
    // 设置透视相机
    setInstance() {
        this.instance = new PerspectiveCamera(45, this.sizes.width / this.sizes.height, 0.1, 200);
        this.instance.position.set(0, 25,25);
        this.instance.position.set(0,30,25);
        this.scene.add(this.instance);
        this.instance.position.z = 10;
        this.instance.position.x = 0;
        // const help = new CameraHelper(this.instance);
        // this.scene.add(help);
    }

    setOrbitControls() {
        this.controls = new OrbitControls(this.instance, this.canvas);
        this.controls.target.set(0, 0, 5);
        this.controls.target.set(0, 0, 1);
        this.controls.enableDamping = true;
        this.controls.minDistance = 20;
        this.controls.maxDistance = 80;

 src/views/screen/components/screen-map-three/experience/world/enviroment.js

@@ -13,8 +13,8 @@
    this.textureLoader = new THREE.TextureLoader();

    this.setSunLight();
    this.setRotateHola();
    this.setBackground();
    // this.setRotateHola();
    // this.setBackground();
    this.setCirclePoint();

    // this.debuger();

 src/views/screen/components/screen-map-three/experience/world/map.js

@@ -3,13 +3,14 @@
import mapData from "@/assets/map/zigong2.json";
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer";

import textureMapImage from "@/assets/map/texture/gz-map.jpg";
// import textureMapImage from "@/assets/map/texture/gz-map.jpg";
import textureMapImage from "@/assets/images/screen/pageBg1.jpg";
import textureMapFxImage from "@/assets/map/texture/gz-map-fx.jpg";

import gsap from "gsap";

// 地图深度
const MAP_DEPTH = 0.2;
const MAP_DEPTH = 0;

const projection = d3
  .geoMercator()