cesium and three.js【轉】

https://blog.csdn.net/zhishiqu/article/details/79077883

這是威爾遜Muktar關於整合Three.js與銫的客人帖子。Three.js是一個輕量級的跨瀏覽器JavaScript庫，用於在瀏覽器中建立和顯示動畫3D計算機圖形。將Cesium的行星級渲染和GIS功能與Three.js廣泛而易用的通用3D API相結合，為新的WebGL體驗開啟了許多可能性。你可以在這裡檢視這個演示的實時版本和程式碼本身。 - 加里

3D JavaScript庫現在已經完全成熟並且廣為人知，使得開發人員可以避免在瀏覽器中使用3D的麻煩。開發人員可以輕鬆建立相機，物件，燈光，材質和圖形，並選擇渲染器，使用HTML 5的畫布，WebGL或SVG繪製場景。

因為Cesium和Three.js都是用於3D視覺化的，並且是從頭開始用JavaScript構建的，所以它們有相似之處，可以將這些驚人的庫整合在一起。我對這兩個框架進行整合的方法比看起來簡單：我將這兩個框架分離到了不同的檢視中，並參考了HTML Canvas元素，並將它們的控制器組合在同一個座標系中。由於兩者都是開源的，我可以分享這個演示，這將涵蓋一些基礎知識。

左：銫現場。中心：Three.js場景。右：組合的場景。

銫是一個為了建立數字地球而開發的三維圖書館，其渲染對於真實的地球來說是非常精確的。藉助3D Tiles，開發人員可以將幾乎所有內容都重新渲染到瀏覽器中的數字畫布上。

指導銫的基本渲染原理與Three.js沒有太大區別。Three.js是用於渲染3D物件的強大3D庫。通過在兩個場景中複製銫的球面座標系和匹配的數字地球，很容易將兩個單獨的渲染引擎層整合到一個主場景中。我將給出一個關於其整合方法的簡單說明，如下所示：

初始化Cesium渲染器，
初始化Three.js渲染器，
初始化這兩個庫的3D物件，和
迴圈渲染器。

主功能

該html需要三個容器和銫：

<body>
<div id="cesiumContainer"></div>
<div id="ThreeContainer"></div>
</body>

<script> main(); </script>

這是主要功能：

function main(){
// boundaries in WGS84 to help with syncing the renderers
var minWGS84 = [115.23,39.55];
var maxWGS84 = [116.23,41.55];
var cesiumContainer = document.getElementById("cesiumContainer");
var ThreeContainer = document.getElementById("ThreeContainer");
var _3Dobjects = []; //Could be any Three.js object mesh
var three = {
renderer: null,
camera: null,
scene: null
};
var cesium = {
viewer: null
};
initCesium(); // Initialize Cesium renderer
initThree(); // Initialize Three.js renderer
init3DObject(); // Initialize Three.js object mesh with Cesium Cartesian coordinate system
loop(); // Looping renderer
}

初始化銫渲染器

首先，我們可以通過新增自定義影象或預設提供的其他部分來自定義銫檢視器。通過禁用Cesium的預設渲染迴圈，我們可以將其動畫幀與Three.js同步。

function initCesium(){
cesium.viewer = new Cesium.Viewer(cesiumContainer,{
useDefaultRenderLoop: false,
selectionIndicator : false,
homeButton:false,
sceneModePicker:false,
navigationHelpButton:false,
infoBox : false,
navigationHelpButton:false,
navigationInstructionsInitiallyVisible:false,
animation : false,
timeline : false,
fullscreenButton : false,
allowTextureFilterAnisotropic:false,
contextOptions:{
webgl: {
alpha: false,
antialias: true,
preserveDrawingBuffer : true,
failIfMajorPerformanceCaveat: false,
depth:true,
stencil:false,
anialias:false
},
},
targetFrameRate:60,
resolutionScale:0.1,
orderIndependentTranslucency : true,
creditContainer : "hidecredit",
imageryProvider : new Cesium.createTileMapServiceImageryProvider({
url: 'Assets/imagery/NaturalEarthII/',
maximumLevel : 5
}),
baseLayerPicker : false,
geocoder : false,
automaticallyTrackDataSourceClocks: false,
dataSources: null,
clock: null,
terrainShadows: Cesium.ShadowMode.DISABLED
});
var center = Cesium.Cartesian3.fromDegrees(
(minWGS84[0] + maxWGS84[0]) / 2,
((minWGS84[1] + maxWGS84[1]) / 2)-1,
200000
);
cesium.viewer.camera.flyTo({
destination : center,
orientation : {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-60),
roll : Cesium.Math.toRadians(0)
},
duration: 3
});
}

初始化Three.js渲染器

接下來我們簡單地初始化Three.js強制階段，包括場景，相機，渲染器和DOM元素。

function initThree(){
var fov = 45;
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width / height;
var near = 1;
var far = 10*1000*1000; // needs to be far to support Cesium's world-scale rendering
three.scene = new THREE.Scene();
three.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
three.renderer = new THREE.WebGLRenderer({alpha: true});
ThreeContainer.appendChild(three.renderer.domElement);
}

