feat:基础场景搭建

ZhangXianQiang

2024-03-29 c755b7c6e1d9dda26ac6c41a1c49896ebedd077d

feat:基础场景搭建

 src/views/screen/components/screen-map-cover/index.vue

New file
@@ -0,0 +1,36 @@
<template>
  <div class="map-container">
    <wrapper-title :title="'区域地图'"></wrapper-title>
    <div class="map-content">
    </div>
  </div>

</template>

<script>
import WrapperTitle from '../wrapper-title/index';

export default {
  name: 'ScreenMapCover',
  components: {
    WrapperTitle
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  flex: 1;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;

  .map-content {
    flex: 1;
    pointer-events: none;

  }

}
</style>

 src/views/screen/components/screen-map-three/index.vue

@@ -1,13 +1,23 @@
<template>
  <div>
    123
  <div class="map-container" ref="mapContainer">
    
  </div>
</template>

<script>
import World from './world/world';
let world = null;
export default {
  name: 'ScreenMapThree'
  name: 'ScreenMapThree',
  mounted() {
    world = new World(this.$refs.mapContainer);
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>

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

New file
@@ -0,0 +1,8 @@
import { PerspectiveCamera } from 'three';

function createCamera() {
  const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
  return camera;
}

export { createCamera };

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

New file
@@ -0,0 +1,11 @@
import {WebGLRenderer} from 'three';

function createRenderer() {
  const renderer = new WebGLRenderer();
  renderer.setPixelRatio(Math.min(2,window.devicePixelRatio));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearAlpha(0);
  return renderer;
}

export {createRenderer};

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

New file
@@ -0,0 +1,9 @@
import {Scene} from 'three';

function createScene() {
  const scene = new Scene();
  
  return scene;
}

export { createScene}

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

New file
@@ -0,0 +1,29 @@

import { createScene } from "./scene";
import { createRenderer } from "./renderer";
import { createCamera } from "./camera";
export default class World {
  /**
   * 生成3d场景构造函数
   * @param {*} container 3d场景html容器
   */
  constructor(container) {
    this.container = container;
    this.init();
    this.render();
  }
  init() {
    this.scene = createScene();
    this.renderer = createRenderer();
    this.camera = createCamera();
    this.scene.add(this.camera);
    this.container.appendChild(this.renderer.domElement);
  }

  render() {
    this.renderer.render(this.scene, this.camera);
    window.requestAnimationFrame(() => {
      this.render();
    })
  }
}

 src/views/screen/components/screen-wrapper/index.vue

@@ -11,7 +11,8 @@
        <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <!-- <screen-map></screen-map> -->
        <screen-map-cover></screen-map-cover>
        <screen-table class="animate-enter-y enter-top"></screen-table>
        <!-- <screen-detection></screen-detection> -->

@@ -30,6 +31,7 @@
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
import ScreenMapCover from '../screen-map-cover/index';
import ScreenTable from '../screen-table/index';
export default {
  name: 'ScreenWrapper',
@@ -40,7 +42,8 @@
    ScreenVideo,
    ScreenCar,
    ScreenMap,
    ScreenTable
    ScreenTable,
    ScreenMapCover
  },
  methods: {
    returnPath() {
@@ -105,24 +108,30 @@
  flex-direction: column;
  justify-content: space-between;
}

.animate-enter-x {
  animation: enter-x 0.4s ease forwards;
}

.animate-enter-y {
  animation: enter-y 0.4s ease forwards;
}

.enter-left {
  transform: translateX(-100px);
  opacity: 0;
}

.enter-right {
  transform: translateX(100px);
  opacity: 0;
}

.enter-top {
  transform: translateY(100px);
  opacity: 0;
}

.animate-delay-1 {
  animation-delay: 0.1s;
}