碼上歡樂
相關內容    簡體    繁體

cesium and three.js【轉】

本文轉載自   查看原文   2019-01-12 09:22   2750    cesium/ ThreeJs

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需要三個容器和銫：

  1. <body>
  2. <div id="cesiumContainer"></div>
  3. <div id="ThreeContainer"></div>
  4. </body>
  5. <script> main(); </script>

這是主要功能：

  1. function main(){
  2. // boundaries in WGS84 to help with syncing the renderers
  3. var minWGS84 = [115.23,39.55];
  4. var maxWGS84 = [116.23,41.55];
  5. var cesiumContainer = document.getElementById("cesiumContainer");
  6. var ThreeContainer = document.getElementById("ThreeContainer");
  7.  
  8. var _3Dobjects = []; //Could be any Three.js object mesh
  9. var three = {
  10. renderer: null,
  11. camera: null,
  12. scene: null
  13. };
  14.  
  15. var cesium = {
  16. viewer: null
  17. };
  18.  
  19. initCesium(); // Initialize Cesium renderer
  20. initThree(); // Initialize Three.js renderer
  21. init3DObject(); // Initialize Three.js object mesh with Cesium Cartesian coordinate system
  22. loop(); // Looping renderer
  23. }

初始化銫渲染器

首先，我們可以通過添加自定義圖像或默認提供的其他部分來自定義銫查看器。通過禁用Cesium的默認渲染循環，我們可以將其動畫幀與Three.js同步。

  1. function initCesium(){
  2. cesium.viewer = new Cesium.Viewer(cesiumContainer,{
  3. useDefaultRenderLoop: false,
  4. selectionIndicator : false,
  5. homeButton:false,
  6. sceneModePicker:false,
  7. navigationHelpButton:false,
  8. infoBox : false,
  9. navigationHelpButton:false,
  10. navigationInstructionsInitiallyVisible:false,
  11. animation : false,
  12. timeline : false,
  13. fullscreenButton : false,
  14. allowTextureFilterAnisotropic:false,
  15. contextOptions:{
  16. webgl: {
  17. alpha: false,
  18. antialias: true,
  19. preserveDrawingBuffer : true,
  20. failIfMajorPerformanceCaveat: false,
  21. depth:true,
  22. stencil:false,
  23. anialias:false
  24. },
  25. },
  26. targetFrameRate:60,
  27. resolutionScale:0.1,
  28. orderIndependentTranslucency : true,
  29. creditContainer : "hidecredit",
  30. imageryProvider : new Cesium.createTileMapServiceImageryProvider({
  31. url: 'Assets/imagery/NaturalEarthII/',
  32. maximumLevel : 5
  33. }),
  34. baseLayerPicker : false,
  35. geocoder : false,
  36. automaticallyTrackDataSourceClocks: false,
  37. dataSources: null,
  38. clock: null,
  39. terrainShadows: Cesium.ShadowMode.DISABLED
  40. });
  41.  
  42. var center = Cesium.Cartesian3.fromDegrees(
  43. (minWGS84[0] + maxWGS84[0]) / 2,
  44. ((minWGS84[1] + maxWGS84[1]) / 2)-1,
  45. 200000
  46. );
  47. cesium.viewer.camera.flyTo({
  48. destination : center,
  49. orientation : {
  50. heading : Cesium.Math.toRadians(0),
  51. pitch : Cesium.Math.toRadians(-60),
  52. roll : Cesium.Math.toRadians(0)
  53. },
  54. duration: 3
  55. });
  56. }

初始化Three.js渲染器

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

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

在兩個庫中初始化3D對象

使用實體對象可以簡單地將Cesium對象添加到其查看器中; 例如，可以使用3D圖形類來渲染在Three.js中創建的3D繪圖對象網格，或者使用Three.js創建的任何其他3D對象。所有這些都保存在一個_3DObjects進一步處理，其中包含用於同步相機的額外信息。這里我們將渲染一個[Lathe geometry]和一個[dodecahedron]。請注意，Three.js呈現z-up，而Cesium呈現y-up。

  1. function init3DObject(){
  2. //Cesium entity
  3. var entity = {
  4. name : 'Polygon',
  5. polygon : {
  6. hierarchy : Cesium.Cartesian3.fromDegreesArray([
  7. minWGS84[0], minWGS84[1],
  8. maxWGS84[0], minWGS84[1],
  9. maxWGS84[0], maxWGS84[1],
  10. minWGS84[0], maxWGS84[1],
  11. ]),
  12. material : Cesium.Color.RED.withAlpha(0.2)
  13. }
  14. };
  15. var Polygon = cesium.viewer.entities.add(entity);
  16.  
  17. // Lathe geometry
  18. var doubleSideMaterial = new THREE.MeshNormalMaterial({
  19. side: THREE.DoubleSide
  20. });
  21. var segments = 10;
  22. var points = [];
  23. for ( var i = 0; i < segments; i ++ ) {
  24. points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * segments + 5, ( i - 5 ) * 2 ) );
  25. }
  26. var geometry = new THREE.LatheGeometry( points );
  27. var latheMesh = new THREE.Mesh( geometry, doubleSideMaterial ) ;
  28. latheMesh.scale.set(1500,1500,1500); //scale object to be visible at planet scale
  29. latheMesh.position.z += 15000.0; // translate "up" in Three.js space so the "bottom" of the mesh is the handle
  30. latheMesh.rotation.x = Math.PI / 2; // rotate mesh for Cesium's Y-up system
  31. var latheMeshYup = new THREE.Group();
  32. latheMeshYup.add(latheMesh)
  33. three.scene.add(latheMeshYup); // don’t forget to add it to the Three.js scene manually
  34.  
  35. //Assign Three.js object mesh to our object array
  36. var _3DOB = new _3DObject();
  37. _3DOB.threeMesh = latheMeshYup;
  38. _3DOB.minWGS84 = minWGS84;
  39. _3DOB.maxWGS84 = maxWGS84;
  40. _3Dobjects.push(_3DOB);
  41.  
  42. // dodecahedron
  43. geometry = new THREE.DodecahedronGeometry();
  44. var dodecahedronMesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial()) ;
  45. dodecahedronMesh.scale.set(5000,5000,5000); //scale object to be visible at planet scale
  46. dodecahedronMesh.position.z += 15000.0; // translate "up" in Three.js space so the "bottom" of the mesh is the handle
  47. dodecahedronMesh.rotation.x = Math.PI / 2; // rotate mesh for Cesium's Y-up system
  48. var dodecahedronMeshYup = new THREE.Group();
  49. dodecahedronMeshYup.add(dodecahedronMesh)
  50. three.scene.add(dodecahedronMeshYup); // don’t forget to add it to the Three.js scene manually
  51.  
  52. //Assign Three.js object mesh to our object array
  53. _3DOB = new _3DObject();
  54. _3DOB.threeMesh = dodecahedronMeshYup;
  55. _3DOB.minWGS84 = minWGS84;
  56. _3DOB.maxWGS84 = maxWGS84;
  57. _3Dobjects.push(_3DOB);
  58. }
  1. function _3DObject(){
  2. this.graphMesh = null; //Three.js 3DObject.mesh
  3. this.minWGS84 = null; //location bounding box
  4. this.maxWGS84 = null;
  5. }

