【小沐雜貨鋪】基于Three.JS繪制三維數字地球Earth(GIS 、WebGL、vue、react,提供全部源代碼)

🍺三維數字地球系列相關文章如下🍺:
1【小沐學GIS】基于C++繪制三維數字地球Earth(456:OpenGL、glfw、glut)第一期
2【小沐學GIS】基于C++繪制三維數字地球Earth(456:OpenGL、glfw、glut)第二期
3【小沐學GIS】基于C++繪制三維數字地球Earth(456:OpenGL、glfw、glut)第三期
4【小沐學GIS】基于C++OpenSceneGraph(OSG)繪制三維數字地球Earth(7:OpenGL)
5【小沐學GIS】基于C++QT繪制三維數字地球Earth(8:OpenGL)
6【小沐學GIS】基于C++繪制太陽系SolarSystem(9:OpenGL、glfw、glut)
7【小沐學GIS】基于C#繪制三維數字地球Earth(10:OpenGL)
8【小沐學GIS】基于Python繪制三維數字地球Earth(11:OpenGL)
9【小沐學GIS】基于Android繪制三維數字地球Earth(12:OpenGL)
10【小沐學GIS】基于WebGL繪制三維數字地球Earth(13:OpenGL)
11【小沐雜貨鋪】基于Three.JS繪制三維數字地球Earth(GIS 、three.js、WebGL)
12【小沐雜貨鋪】基于Three.JS繪制三維太陽系Solar System(GIS 、three.js、WebGL)

文章目錄

  • 1、Three.JS簡介
  • 2、代碼測試
    • A2_1_ThreeJS_Earth_js
    • A2_2_ThreeJS_Earth_js
    • A2_3_ThreeJS_Earth_js
    • A2_4_ThreeJS_Earth_ts_webpack
    • A2_5_ThreeJS_Earth_ts_vue!react!html
    • A2_6_ThreeJS_Earth_js
    • A2_7_ThreeJS_Earth_ts_vue3
    • A2_8_ThreeJS_Earth_js
    • A2_9_ThreeJS_Earth_js_vite
    • A2_10_ThreeJS_Earth_js
    • A2_11_ThreeJS_Earth_js_vite
    • A2_12_ThreeJS_Earth_js
    • A2_13_ThreeJS_Earth_js_vite
    • A2_14_ThreeJS_Earth_js
    • A2_15_ThreeJS_Earth_js_all
    • A2_16_ThreeJS_Earth_js_vite!react
  • 結語

1、Three.JS簡介

https://threejs.org/

Three.js 是一個基于 WebGL 的開源 JavaScript 庫,用于在瀏覽器中創建和展示 3D 圖形。它由 Ricardo Cabello(也稱為 Mr.doob)于 2010 年創建,旨在簡化 WebGL 的復雜性,使開發者能夠輕松創建 3D 場景和交互式內容。

易用性:提供簡潔的 API,降低了 WebGL 的學習門檻,無需深入了解圖形學底層知識。
跨平臺支持:支持所有現代瀏覽器,包括移動設備。
功能豐富:內置多種幾何體、材質、光源、動畫和交互功能。
擴展性:支持加載外部模型和紋理,以及自定義著色器。
社區活躍:擁有豐富的教程、資源和插件,便于學習和擴展。

2、代碼測試

A2_1_ThreeJS_Earth_js

在這里插入圖片描述
在這里插入圖片描述

A2_2_ThreeJS_Earth_js

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

A2_3_ThreeJS_Earth_js

在這里插入圖片描述
在這里插入圖片描述

A2_4_ThreeJS_Earth_ts_webpack

在這里插入圖片描述
在這里插入圖片描述

A2_5_ThreeJS_Earth_ts_vue!react!html

在這里插入圖片描述
在這里插入圖片描述

A2_6_ThreeJS_Earth_js

在這里插入圖片描述

A2_7_ThreeJS_Earth_ts_vue3

在這里插入圖片描述
在這里插入圖片描述

A2_8_ThreeJS_Earth_js

在這里插入圖片描述
在這里插入圖片描述

A2_9_ThreeJS_Earth_js_vite

在這里插入圖片描述
在這里插入圖片描述

A2_10_ThreeJS_Earth_js

在這里插入圖片描述
在這里插入圖片描述

A2_11_ThreeJS_Earth_js_vite

在這里插入圖片描述
在這里插入圖片描述

