3d 地球与卫星绕地飞行

1 创建场景
2 创建相机
3 创建地球模型
4 创建卫星中心
5 创建卫星圆环及卫星
6 创建控制器
7 创建渲染器

<template><div class="home3dMap" id="home3dMap"></div>
</template><script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {name:"home3dMap",data(){return {scene:null,		//场景camera:null,   //相机meshMaterial:null,  //网络模型controls:null,  //控制器renderer:null,  //渲染器satellites:[],   //卫星(数组) }},components:{},created(){},beforeDestroy(){},mounted(){//初始化this.init();},methods:{init(){this.createScene();   //创建场景this.createMesh();    //创建几何体this.createLight();   //创建光源this.createCamera();  //创建相机this.createRender();  //创建渲染器this.createControls();   //创建轨道控制器this.animate();},//创建场景createScene(){let scene = new THREE.Scene();this.scene = scene;},//创建几何体createMesh(){//地球let geometry = new THREE.SphereGeometry( 70, 32, 16);let earthImgSrc = require('@/assets/img/home/home3dMapBackground.png');//材质let earthMater = new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load(earthImgSrc),transparent:true,depthWrite:false,});//网络模型对象 -- 地球let meshMaterial = new THREE.Mesh(geometry,earthMater);//地球模型this.meshMaterial = meshMaterial;//添加到场景中this.scene.add(meshMaterial);//添加圆环this.initSatellite(meshMaterial);},//添加圆环initSatellite(meshMaterial){//返回一个卫星和轨道的组合体// satelliteSize/卫星大小   satelliteRadius/卫星旋转半径   rotation	/组合体的旋转方向     speed/卫星运动速度// 圆环图片let sadImgSrc = require('@/assets/img/control/satellite.png');//循环卫星   假设有3颗卫星for(let i=0; i<3; i++){let satelliteSize = 12,satelliteRadius=0,rotation={x:0,y:0,z:0},speed=0;if(i==0){satelliteRadius = 80;rotation.x = -Math.PI * 0.35;rotation.y = Math.PI * 0.25;rotation.z = 0;speed = 0.004;}else if(i==1){satelliteRadius =100;rotation.x = -Math.PI * 0.35;rotation.y = -Math.PI * 0.2;rotation.z = 0;speed = 0.005;}else{satelliteRadius = 86;rotation.x = -Math.PI * 0.25;rotation.y = Math.PI * 0.15;rotation.z = 0;speed = 0.003;}//卫星中心let earthGeometry = new THREE.SphereGeometry(0,0,0); //材质let earthMater = new THREE.MeshPhongMaterial({color:0xa0a0a0,});let centerMesh = new THREE.Mesh(earthGeometry,earthMater);//卫星圆环let circleGeometry = new THREE.RingGeometry(satelliteRadius, satelliteRadius + 0.3, 100, 1);//材质let circleMater = new THREE.MeshBasicMaterial({color:0xffffff,side: THREE.DoubleSide})//网络模型对象 -- 卫星圆环let track = new THREE.Mesh(circleGeometry,circleMater);let satellite = new THREE.Sprite(new THREE.SpriteMaterial({map: new THREE.TextureLoader().load(sadImgSrc),blending: THREE.AdditiveBlending}));//卫星大小satellite.scale.x = satellite.scale.y = satellite.scale.z = 12;//卫星旋转半径satellite.position.set(satelliteRadius, 0, 0);let pivotPoint = new THREE.Object3D();pivotPoint.add(satellite);pivotPoint.add(track);//卫星中心模型添加卫星对象centerMesh.add(pivotPoint);centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);//添加到场景中this.scene.add(centerMesh);//添加卫星this.satellites.push({satellite:centerMesh, speed:speed, address:rotation});}},//创建光源createLight(){// 环境光const ambientLight = new THREE.AmbientLight(0xcccccc, 2)this.scene.add(ambientLight)// 平行光let directionalLight = new THREE.DirectionalLight(0xffffff, 0.2)directionalLight.position.set(1, 0.2, 0).normalize()// 平行光2let directionalLight2 = new THREE.DirectionalLight(0xff2ffff, 0.2)directionalLight2.position.set(1, 0.2, 0.1).normalize()this.scene.add(directionalLight)this.scene.add(directionalLight2)// 平行光3let directionalLight3 = new THREE.DirectionalLight(0xffffff, 0)// 开启阴影directionalLight3.castShadow = true// 设置光边界// directionalLight3.shadow.camera.top = 18// directionalLight3.shadow.camera.bottom = -10// directionalLight3.shadow.camera.left = -52// directionalLight3.shadow.camera.right = 12this.scene.add(directionalLight3)},//创建相机createCamera(){//渲染区域  宽高为  960/685let camera = new THREE.PerspectiveCamera(60, 960 / 685, 1, 10000)//设置相机位置camera.position.set(50, -10, 200)//设置相机方向camera.lookAt(0, 0, 0)this.camera = camera;this.scene.add(this.camera);},//创建渲染器createRender(){let element = document.getElementById("home3dMap");//创建渲染器let renderer = new THREE.WebGLRenderer({antialias:true, alpha:true})renderer.setSize(960,685)   //设置渲染区域尺寸renderer.shadowMap.enabled = true;   //显示阴影renderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.setClearColor(0x3f3f3f, 0);   //设置背景颜色this.renderer = renderer;element.appendChild(this.renderer.domElement)},//创建轨道控制器createControls(){let controls = new OrbitControls(this.camera, this.renderer.domElement);controls.enableDamping = true;controls.maxZoom = Infinity;this.controls = controls;},//循环animate(){this.controls.update();  //控制阻尼器//地球自传this.meshMaterial.rotation.y += 0.0015;this.renderer.render(this.scene, this.camera);for(let i=0; i<this.satellites.length; i++){this.satellites[i].satellite.rotation.z -= this.satellites[i].speed;}requestAnimationFrame(this.animate.bind(this));},},
}
</script><style>.home3dMap{width:100%;height:100%;}
</style>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/22290.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DP-GAN-生成器代码

首先看一下数据生成&#xff1a; 在预处理阶段会将label经过ont-hot编码转换为35个通道&#xff0c;即每个通道都是由&#xff08;0,1&#xff09;组成。 在train文件中&#xff0c;对生成器和判别器分别进行更新&#xff0c;根据loss的不同&#xff0c;分别计算对于的损失&a…

概念解析 | 利用IAA迭代自适应方法实现高精度角度估计

利用IAA迭代自适应方法实现高精度角度估计 注1:本文系“概念辨析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:IAA迭代自适应方法在雷达角度估计中的应用。 背景介绍 在雷达目标检测与定位中,准确估计目标角度是实现高精度定位的关键。传统的基于…

Python SMTP发送邮件

Python SMTP发送邮件 SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则&#xff0c;由它来控制信件的中转方式。 python的smtplib提供了一种很方便的途径发送电子邮件。它对smtp协议进行了简单的…

弱引用之WeakHashMap的源码解析

1.Entry Entry本身是一个弱引用。弱引用WeakReference引用的对象即referent为Key。Value并非弱引用&#xff0c;而是强引用。Entry中的链表是为了解决hash冲突。 private static class Entry<K,V> extends WeakReference<Object> implements Map.Entry<K,V>…

STC8单片机无法驱动 LR7843的问题

情景. 淘宝购买&#xff08;替代继电器模块&#xff09;“隔离MOSFET MOS管 场效应管模块 LR7843”&#xff0c;但始终无法驱动。&#xff08;2023年8月5日) 起初怀疑模块坏了&#xff0c;io口的输出接继电器&#xff0c;继电器正常工作&#xff0c;但接该模块不工作。 后面还…

基于图片、无人机、摄像头拍摄进行智能检测功能

根据要求进行无人机拍摄的视频或图片进行智能识别&#xff0c;开发过程需要事项 1、根据图片案例进行标记&#xff0c;进行模型训练 2、视频模型训练 开发语言为python 根据需求功能进行测试结果如下 根据车辆识别标记进行的测试结果截图 测经过查看视频 8月1日

camunda-modeler(5.9.0)介绍及下载

官网地址: https://camunda.com/ 中文站点:http://camunda-cn.shaochenfeng.com Camunda Modeler是一个用于创建、编辑和验证BPMN、CMMN和DMN模型的工具。它提供了一个可视化的界面&#xff0c;使用户可以以图形方式设计和调整工作流程、决策表和案例管理模型。 具体来说&…

MySQL函数(二十五)

二八佳人体似酥&#xff0c;腰悬利剑斩愚夫&#xff0c;虽然不见人头落,暗里教君骨髓枯。 上一章简单介绍了 MySQL存储过程(二十四),如果没有看过,请观看上一章 前面学习了很多函数&#xff0c;使用这些函数可以对数据进行的各种处理操作&#xff0c;极大地提高用户对数据库的…

python可以做哪些小工具,python可以做什么小游戏

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python可以做什么好玩的&#xff0c;python可以做什么小游戏&#xff0c;今天让我们一起来看看吧&#xff01; 最近有几个友友问我说有没有比较好玩的Python小项目来练手&#xff0c;于是我找了几个比较有意思的给他们&…

Python二维数组的坑:vis = [[0]*m] * n

先来看&#xff0c;vis [[0]*m] * n&#xff0c; vis2 [[0]*m for _ in range(n)]有什么区别&#xff1f; 这两行代码都是用来创建二维列表&#xff08;或矩阵&#xff09;&#xff0c;但它们之间有一个关键的区别在于列表的复制方式。 vis [[0]*m] * n&#xff1a; 这种方…

阿里云平台注册及基础使用

首先进入阿里云官网&#xff1a; 阿里云-计算&#xff0c;为了无法计算的价值 点击右上角“登录/注册”&#xff0c;如果没有阿里云账号则需要注册。 注册界面&#xff1a; 注册完成后需要开通物联网平台公共实例&#xff1a; 注册成功后的登录&#xff1a; 同样点击右上角的…

mysql主从复制及原理

目录 主从复制原理实现主从复制 主从复制原理 主要基于MySQL二进制日志 主要包括三个线程&#xff08;2个I/O线程&#xff0c;1个SQL线程&#xff09; 1、MySQL将数据变化记录到二进制日志中&#xff1b; 2、Slave将MySQL的二进制日志拷贝到Slave的中继日志中&#xff1b; …

MySQL主从复制——概念、原理、搭建过程

文章目录 1.主从复制概念2.主从复制原理3.主从复制结构的搭建3.1 主库配置3.2 从库配置 4.测试主从复制是否搭建成功5.主从复制的小结 DML&#xff08;data manipulation language&#xff09;是数据操纵语言&#xff1a;它们是SELECT、UPDATE、INSERT、DELETE&#xff0c;就象…

java实现面板之间切换功能

本文实例为大家分享了java实现面板之间切换的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 如图&#xff1a; 关键技术&#xff1a;事件监听&#xff0c;设置显示面板&#xff0c;重新刷新验证。 ? 1 2 setContentPane(jp2);//设置显示的新面板 revalidate();/…

消息队列 -提供上层服务接口

目录 前言封装数据库封装内存操作内存的设计思想 应答模式 代码实现测试代码 前言 我们之前已经将 数据库 的操作 和文件的操作 都完成了, 但是对于上层调用来说, 并不关心是于数据库中存储数据还是往文件中存储数据, 因此 我们提供一个类, 封装一下 上述俩个类中的操作, 并将…

【计算机视觉】干货分享:Segmentation model PyTorch(快速搭建图像分割网络)

一、前言 如何快速搭建图像分割网络&#xff1f; 要手写把backbone &#xff0c;手写decoder 吗&#xff1f; 介绍一个分割神器&#xff0c;分分钟搭建一个分割网络。 仓库的地址&#xff1a; https://github.com/qubvel/segmentation_models.pytorch该库的主要特点是&#…

行业追踪,2023-08-04

自动复盘 2023-08-04 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

开源免费用|Apache Doris 2.0 推出跨集群数据复制功能

随着企业业务的发展&#xff0c;系统架构趋于复杂、数据规模不断增大&#xff0c;数据分布存储在不同的地域、数据中心或云平台上的现象越发普遍&#xff0c;如何保证数据的可靠性和在线服务的连续性成为人们关注的重点。在此基础上&#xff0c;跨集群复制&#xff08;Cross-Cl…

Mac环境变量问题

查询环境变量 echo $PATH 查询当前使用的Shell&#xff0c;这里注意SHELL需要大写 echo $SHELL >>>如果输出的是/bin/zsh&#xff0c;说明使用的是zsh。zsh读取的个人配置文件是~/.zshrc (mac10.15.x 后对应的是~/.zprofile) >>>如果输出的是/bin/bash&…

如何把非1024的采样数放入aac编码器

一. aac对数据规格要求 二、代码实现 1.初始化 2.填入数据 3.取数据 三.图解 一. aac对放入的采样数要求 我们知道aac每次接受的字节数是固定的&#xff0c;在之前的文章里有介绍libfdk_aac音频采样数和编码字节数注意 它支持的采样数和编码字节数分别是&#xff1a; fdk_aac …