文章目录
webgl-three.js 多卫星环绕应用
` 提示：three.js 官方给了我们月球绕地球旋转，除了月球，息息相关的就是我们发射的各种卫星，那么多个卫星，不同角度，不同弧度，带有卫星旋转的轨道等功能又是怎样展示的呢？
效果图展示
多维度展示星球旋转效果，以及不同卫星的光晕效果
整体架构流程
该成果采用[email protected] 新版本应用实践，适合页面首屏可视化展示以及新技术应用等方面。
three.js基础介绍：
在 Three.js 中，有三个重要的要素：场景（Scene）、相机（Camera）和渲染器（Renderer）。
一、场景（Scene）
场景就像是一个容器，用来容纳所有要在画面中呈现的物体。
- 物体管理：可以将各种 3D 模型、光源、粒子系统等添加到场景中。例如，可以创建一个立方体、球体等几何形状的物体，然后将其添加到场景中展示。
var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); - 背景设置：可以设置场景的背景颜色或加载一个背景图像。这为整个 3D 场景提供了一个合适的环境氛围。
scene.background = new THREE.Color(0xffffff); // 设置白色背景
二、相机（Camera）
相机决定了从哪个视角观察场景中的物体。
- 视角类型：Three.js 提供了多种类型的相机，其中最常用的是透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。透视相机模拟人眼的视觉效果，物体近大远小；正交相机则无论物体距离相机多远，大小都保持不变。
// 透视相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 正交相机 var orthoCamera = new THREE.OrthographicCamera(-10, 10, 10, -10, 0.1, 1000); - 位置调整：通过设置相机的位置，可以改变观察场景的角度。可以将相机放置在不同的位置，从不同的方向观察场景中的物体。
camera.position.z = 5;
三、渲染器（Renderer）
渲染器负责将场景和相机所定义的 3D 内容绘制到屏幕上。
- 设置参数：可以设置渲染器的大小、抗锯齿等参数。例如，可以根据浏览器窗口的大小调整渲染器的尺寸，以确保画面能够完整显示。
var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); - 渲染循环：渲染器通过不断地调用渲染函数，更新画面。在渲染循环中，可以对场景中的物体进行动画处理，使画面更加生动。
function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render();
在充分理解了三要素的作用下下面开始绘制页面实现的效果：
具体展示如下所示：
<template>
<div class="threeBox" id="xk_bg"></div>
</template>
<script setup>
import {
onMounted, onBeforeUnmount } from "vue"
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import {
OrbitControls } from 'three/addons/controls/OrbitControls.js';
let renderer, scene, camera, stats, earth;
let destroyList = []
let particleSystem, uniforms, geometry;
// console.log(router)
// 创建围绕中心球体环形轨道匀速旋转的物体
var numObjects = 4;
var objects = [];
const satRadius = 25;
const satellites = []
var numObjects1 = 1;
var objects1 = [];
const satRadius1 = 52;
const particles = 1000;
const textureLoader = new THREE.TextureLoader();
destroyList.push(textureLoader)
onMounted(() => {
// console.log("12121")
init();
})
onBeforeUnmount(() => {
// console.log("触发了")
threeDestory()
})
function threeDestory() {
renderer.setAnimationLoop(null)
// 销毁mesh对象
if (earth) {
scene.remove(earth);
earth.geometry.dispose();
if (earth.material) {
earth.material.dispose();
}
earth = null;
}
// destroyList.forEach(item => {
// if (item && item.dispose) {
// item.dispose()
// }
// })
// 销毁camera和renderer对象
if (camera) {
camera = null;
}
if (renderer) {
renderer.forceContextLoss(); // 强制WebGL上下文失效
renderer.domElement = null;
renderer = null;
}
// 销毁scene对象
scene.traverse(function (child) {
if (child.isMesh) {
child.geometry.dispose();
if (child.material) {
child.material.dispose();
}
}
});
scene = null;
}
function init() {
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 60;
camera.position.x = 10;
camera.position.y = 100;
scene = new THREE.Scene();
// 添加灯光
const dirLight = new THREE.DirectionalLight(0xffffff, 3