A2_12_ThreeJS_Earth_js

在這里插入圖片描述
在這里插入圖片描述

A2_13_ThreeJS_Earth_js_vite

在這里插入圖片描述
在這里插入圖片描述

A2_14_ThreeJS_Earth_js

在這里插入圖片描述
在這里插入圖片描述

A2_15_ThreeJS_Earth_js_all

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

A2_16_ThreeJS_Earth_js_vite!react

在這里插入圖片描述
在這里插入圖片描述

結語

如果您覺得該方法或代碼有一點點用處,可以給作者點個贊,或打賞杯咖啡;╮( ̄▽ ̄)╭
如果您感覺方法或代碼不咋地//(ㄒoㄒ)//,就在評論處留言,作者繼續改進;o_O???
如果您需要相關功能的代碼定制化開發,可以留言私信作者;(????)
感謝各位大佬童鞋們的支持!( ′ ▽′ )ノ ( ′ ▽′)っ!!!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/76308.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/76308.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/76308.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Cursor 在前端需求開發工作流中的應用|得物技術

一、引言 很高興與大家分享現階段 Cursor 在我的工作中的使用體驗。首先是預期管理,本篇文章不會分享 x 個你可能不知道的小技巧,也不會讓你擁有無需自行編碼的能力,同時不涉及 Cursor 工程化方面內容。僅僅是圍繞個人開發流程中的已有問題&…

PyQt學習記錄

PyQt學習記錄 要在界面上 創建一個控件,就需要在程序代碼中 創建 這個 控件對應類 地一個 實例對象。 在Qt系統中,控件(widget)是 層層嵌套 的,除了最頂層的控件,其他的控件都有父控件。 幾個函數 函數mo…

react: styled-components實現原理 標簽模版

styled-components是針對react中一個前端廣泛使用的css-in-js樣式庫B站 利用標簽模版 利用ES6中的 標簽模版文檔標簽模板其實不是模板,而是函數調用的一種特殊形式。“標簽”指的就是函數,緊跟在后面的模板字符串就是它的參數。 let a 5; let b 10;…

網絡安全應急響應之文件痕跡排查:從犯罪現場到數字狩獵的進化論

凌晨3點,某金融企業的服務器突然告警,核心數據庫出現未知進程訪問。安全團隊緊急介入時,攻擊者已抹去日志痕跡。在這場與黑客的時間賽跑中,文件痕跡排查成為破局關鍵。本文將帶您深入數字取證的"案發現場",揭…

多模態大語言模型arxiv論文略讀(七)

MLLM-DataEngine: An Iterative Refinement Approach for MLLM ?? 論文標題:MLLM-DataEngine: An Iterative Refinement Approach for MLLM ?? 論文作者:Zhiyuan Zhao, Linke Ouyang, Bin Wang, Siyuan Huang, Pan Zhang, Xiaoyi Dong, Jiaqi Wang,…

idea插件:AICommit,智能生成Git提交信息

AICommit:智能生成Git提交信息的IDEA插件指南 一、AICommit插件介紹 AICommit是一款專為開發者設計的IntelliJ IDEA插件,它利用人工智能技術自動生成清晰、規范的Git提交信息(Commit Message)。該插件能夠分析你的代碼變更,理解修改的上下文…

js 拷貝-包含處理循環引用問題

在 JavaScript 中,拷貝對象和數組時需要特別注意,因為對象和數組是引用類型,直接賦值只會復制引用,而不是實際的數據。以下是幾種常見的拷貝方法及其應用場景: 1. 淺拷貝(Shallow Copy) 淺拷貝…

oracle將varchar2 轉為clob類型存儲。 oracle不支持直接使用sql,將 varchar2 到clob的類型轉換,需要下面操作