循環渲染器

  1. function loop(){
  2. requestAnimationFrame(loop);
  3. renderCesium();
  4. renderThreeObj();
  5. }
  1. function renderCesium(){
  2. cesium.viewer.render();
  3. }

我們將克隆Three.js攝像頭以匹配Cesium攝像頭，因此不需要為Three.js分配鼠標控制器，但是由於Three.js DOM元素在Cesium之上，我們仍然需要將其刪除。我們通過向pointer-events:noneThree.js渲染器添加CSS屬性來刪除它。現在一切都會根據銫的相機投影來渲染。

還有一個坐標轉換要做，使對象在地球上正確顯示。這包括將大地緯度/經度位置轉換為笛卡兒XYZ，並使用WGS84區域從左下角到左上角的方向作為向上矢量，使物體指向地球中心。這也可以通過使用本地笛卡爾東北向或東北向下來計算。

  1. function renderThreeObj(){
  2. // register Three.js scene with Cesium
  3. three.camera.fov = Cesium.Math.toDegrees(cesium.viewer.camera.frustum.fovy) // ThreeJS FOV is vertical
  4. three.camera.updateProjectionMatrix();
  5.  
  6. var cartToVec = function(cart){
  7. return new THREE.Vector3(cart.x, cart.y, cart.z);
  8. };
  9.  
  10. // Configure Three.js meshes to stand against globe center position up direction
  11. for(id in _3Dobjects){
  12. minWGS84 = _3Dobjects[id].minWGS84;
  13. maxWGS84 = _3Dobjects[id].maxWGS84;
  14. // convert lat/long center position to Cartesian3
  15. var center = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2);
  16.  
  17. // get forward direction for orienting model
  18. var centerHigh = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2,1);
  19.  
  20. // use direction from bottom left to top left as up-vector
  21. var bottomLeft = cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], minWGS84[1]));
  22. var topLeft = cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], maxWGS84[1]));
  23. var latDir = new THREE.Vector3().subVectors(bottomLeft,topLeft ).normalize();
  24.  
  25. // configure entity position and orientation
  26. _3Dobjects[id].graphMesh.position.copy(center);
  27. _3Dobjects[id].graphMesh.lookAt(centerHigh);
  28. _3Dobjects[id].graphMesh.up.copy(latDir);
  29. }
  30.  
  31. // Clone Cesium Camera projection position so the
  32. // Three.js Object will appear to be at the same place as above the Cesium Globe
  33. three.camera.matrixAutoUpdate = false;
  34. var cvm = cesium.viewer.camera.viewMatrix;
  35. var civm = cesium.viewer.camera.inverseViewMatrix;
  36. three.camera.matrixWorld.set(
  37. civm[0], civm[4], civm[8 ], civm[12],
  38. civm[1], civm[5], civm[9 ], civm[13],
  39. civm[2], civm[6], civm[10], civm[14],
  40. civm[3], civm[7], civm[11], civm[15]
  41. );
  42. three.camera.matrixWorldInverse.set(
  43. cvm[0], cvm[4], cvm[8 ], cvm[12],
  44. cvm[1], cvm[5], cvm[9 ], cvm[13],
  45. cvm[2], cvm[6], cvm[10], cvm[14],
  46. cvm[3], cvm[7], cvm[11], cvm[15]
  47. );
  48. three.camera.lookAt(new THREE.Vector3(0,0,0));
  49.  
  50. var width = ThreeContainer.clientWidth;
  51. var height = ThreeContainer.clientHeight;
  52. var aspect = width / height;
  53. three.camera.aspect = aspect;
  54. three.camera.updateProjectionMatrix();
  55.  
  56. three.renderer.setSize(width, height);
  57. three.renderer.render(three.scene, three.camera);
  58. }


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Three.js入門教程[轉] Three.JS鼠標移動元素(轉) three.js 材質 three.js 曲線 Three.js入門 three.js 之旅 （三） Three.js與webVR three.js筆記 three.js入門3 Three.js基本 Demo
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM