【案例】3D地球(vue+three.js)

在这里插入图片描述

需要下载插件
在这里插入图片描述

<template><div class="demo"><div id="container" ref="content"></div></div>
</template>
<script>
import * as THREE from 'three';
// import mapJSON from '../map.json';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {// components :{  CoolEarth},data() {return {// 创建一个场景scene: null,// 创建一个相机camera: null,// 创建一个渲染器renderer: null,// 模型对象mesh: null,// 平面plane: null,// 点光源point: null,// stepstep: 0,controls: null,starsGeometry: null,}},mounted() {// this.Earth_3D();this.init();},methods: {// 初始化init() {// 初始化容器var content = this.$refs.content;// 创建一个场景this.scene = new THREE.Scene();this.scene.background = new THREE.Color("#000000");
//         const positions = [];
// var colors = [];
// var geometry = new THREE.BufferGeometry();
// for (var i = 0; i < 100; i ++) {
//   var vertex = new THREE.Vector3();
//   vertex.x = Math.random() * 2 - 1;
//   vertex.y = Math.random() * 2 - 1;
//   // vertex.z = Math.random() * 2 + 1;
//   positions.push( vertex.x, vertex.y, );
//   var color = new THREE.Color();
//   color.setHSL( Math.random() * 0.2 + 0.5, 0.55, Math.random() * 0.25 + 0.55 );
//   colors.push( color.r, color.g, color.b );
// }
// geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
// geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );// 创建几何体var geometry = new THREE.SphereGeometry(30, 50, 50);// // 纹理加载器 ( 此处加载贴图 )var texture = new THREE.TextureLoader().load(require('@/assets/earth3.jpg'));// 发光地球// let lightTexture = new THREE.TextureLoader().load("@/assets/earth.jpg");// let lightEarthGeometry = new THREE.SphereGeometry(53, 30, 28);// let lightEarthMaterial = new THREE.MeshBasicMaterial({//   map: lightTexture,//   alphaMap: lightTexture,//   blending: THREE.AdditiveBlending,//   transparent: true,// });// let lightEarth = new THREE.Mesh(lightEarthGeometry, lightEarthMaterial);// this.scene.add(lightEarth);//  光环// var huan = new THREE.TextureLoader().load( '@/assets/00.jpg' );// var spriteMaterial = new THREE.SpriteMaterial( {//   map: huan,//   transparent: true,//   opacity: 0.5,//   depthWrite: false// } );// var sprite = new THREE.Sprite( spriteMaterial );// sprite.scale.set( 5 * 3, 5 * 3, 1 );// this.scene.add( sprite );// 几何体材质对象var material = new THREE.MeshLambertMaterial({map: texture});// 创建网格模型对象this.mesh = new THREE.Mesh(geometry, material);//设置几何体位置this.mesh.position.x = 0;this.mesh.position.y = 10;this.mesh.position.z = 0;this.scene.add(this.mesh);// 创建点光源var point = new THREE.PointLight("#FFF");point.position.set(40, 200, 30);this.point = point;this.scene.add(point);const sphereSize = 10;const pointLightHelper = new THREE.PointLightHelper(point, sphereSize);this.scene.add(pointLightHelper);//创建环境光var ambient = new THREE.AmbientLight(0x444444);this.scene.add(ambient);// 创建一个相机this.camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1,  1000 );this.camera.position.set(100, 100, 50);this.camera.lookAt(0, 0, 0);// // 坐标轴辅助器,X,Y,Z长度30// var axes = new THREE.AxesHelper(300);// this.scene.add(axes);// // // 辅助网格// let gridHelper = new THREE.GridHelper(100, 100);// this.scene.add(gridHelper);// 创建渲染器this.renderer = new THREE.WebGLRenderer();this.renderer.setSize(window.innerWidth, window.innerHeight);this.renderer.setClearColor(0xb9d3ff, 1);//插入 dom 元素content.appendChild(this.renderer.domElement);console.log("1111",OrbitControls)this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.addEventListener("resize", this.render(), false);this.createLight();},render() {this.renderer.render(this.scene, this.camera);// 自动旋转动画this.mesh.rotateY(0.002);requestAnimationFrame(this.render);},// 创建灯光createLight() {this.light = new THREE.DirectionalLight({color: 'blue'})this.light.position.set(100, 100, 100)this.scene.add(this.light)},Earth_3D() {const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );const geometry = new THREE.BoxGeometry( 1,1,1 );const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );const cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;function animate() {requestAnimationFrame( animate );renderer.render( scene, camera );}animate();cube.rotation.x += 0.01;cube.rotation.y += 0.01;},}
}
</script>
<style scoped></style>

有人找不到合适的地球平面图的话,可直接地球平面图

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

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

相关文章

windows10编译高版本openssl

参考文章 参考文章中的windows编译为低版本&#xff0c;在高版本的openssl编译中已经没有&#xff1a;“ms\do_ms.bat”这个脚本了&#xff0c;现记录下编译过程 1、准备工作 安装ActivePerl&#xff0c;安装后会自动写入环境变量&#xff0c;参照参考文章测试安装成功与否&a…

涉及多种位运算操作混合类题目——通过加转三进制(扩大状态,不变枚举量):CF1033F

https://www.luogu.com.cn/problem/CF1033F 我们发现直接用二进制来做很难做&#xff0c;但我们可以观察其给的表 我们发现如果表示成和的形式是容易进行一一对应的 对于询问的时候&#xff0c;我们直接枚举每位有的和是多少&#xff0c;虽然状态是三次的&#xff0c;但是对于…

STM32HAL-完全解耦面向对象思维的架构-时间轮片法使用(timeslice)

目录 概述 一、开发环境 二、STM32CubeMx配置 三、编码 四、运行结果 五、代码解释 六、总结 概述 timeslice是一个时间片轮询框架&#xff0c;完全解耦的时间片轮询框架&#xff0c;非常适合裸机单片机引用。接下来将该框架移植到stm32单片机运行&#xff0c;单片机…

如何设置OBS虚拟摄像头给钉钉视频会议使用

环境&#xff1a; OBS Studio 29.1.3 Win10 专业版 钉钉7.1.0 问题描述&#xff1a; 如何设置OBS虚拟摄像头给钉钉视频会议使用 解决方案&#xff1a; 1.打开OBS 底下来源这添加视频采集设备 选择OBS虚拟摄像头 2.源那再建一个图像&#xff0c;随便选一张图片 3.点击虚…

学习Opencv(蝴蝶书/C++)相关——1. 前言 和 第1章.概述

文章目录 1. 整体架构1.1 OpenCV3.01.2 Opencv4.xX. Opencv cheatsheet(小抄)1. 整体架构 1.1 OpenCV3.0 对于Opencv3.x版本,网上最常见的图,图自OpenCV Tutorial-Itseez 现在已经不是500+的算法了,而是2500+,详见:About

Keras人工智能神经网络 Regressor 回归 神经网络搭建

前期分享了使用tensorflow来进行神经网络的回归&#xff0c;tensorflow构建神经网络 本期我们来使用Keras来搭建一个简单的神经网络 Keras神经网络可以用来模拟回归问题 (regression)&#xff0c;例如给下面一组数据&#xff0c;用一条线来对数据进行拟合&#xff0c;并可以预…

Apache Pulsar 在腾讯云上的最佳实践

导语 由 StreamNative 主办的 Pulsar Meetup Beijing 2023 在2023年10月14日完美落幕&#xff0c;本次活动大咖云集&#xff0c;来自腾讯、滴滴、华为、智联招聘、RisingWave 和 StreamNative 的行业专家们一起&#xff0c;深入探讨 Pulsar 在生产环境中的最佳应用实践&#x…

openpnp - 74路西门子飞达控制板(主控板STM32_NUCLEO-144)实现

文章目录 openpnp - 74路西门子飞达控制板(主控板STM32_NUCLEO-144)实现概述飞达控制底板硬件电路程序的修改END openpnp - 74路西门子飞达控制板(主控板STM32_NUCLEO-144)实现 概述 现在调试自己的openpnp设备, 在收尾, 将飞达控制板弄好, 能正常控制设备飞达安装平台上装满…

python实现从字符串中识别出省市区信息

从字符串中识别出省市区的信息分别存储,是我们经常会碰到的问题。如果用分词的方法去匹配获取比较麻烦,cpca包提供了便捷的调用函数transform。只要把含省市区的信息放进去,即可返回标准的含省市区的数据框。    本文详细阐述如何安装cpca包、transform函数参数定义,以及…

