From c755b7c6e1d9dda26ac6c41a1c49896ebedd077d Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 29 三月 2024 15:11:14 +0800
Subject: [PATCH] feat:基础场景搭建
---
src/views/screen/components/screen-map-three/world/renderer.js | 11 +++
src/views/screen/components/screen-map-three/world/camera.js | 8 ++
src/views/screen/components/screen-map-cover/index.vue | 36 ++++++++++++
src/views/screen/components/screen-wrapper/index.vue | 13 +++
src/views/screen/components/screen-map-three/index.vue | 18 ++++-
src/views/screen/components/screen-map-three/world/world.js | 29 +++++++++
src/views/screen/components/screen-map-three/world/scene.js | 9 +++
7 files changed, 118 insertions(+), 6 deletions(-)
diff --git a/src/views/screen/components/screen-map-cover/index.vue b/src/views/screen/components/screen-map-cover/index.vue
new file mode 100644
index 0000000..c788b03
--- /dev/null
+++ b/src/views/screen/components/screen-map-cover/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-map-three/index.vue b/src/views/screen/components/screen-map-three/index.vue
index aae98bf..9d6eedf 100644
--- a/src/views/screen/components/screen-map-three/index.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss" scoped>
+.map-container {
+ width: 100%;
+ height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-map-three/world/camera.js b/src/views/screen/components/screen-map-three/world/camera.js
new file mode 100644
index 0000000..2605ae8
--- /dev/null
+++ b/src/views/screen/components/screen-map-three/world/camera.js
@@ -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 };
\ No newline at end of file
diff --git a/src/views/screen/components/screen-map-three/world/renderer.js b/src/views/screen/components/screen-map-three/world/renderer.js
new file mode 100644
index 0000000..3105c95
--- /dev/null
+++ b/src/views/screen/components/screen-map-three/world/renderer.js
@@ -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};
\ No newline at end of file
diff --git a/src/views/screen/components/screen-map-three/world/scene.js b/src/views/screen/components/screen-map-three/world/scene.js
new file mode 100644
index 0000000..3c47871
--- /dev/null
+++ b/src/views/screen/components/screen-map-three/world/scene.js
@@ -0,0 +1,9 @@
+import {Scene} from 'three';
+
+function createScene() {
+ const scene = new Scene();
+
+ return scene;
+}
+
+export { createScene}
\ No newline at end of file
diff --git a/src/views/screen/components/screen-map-three/world/world.js b/src/views/screen/components/screen-map-three/world/world.js
new file mode 100644
index 0000000..aa1718b
--- /dev/null
+++ b/src/views/screen/components/screen-map-three/world/world.js
@@ -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();
+ })
+ }
+}
\ No newline at end of file
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index d375a26..fdfd4cf 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/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;
}
--
Gitblit v1.8.0