地球模型展示Three.js

最新推荐文章于 2024-06-06 10:02:01 发布
最新推荐文章于 2024-06-06 10:02:01 发布
阅读量557 收藏 6
点赞数
分类专栏： Web 文章标签： Web javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37250299/article/details/103924836
版权

说明

使用 Three.js 展示地球模型的 Demo

贴图比较大，加载时间会比较久，请耐心等待

 

演示地址

https://hu243285237.github.io/Earth_Demo/

 

项目地址

https://github.com/hu243285237/Earth_Demo

 

功能点

模型的加载和显示

加载进度的实时显示

贴图按顺序加载（最主要的贴图最先加载）

自适应屏幕（当缩放浏览器时，保持模型在正中间）

鼠标拖拽物体旋转（并且停止旋转时有缓冲效果）

滚轮缩放物体尺寸（并且限制缩放尺寸大小）

云层自旋转

 

插件

three.min.js ———— threejs 插件

OBJLoader.js ———— 用于加载物体

MTLLoader.js ———— 用于加载材质和贴图

 

模型来源

https://www.cgmodel.com/model-204627.html

更改了贴图的精度，所有贴图从 4096 改为 2048，以加快加载速度

 

部署

需要本地搭服务才能正常运行，比如 httpserver

直接打开 html 无法正常运行