佳易王羽毛球馆计时计费管理系统软件下载,支持连接灯控

软件特色&#xff1a; 1、功能实用&#xff0c;操作简单&#xff0c;不会电脑也会操作&#xff0c;软件免安装&#xff0c;已内置数据库。佳易王羽毛球馆计时计费系统软件免安装版V17.6&#xff0c;是集计时计费、商品销售、会员管理、备注记事本、定时提醒功能于一体的管理软…

《面向对象软件工程》笔记——1-2章

“学习不仅是一种必要&#xff0c;而且是一种愉快的活动。” - 尼尔阿姆斯特朗 文章目录 第一章 面向对象软件工程的范畴历史方面经济方面维护方面现代软件维护观点交付后维护的重要性 需求、分析和设计方面团队开发方面没有计划&#xff0c;测试&#xff0c;文档阶段的原因面向…

Android应用集成RabbitMQ消息处理指南

Android应用集成RabbitMQ消息处理指南 RabbitMQ1、前言2、RabbitMQ简介2.1、什么是RabbitMQ2.2、RabbitMQ的特点2.3、RabbitMQ的工作原理2.4、RabbitMQ中几个重要的概念 3、在Android Studio中集成RabbitMQ3.1、在Manifest中添加权限&#xff1a;3.2、在build.gradle(:app)下添…

广告引擎检索技术快速学习

目录 一、广告系统与广告引擎介绍 &#xff08;一&#xff09;广告系统与广告粗分 &#xff08;二&#xff09;广告引擎在广告系统中的重要性分析 二、广告引擎整体架构和工作过程 &#xff08;一&#xff09;一般概述 &#xff08;二&#xff09;核心功能架构图 三、标…

2023年【起重机司机(限桥式起重机)】报名考试及起重机司机(限桥式起重机)模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 起重机司机(限桥式起重机)报名考试参考答案及起重机司机(限桥式起重机)考试试题解析是安全生产模拟考试一点通题库老师及起重机司机(限桥式起重机)操作证已考过的学员汇总&#xff0c;相对有效帮助起重机司机(限桥式起…

基于PHP + MySQL实现的文章内容管理系统源码+数据库,采用前后端分离的模板和标签化方式

文章内容管理系统 dc-article是一个通用的文章内容管理系统&#xff0c;基于开源的caozha-admin开发&#xff0c;采用前后端分离的模板和标签化方式&#xff0c;支持文章内容管理、栏目分类管理、评论管理、友情链接管理、碎片管理、远程图片获取器等功能。可以使用本系统很轻…

Go Gin中间件

Gin是一个用Go语言编写的Web框架&#xff0c;它提供了一种简单的方式来创建HTTP路由和处理HTTP请求。中间件是Gin框架中的一个重要概念&#xff0c;它可以用来处理HTTP请求和响应&#xff0c;或者在处理请求之前和之后执行一些操作。 以下是关于Gin中间件开发的一些基本信息&am…

WorkManger学习汇总

一.使用 WorkManger主要是用来执行一定会执行的任务的&#xff0c;如即使app被杀掉、手机重启都会执行。 适用场景&#xff1a;定期重复性任务&#xff0c;如定期log上传等 使用的话首先引入库&#xff08;我使用的是2.7.1&#xff09; implementation "androidx.work:…

2015年亚太杯APMCM数学建模大赛C题识别网络中的错误连接求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 C题 识别网络中的错误连接 原题再现 网络是描述真实系统结构的强大工具——社交网络描述人与人之间的关系&#xff0c;万维网描述网页之间的超链接关系。随着现代技术的发展&#xff0c;我们积累了越来越多的网络数据&#xff0c;但这些数据部…

0.专栏概述与几句闲话

引 还记得今年大年初一开始写《数据结构和算法》专栏的时候定了个小目标&#xff1a; 不知不觉间已经过去了十个月&#xff0c;我的第一个专栏也算是圆满收官了 。 这次PO一张成都熊猫基地的团子们&#xff0c;开启设计模式这个专栏吧。 目录与概述 犹记得一位身在广州的老…

php语言

文章目录 常用命令Apache命令php命令 常用命令 Apache命令 查看版本号 D:\cjm\soft-work\phpStudy\phpstudy_pro\Extensions\Apache2.4.39\bin>httpd -v检测运行环境 httpd -tphp命令 PHP版本号 需要进入php目录 php -v