vue3 three.js 卫星地图

可以使用 Three.js 来创建卫星地图，具体步骤如下：

1. 获取卫星地图的纹理贴图，可以从 NASA 的网站上下载。
2. 使用 Three.js 中的 TextureLoader 加载纹理贴图。
3. 创建一个球体作为地球，并将纹理贴图应用到球体上。
4. 创建一个相机和一个场景，并将球体添加到场景中。
5. 使用 OrbitControls 控制相机的位置和旋转，使其能够围绕球体旋转。
6. 使用渲染器将场景渲染到页面上。

相关问题

vue3 three.js3动态地图

### 如何在 Vue3 中使用 Three.js 实现动态地图效果

#### 环境准备
为了顺利集成 Three.js 并创建动态地图，在开始前需确认已安装如下工具：Node.js 和 Vue CLI。如果未曾安装，可前往 [Node.js 官方网站](https://nodejs.org/) 及 [Vue CLI 官方文档](https://cli.vuejs.org/) 查看具体指导[^1]。

#### 创建 Vue3 项目
借助 Vue CLI 构建新的 Vue3 工程十分便捷。执行命令 `vue create vue-threejs-demo` 即可在本地快速搭建起一个基于 Vue3 的应用框架。

#### 添加 Three.js 支持
对于 Three.js 的引入，推荐采用 npm 方式来管理依赖项。打开终端并输入以下指令完成 Three.js 及其辅助库 D3 的安装：

npm install three d3

此操作会自动更新 package.json 文件并将所需模块加入到项目之中[^3]。

#### 初始化场景设置
接下来定义一个基础的 Three.js 场景组件用于承载后续的地图元素。下面是一份简化版代码片段展示如何初始化相机、渲染器以及添加光源等必要配置：

<template>
  <div ref="mapContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'

const mapContainer = ref(null)

onMounted(() => {
    const scene = new THREE.Scene()
    
    // 设置透视摄像机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.z = 5
    
    // 创建WebGLRenderer实例
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    mapContainer.value.appendChild(renderer.domElement)
    
    function animate() {
        requestAnimationFrame(animate)
        
        // 渲染下一帧画面
        renderer.render(scene, camera)
    }
    
    animate()
})
</script>

<style scoped>
#app {
  width: 100%;
  height: 100vh;
}
</style>

上述脚本实现了最基本的三维空间构建，并设置了自适应窗口大小的功能。

#### 加载地理数据与绘制地形
要呈现真实的地球表面特征，则需要加载相应的地理坐标系文件（如 GeoJSON 或 TopoJSON），并通过 Three.js API 将这些点位映射成可视化的几何体对象放置于场景内。考虑到性能优化方面的要求，建议仅保留必要的顶点信息以减少计算负担；同时利用材质贴图增强视觉表现力，比如导入卫星影像作为底图纹理覆盖整个球面结构之上。

#### 动态交互功能实现
为了让用户体验更加生动有趣，还可以进一步探索更多高级特性——例如支持鼠标滚轮缩放视角距离、点击选中特定位置显示详情卡片等功能。这通常涉及到监听 DOM 事件并与 Three.js 物件属性绑定关联起来处理逻辑响应流程。

Vue中结合Three.js来实现旋转的地球，并在地球周围添加循环转动的卫星，同时让卫星可以被点击，获取卫星的相关信息

在Vue中结合Three.js来实现旋转的地球，并在地球周围添加循环转动的卫星，同时让卫星可以被点击，获取卫星的相关信息，可以按照以下步骤进行：

### 1. 安装依赖
首先，确保你已经安装了Vue和Three.js。你可以使用npm来安装这些依赖：

npm install three
npm install vue

### 2. 创建Vue组件
创建一个新的Vue组件，例如`EarthSatellite.vue`，并在其中编写以下代码：

<template>
  <div ref="container" style="width: 100vw; height: 100vh;"></div>
</template>

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

export default {
  name: 'EarthSatellite',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      earth: null,
      satellites: [],
      controls: null,
    };
  },
  methods: {
    init() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.set(0, 0, 20);

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

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

      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(5, 3, 5);
      this.scene.add(directionalLight);

      // 创建地球
      const geometry = new THREE.SphereGeometry(5, 32, 32);
      const material = new THREE.MeshPhongMaterial({
        map: new THREE.TextureLoader().load('earth.jpg'),
      });
      this.earth = new THREE.Mesh(geometry, material);
      this.scene.add(this.earth);

      // 创建卫星
      for (let i = 0; i < 10; i++) {
        const satellite = this.createSatellite();
        this.satellites.push(satellite);
        this.scene.add(satellite);
      }

      // 添加控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;

      this.animate();
    },
    createSatellite() {
      const geometry = new THREE.SphereGeometry(0.2, 16, 16);
      const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
      const satellite = new THREE.Mesh(geometry, material);

      // 随机位置
      const angle = Math.random() * Math.PI * 2;
      const radius = 8 + Math.random() * 2;
      satellite.position.set(Math.cos(angle) * radius, Math.sin(angle) * radius, 0);

      // 点击事件
      satellite.userData = { name: `Satellite ${this.satellites.length + 1}` };
      satellite.on('click', (event) => {
        alert(`You clicked on ${satellite.userData.name}`);
      });

      return satellite;
    },
    animate() {
      requestAnimationFrame(this.animate);

      // 旋转地球
      this.earth.rotation.y += 0.001;

      // 旋转卫星
      this.satellites.forEach((satellite, index) => {
        const angle = index * 0.1 + Date.now() * 0.001;
        const radius = 8 + index * 0.5;
        satellite.position.set(Math.cos(angle) * radius, Math.sin(angle) * radius, 0);
      });

      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
body {
  margin: 0;
}
</style>

### 3. 运行项目
在终端中运行以下命令启动Vue项目：

npm run serve

### 4. 解释代码
- **场景、相机和渲染器**：初始化Three.js的场景、相机和渲染器，并将渲染器的DOM元素添加到Vue组件的容器中。
- **地球**：创建一个球体并加载地球纹理作为材质。
- **卫星**：创建多个小球体作为卫星，并随机分布在地球周围。
- **控制器**：添加OrbitControls控制器以便用户可以旋转、缩放和移动视角。
- **动画**：在动画循环中旋转地球和卫星。

### 5. 点击事件
在创建卫星时，添加点击事件监听器，当用户点击卫星时，弹出提示框显示卫星的名称。