在兩個庫中初始化3D物件

使用實體物件可以簡單地將Cesium物件新增到其檢視器中; 例如，可以使用3D圖形類來渲染在Three.js中建立的3D繪圖物件網格，或者使用Three.js建立的任何其他3D物件。所有這些都儲存在一個_3DObjects進一步處理，其中包含用於同步相機的額外資訊。這裡我們將渲染一個[Lathe geometry]和一個[dodecahedron]。請注意，Three.js呈現z-up，而Cesium呈現y-up。

function init3DObject(){
//Cesium entity
var entity = {
name : 'Polygon',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([
minWGS84[0], minWGS84[1],
maxWGS84[0], minWGS84[1],
maxWGS84[0], maxWGS84[1],
minWGS84[0], maxWGS84[1],
]),
material : Cesium.Color.RED.withAlpha(0.2)
}
};
var Polygon = cesium.viewer.entities.add(entity);
// Lathe geometry
var doubleSideMaterial = new THREE.MeshNormalMaterial({
side: THREE.DoubleSide
});
var segments = 10;
var points = [];
for ( var i = 0; i < segments; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * segments + 5, ( i - 5 ) * 2 ) );
}
var geometry = new THREE.LatheGeometry( points );
var latheMesh = new THREE.Mesh( geometry, doubleSideMaterial ) ;
latheMesh.scale.set(1500,1500,1500); //scale object to be visible at planet scale
latheMesh.position.z += 15000.0; // translate "up" in Three.js space so the "bottom" of the mesh is the handle
latheMesh.rotation.x = Math.PI / 2; // rotate mesh for Cesium's Y-up system
var latheMeshYup = new THREE.Group();
latheMeshYup.add(latheMesh)
three.scene.add(latheMeshYup); // don’t forget to add it to the Three.js scene manually
//Assign Three.js object mesh to our object array
var _3DOB = new _3DObject();
_3DOB.threeMesh = latheMeshYup;
_3DOB.minWGS84 = minWGS84;
_3DOB.maxWGS84 = maxWGS84;
_3Dobjects.push(_3DOB);
// dodecahedron
geometry = new THREE.DodecahedronGeometry();
var dodecahedronMesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial()) ;
dodecahedronMesh.scale.set(5000,5000,5000); //scale object to be visible at planet scale
dodecahedronMesh.position.z += 15000.0; // translate "up" in Three.js space so the "bottom" of the mesh is the handle
dodecahedronMesh.rotation.x = Math.PI / 2; // rotate mesh for Cesium's Y-up system
var dodecahedronMeshYup = new THREE.Group();
dodecahedronMeshYup.add(dodecahedronMesh)
three.scene.add(dodecahedronMeshYup); // don’t forget to add it to the Three.js scene manually
//Assign Three.js object mesh to our object array
_3DOB = new _3DObject();
_3DOB.threeMesh = dodecahedronMeshYup;
_3DOB.minWGS84 = minWGS84;
_3DOB.maxWGS84 = maxWGS84;
_3Dobjects.push(_3DOB);
}

function _3DObject(){
this.graphMesh = null; //Three.js 3DObject.mesh
this.minWGS84 = null; //location bounding box
this.maxWGS84 = null;
}

迴圈渲染器

function loop(){
requestAnimationFrame(loop);
renderCesium();
renderThreeObj();
}