哟呵呵和
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Earthjs一个易于构建正投影地球仪的JavaScript库
08-10
Earthjs一个易于构建正投影地球仪的JavaScript库
Three.js--》实现3d地球模型展示
ztK63LrD的博客
05-27 4870
今天简单实现一个three.js的3D地球模型，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。
Earthjs - 带你探索交互式地球的奥秘
最新发布
gitblog_00016的博客
06-06 715
Earthjs - 带你探索交互式地球的奥秘 项目地址:https://gitcode.com/earthjs/earthjs 1、项目介绍 Earthjs 是一个基于 JavaScript 的库，用于构建正交投影的全球视图。灵感来源于 planetary.js 和 Faux-3d Shaded Globe，两者均采用 D3-v3 实现。现在，Earthjs 与时俱进，使用了 D3-v4，并且设计...
【Three.js + Vue 构建三维地球-Part One】
Ricce的博客
08-28 822
Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。
Three.js+GeoJSON实现三维地图显示
热门推荐
damadashen的博客
08-07 1万+
Three+GeoJSON实现对地理坐标转换并生成中国三维地图。
threejs 绘制地球、飞机、轨迹
Jaylon Wang的专栏
10-11 5205
threejs官网：https://threejs.org/ 首先我们来看下要实现的效果 这个缩小后的图片，下面我们来看下近距离的动态效果。。 效果比较简陋，需要后期再处理。。。 下面进入主题，代码篇。。 HTML部分： html lang="en"> head> meta charset="UTF-8"> title>全球航班ti
three.js 3D地球实例，支持国家点击和飞线
02-11
它是一个基于three.js库的3D地球模型，具有交互性，允许用户点击不同国家，并展示飞线效果。这里的“飞线”可能指的是在地图上显示从一个点到另一个点的连线，比如国家间的航线或通信线路，以视觉方式突出显示数据或...
Three.js地球模型
08-09
在本项目中，"Three.js地球模型"是一个利用JavaScript库Three.js创建的交互式3D地球展示。Three.js是WebGL的一个强大框架，用于在浏览器中实现三维图形渲染。这个项目可能包含一个3D地球的视觉表现，允许用户从不同...
three.js生成的3d 地球.zip
07-28
在本项目中，"three.js生成的3D的地球模型"是一个使用JavaScript库three.js创建的交互式3D地球演示。three.js是一个流行的开源库，专门用于在Web浏览器中进行3D图形渲染。这个压缩包包含了一个现成的代码示例，让...
Three.js视频教程源码.rar
08-19
Three.js是基于WebGL的JavaScript库，是目前最流行的浏览器端3D图形渲染库之一，广泛应用于网页游戏、数据可视化、3D建模等领域。本教程围绕"Three.js视频教程源码.rar"展开，深入探讨Three.js的核心概念、使用技巧...
three.js 制作简单行星运转动画
02-06
在本教程中，我们将深入探讨如何使用three.js库来创建一个简单的行星运转动画，模拟月球围绕地球的公转。three.js是一个强大的JavaScript库，专为WebGL提供3D图形渲染，使开发者能够轻松地在浏览器中构建丰富的3D...
three.js 制作地球标注的两种方法
weixin_38946164的博客
07-25 2421
three.js制作地球标注的两种方法。
ThreeJS——在3D地球上标记中国地图板块
NanChen的博客
08-14 2576
用于获取地图的位置以及到下一个目的地的总路程，可以将实际路程转成自己配置的路程，以及正在路上的标识，可以用头像表示，经过的地方可以嵌入链接点击进行跳转 如果是 Vue 写的话需要从生命周期中获取 Dom 元素 动画渲染函数 用于制作开始场景镜头动画(由远到近并附带略微旋转) 这个动画在后面会用到，是根据滚动下方内容进行左右镜头旋转的动画效果 此时星空就已经搭建好了，可以左右旋转试试效果其实也就是创建一个球，然后贴个准确的贴图放在圆上调整一些光感即可 绘制红色圆点和点与点之间的飞线效果 用画布渲染
Threejs实现3d地球记录（1）
qq_41051239的博客
08-04 1047
Threejs实现3d地球
【原创】threejs实现一个全景地球
diaoyucan2509的博客
01-06 520
介绍 本demo实现一个旋转的全景地球，效果如下 技术分析 1.球体 2.球体表面贴图 实现 创建容器 <div id="container"></div> 引入js文件 <script src="js/three.min.js"></script> <script src="js/st...
threeJs实现3D地球-旋转-自定义贴图-透明发光
m0_67862954的博客
03-13 1595
【代码】angular + threeJs实现3D地球-旋转-自定义贴图-透明发光。
Github首页的地图模拟
江月的博客
12-26 1269
Github首页的地图模拟 文章目录Github首页的地图模拟一、简介二、具体的实现方法1、详细的叙述2、一个源码示例3、知乎解答4、一个比较成熟的案例5、其他文章 一、简介 我们都知道GitHub首页的那个旋转的地图非常的炫酷和精彩，想必也有很多人对这个地图非常喜欢，也希望自己可以写一个类似的界面，我也对这个问题有一定的探索，主要是借鉴了别人的一些现有的对象进行加工以及改造，下面就介绍几个挺不错的思路。 二、具体的实现方法 1、详细的叙述 https://blog.csdn.net/qq_21476953
基于点、线数据三维地质建模方法
轻云出月风静夜
02-06 3255
基于点、线数据三维隐式建模方法
使用three.js模拟地球效果
凡事有果必有因
05-23 1万+
地球效果参考于earth2050 1.创建地球 这里使用的是创建一个几何为SphereGeometry的网格mesh，再贴上地球经投影后的图片作为纹理。其中地心坐标为默认THREE.Vector3(0,0,0)。 const geometry = new THREE.SphereGeometry(radius, 66,44); const material = new THREE.MeshBasi...
地球影子three.js
12-13
地球影子的实现需要使用three.js中的阴影投射和接收功能。具体步骤如下： 1. 创建场景、相机和渲染器。 2. 创建地球模型，并设置其接收阴影。 3. 创建光源，并设置其投射阴影。 4. 将光源添加到场景中。 5. 将地球模型添加到场景中。 6. 开启阴影映射。 7. 渲染场景。 下面是一个简单的示例代码，实现了地球的阴影效果： ```javascript // 创建场景、相机和渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建地球模型，并设置其接收阴影 var geometry = new THREE.SphereGeometry(5, 32, 32); var material = new THREE.MeshPhongMaterial({ color: 0xffffff }); var earth = new THREE.Mesh(geometry, material); earth.receiveShadow = true; scene.add(earth); // 创建光源，并设置其投射阴影 var light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 10, 0); light.castShadow = true; light.shadow.camera.near = 0.1; light.shadow.camera.far = 25; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; scene.add(light); // 将地球模型和光源添加到场景中 scene.add(earth); scene.add(light); // 开启阴影映射 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值