將一個現有表中的 VARCHAR2 列數據遷移到一個 CLOB 列的過程。以下是對每一步操作的說明: 1. 添加一個新的 CLOB 類型列 首先,向表中添加一個新的 CLOB 類型的列。這個列將用來存儲原本的 VARCHAR2 數據。 ALTER TABLE your_table ADD (new_column CL…

Dynamics 365 Business Central Recurring Sales Lines 經常購買銷售行 來作 訂閱

#D365 BC ERP# #Navision# 前面有節文章專門介紹了BC 2024 Wave 2 支持的更好的Substription & Recurring Billing。 其實在D365 BC ERP中一直有一個比較簡單的訂閱模塊Recrring Sales Lines。本文將介紹一下如何用Recurring Sales Lines來 實施簡易的訂閱Substription。具…

算法比賽中常用的數學知識

一、求某個整數的正約數個數與正約數之和 1.1求某個正整數N的正約數個數 public class Main {public static void main(String[] args) {System.out.println(count(360));//結果為24}public static long count(long number){long count1;for(long i2;i<Math.sqrt(number);…

虛擬Ubuntu系統 開機提示:SMBus Host controller not enabled 后正常啟動,去除這個提示提升開機速度。

如題&#xff0c;虛擬機中的Ubuntu系統開機提示&#xff1a;SMBus Host controller not enabled&#xff0c;雖然能正常啟動&#xff0c;但不僅影響開機速度&#xff0c;而且還膈應人。 使用命令查看模塊 lsmod | grep piix4 發現i2c_piix4有問題&#xff0c; 禁止 i2c_piix4…

NLP基礎知識 與 詞向量的轉化方法 發展

目錄 1.NLP 基礎知識點 為什么需要自然語言處理? 自然語言處理有哪些分類? 自然語言處理有哪些實際應用? 為什么需要自然語言處理? 自然語言處理有哪些分類? 自然語言處理有哪些實際應用? 自然語言處理的技術/工作原理是什么? 2.NLP文本轉化為詞向量的方法 2…

【FPGA基礎學習】狀態機思想實現流水燈

目錄 一、用狀態機實現LED流水燈1.狀態機思想簡介1. 1基本概念1.2.核心要素1.3分類與模型 2.LED流水燈 二、CPLD與FPGA1.技術區別2.應用場景3.設計選擇建議 三、HDLbits組合邏輯題目 一、用狀態機實現LED流水燈 1.狀態機思想簡介 1. 1基本概念 ? 狀態機&#xff08;Finite …

CSS語言的游戲AI

CSS語言的游戲AI探討 隨著技術的飛速發展&#xff0c;游戲行業也在不斷地革命和演變。游戲中的人工智能&#xff08;AI&#xff09;作為一種重要的設計元素&#xff0c;其復雜性和智能程度對游戲的體驗、玩法和整體表現都有著深遠的影響。近年來&#xff0c;CSS&#xff08;Ca…

docker配置redis容器時配置文件docker-compose.yml示例

1.配置數據節點&#xff08;主從節點&#xff09; version: 3.7 services:master:image: redis:5.0.9container_name: redis-masterrestart: alwayscommand: redis-server --appendonly yesports:- 6379:6379slave1:image: redis:5.0.9container_name: redis-slave1restart: a…

【WPF】IOC控制反轉的應用:彈窗但不互相調用ViewModel

全稱&#xff1a;Inversion of Control&#xff0c;控制反轉 場景&#xff1a;A頁面需要調用B/C頁面等&#xff0c;防止直接在VM中新建別的頁面實例&#xff0c;使用IOC設計架構&#xff1b; 創建Service&#xff0c;在Service中實現頁面的實例創建和定義頁面輸入輸出參數。 在…

MySQL學習筆記十五

第十七章組合查詢 17.1組合查詢 MySQL允許執行多個查詢&#xff08;多條SELECT語句&#xff09;&#xff0c;并將結果作為單個查詢結果集返回。這些組合查詢通常稱為并&#xff08;union&#xff09;或復合查詢&#xff08;compound query&#xff09;。 以下幾種情況需要使…

【MySQL】安裝

下載 MySQL :: MySQL Downloads 安裝 mysql 驗證

ffpyplayer+Qt,制作一個視頻播放器

ffpyplayerQt&#xff0c;制作一個視頻播放器 項目地址FFmpegMediaPlayerVideoWidget 項目地址 https://gitee.com/chiyaun/QtFFMediaPlayer FFmpegMediaPlayer 按照 QMediaPlayer的方法重寫一個ffpyplayer # coding:utf-8 import logging from typing import Unionfrom PySide…

Spring Boot 國際化配置項詳解

Spring Boot 國際化配置項詳解 1. 核心配置項分類 將配置項分為以下類別&#xff0c;便于快速定位&#xff1a; 1.1 消息源配置&#xff08;MessageSource 相關&#xff09; 控制屬性文件的加載、編碼、緩存等行為。 配置項作用默認值示例說明spring.messages.basename指定屬…