function renderCesium(

相關推薦

cesium and three.js【轉】

https://blog.csdn.net/zhishiqu/article/details/79077883 這是威爾遜Muktar關於整合Three.js與銫的客人帖子。Three.js是一個輕量級的跨瀏覽器JavaScript庫，用於在瀏覽器中建立和顯示動畫3D計算機圖形。將Cesium的行星級渲染和

JS.【轉】JS事件處理函數中return的作用

檢測也會 post 繼續 .cn add AR 當前進行 1、js事件處理函數中return的作用 - AnswerCard - 博客園.html（https://www.cnblogs.com/answercard/p/5255230.html） 2、網頁內容保存：

lua 邏輯運算 and, or, not【轉】

來自：https://www.cnblogs.com/Jqxing/p/4807719.html這邊並非說lua低階,為了方便區分才這麼寫的。高階語言中的邏輯運算子是&&,||,!　　a&&b : 當a和b都為真, 結果返回為真,當a或者b有一個為假,結果返回為假　　a||b:

【轉】安裝Vue.js的方法

環境搭建 node.js 初始化其它 cnpm lan commonjs pos 重量級框架安裝vue.js的方法一、簡介 Vue.js 是什麽 Vue.js（讀音 /vju?/, 類似於 view）是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是

【轉】js中15個常用的正則表達式

顏色字符 8.4 特殊字符 cnp 浮點數 == div mail 1 用戶名正則 //用戶名正則，4到16位（字母，數字，下劃線，減號） var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //輸出 true console.log(uPa

【轉】簡說GNU, GCC and MinGW (Lu Hongling)

計算機 java mali 成功 net lec 移植發展計算原地址：https://my.oschina.net/u/588967/blog/73478 GNU, GCC, MinGW是開源社區常常要遇到的概念. 網上一般的解釋比較繁瑣, 讓人如墜雲霧. 本文力圖用

【轉】Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

ack 目錄 javascrip 難度時間網站開發 clas jetbrains 常用目錄學習資料簡介安裝Node.js npm簡介開發工具 Sublime Node.js開發環境配置擴展：安裝多版本管理器學習資料　　1.深入淺出Node.j

【轉】淺談Node.js單線程模型

包裝傳遞參數銷毀 img lba afr 第一個元素 request 浪費 Node.js采用事件驅動和異步I/O 的方式，實現了一個單線程、高並發的運行時環境，而單線程就意味著同一時間只能做一件事，那麽Node.js如何利用單線程來實現高並發和異步I/O？本文將

【轉】Redundancy and Latency in Structured Buffer Use

list set actual about ast oat efi macros cte From：https://developer.nvidia.com/content/redundancy-and-latency-structured-buffer-use In a

【轉】使用js觸發事件

rda ctype rem odi scroll cancel script 事件 some 如果大家將一張網頁看成一個form的話，大致上就成了一個web form的模型。在win form 下要想手動觸發某一個對象的事件是很簡單的，只要發送一條消息即可達成。

【轉】js中的事件委托或是事件代理詳解

ava 程序 fff 員工我們 cnblogs 上傳 on() 類型起因： 1、這是前端面試的經典題型，要去找工作的小夥伴看看還是有幫助的； 2、其實我一直都沒弄明白，寫這個一是為了備忘，二是給其他的知其然不知其所以然的小夥伴們以參考；概述：那什麽叫

各瀏覽器禁用某網站JS腳本的方法【轉】

per gin width aaa all firefox nal opera 腳本某些網站，經常會加載一些非常討厭的JS腳本，如果我們想禁止這個網站的JS腳本，可以使用下面的方法：一、IE瀏覽器 1、在Internet選項中，選擇安全選項卡，然後點擊受限制的站點，

【轉】百度坐標坐標系之間的轉換（JS版代碼）

固定鏈接百度坐標 func wan bsp pan gcj-02 坐標系 urn 1 /** 2 * Created by Wandergis on 2015/7/8. 3 * 提供了百度坐標（BD09）、國測局坐標（火星坐標，GCJ02）、和WGS84

【轉】瀏覽器使用js滾動

比較 bsp 需要 scrolltop chrom 瀏覽器 body parent document 為了讓某個元素垂直居中一般會取document.documentElement.scrollTop的值，但是在chrome下，這個值為空，比較好的解決方案是 var top

JS && || 陷阱 javascript 邏輯與、邏輯或【轉】

第一個 def null eof OS 與運算 scrip pos 一個通常來說邏輯運算a&&b和a||b分別是邏輯與運算和邏輯或運算，返回的是一個布爾值，要麽為true，要麽為false。比如在PHP裏面a&&b返回類型永遠是布爾值，

【轉】通過js獲取系統版本以及瀏覽器版本

返回 ati event 一個數 alt eve qq瀏覽器搜狗瀏覽器 rms 1 function getOsInfo() { 2 var userAgent = navigator.userAgent.toLowerCase(); 3

【轉】js中的閉包

js中為什麼要使用閉包？先介紹一下全域性變數和區域性變數的優缺點：全域性變數：在全域性環境下宣告的變數為全域性變數，全域性變數在任何地方都可訪問，且一直儲存在記憶體中只到應用程式退出（關閉網頁或瀏覽器）時才被銷燬。但是過多的宣告全域性變數容易造成全域性汙染，且全域性變數容易被修改。區域性

【轉】How to check HBA host and its corresponding WWPN on RHEL 5, 6 or 7?

https://access.redhat.com/solutions/55334 SOLUTION UNVERIFIED - 已更新 2018年二月6日05:35 - English 環境 Red Hat En

【轉】MySQL— pymysql and SQLAlchemy

sql min state 參考分享 call date 使用關閉連接【轉】MySQL— pymysql and SQLAlchemy 目錄一、pymysql 二、SQLAlchemy 一、pymysql pymsql是Python中操作MyS

【轉】MySQL— pymysql and SQLAlchemy Python開發【第十九篇】：Python操作MySQL

【轉】MySQL— pymysql and SQLAlchemy 目錄一、pymysql 二、SQLAlchemy 一、pymysql pymsql是Python中操作MySQL的模組，其使用方法和MySQLdb幾乎相同。 1. 下載安裝 #在終端直接執行 pip3 install p

cesium and three.js【轉】

主功能

初始化銫渲染器

初始化Three.js渲染器

在兩個庫中初始化3D物件

迴圈渲染器

相關推薦